sharepoint - Render additional details in mgt-person-card after opened

Question

I have added additional details into the person card, very similar to this:

    <mgt-person person-query="me" view="twolines" person-card="hover">
      <template data-type="person-card">
        <mgt-person-card inherit-details>
          <template data-type="additional-details">
            <h3>Stuffed Animal Friends:</h3>
            <ul>
              <li>Giraffe</li>
              <li>lion</li>
              <li>Rabbit</li>
            </ul>
          </template>
        </mgt-person-card>
      </template>
    </mgt-person>

However, then content that would be rendered here, is coming from another data source. And since I am rendering many mgt-person objects, this would generate a lot of network traffic on the page.

Is it possible to insert additional details based on an event or similar of some sort? So that once the user hover or click on an mgt-person object and opens the mgt-person-card object, then the additional details gets loaded and displayed?

Answer 1

@Frank-Ove Kristiansen,

There is Template rendered event that should meet your requirement:

• https://docs.microsoft.com/en-us/graph/toolkit/customize-components/templates#template-rendered-event

And The official doc has provided a demo:

• https://mgt.dev/?path=/story/samples-templating--template-rendered-event

BR