microsoft-graph-toolkit
microsoft-graph-toolkit copied to clipboard
microsoftgraph
Update templating in mgt-person-card
Proposal: Update the templating in mgt-person-card
Description
mgt-person-card has had a major UI overhaul, but has not yet had the templating/extensibility model re-evaluated.
Rationale
The old person card had it. The new one needs it too.
Preferred Solution
Additional Details
The V1 Person Card provided an additional details area below the contact details to show custom third-party content. Going forward, we've expanded this small area into an entire custom section. The custom section tab will be hidden by default, but when the additional details templates are provided a new section will appear.
Specify the following templates to light up a custom section:
| Data type | Data context | Description |
|---|---|---|
| additional-details-compact | person: The person details object |
The template used to specify the compact view of the custom section in the overview section. |
| additional-details-full | person: The person details object |
The template used to specify the full view of the custom section. |
| additional-details-icon | person: The person details object |
The template used to specify the tab icon of the custom section. |
Templates
The Person-Card component uses templates that allow you to add or replace portions of the component. To specify a template, include a <template> element inside of a component and set the data-type value to one of the following.
| Data type | Data context | Description |
|---|---|---|
| no-data | null | The template used when no data is available. |
| default | person: The person details object personImage: The URL of the image |
The default template replaces the entire component with your own. |
| person-details | person: The person details object personImage: The URL of the image |
The template used to render the top part of the person card. |
| contact-section | person: The person details object |
The template used to override the contact details section. |
| organization-section | person: The person details object |
The template used to override the organization section. |
| messages-section | person: The person details object |
The template used to override the email messages section. |
| files-section | person: The person details object |
The template used to override the files section. |
| profile-section | person: The person details object |
The template used to override the profile section. |
Additional Context
This is a continuation of work done in #583
Hello shweaver-MSFT, thank you for opening an issue with us!
I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌
![msftbot[bot] avatar](https://avatars.githubusercontent.com/in/26612?v=4 "Published by a pub.dev verified publisher"){kind=small}
Work is in progress, but I am going on leave for a while. I have it partially written in this branch: https://github.com/microsoftgraph/microsoft-graph-toolkit/tree/shweaver/621
So far I've created functions to handle the rendering of the additional-details templates. I also added a hasData abstract getter to the base section so that I could then (but have yet to do) pivot upon and conditionally render the section parts in person card. There is lots left to do, but this is someplace to start.
#774 restores the person card v1.0 templating to ensure there is no breaking change for developer upgrading. Keeping this issue open since the additional proposed templates have not been added and should be added in future releases.
@Mnickii I've assigned this to you as you're the best person to assess how well the new person card component supports templating of the sub-components.
