Open shweaver-MSFT opened 3 years ago
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 🙌
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.
@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.
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:
person
: The person details objectperson
: The person details objectperson
: The person details objectTemplates
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 thedata-type
value to one of the following.person
: The person details objectpersonImage
: The URL of the imageperson
: The person details objectpersonImage
: The URL of the imageperson
: The person details objectperson
: The person details objectperson
: The person details objectperson
: The person details objectperson
: The person details objectAdditional Context
This is a continuation of work done in #583