0

I would like to insert additional details into the Person Card being displayed when hovering or clicking the Person object. I have seen several examples on how to achieve this using web components, but none on setting this up using the React version.

Could you please provide an example on for example this, but for React:

<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>

My sample code:

<Person userId={val.person} view={cf.GetPersonViewMode(this.props.roleSize)} fetchImage={true} showPresence={true}
                    personCardInteraction={PersonCardInteraction.hover} line2Property="mail">
                      <PersonCard inheritDetails={true}>
                        ###
                      </PersonCard>
                  </Person>

How to proceed from here?

Frank-Ove Kristiansen
  • 55
  • 8

2 Answers2

1

It should work similarly, with the difference of a div instead of the template tag: *EDIT:

  render() {
    var MyAnimalFriends = MyAnimalFriends = (MgtTemplateProps) => {
      var personData = MgtTemplateProps.dataContext;
      console.log(personData) //returns data pertaining to the person
      return <div>
        <h3>Stuffed Animal Friends:</h3>
          <ul>
            <li>Giraffe</li>
            <li>lion</li>
            <li>Rabbit</li>
            <li>{personData.person.givenName}</li>
          </ul>
      </div>;
    };
    return (
      <div className="App">
        <Person personQuery="me">
          <PersonCard inheritDetails={true}>
            <MyAnimalFriends template="additional-details">
            </MyAnimalFriends>
          </PersonCard>
        </Person>
      </div>
    );
  }
Nic Vogt
  • 261
  • 1
  • 6
  • Thanks! I get the following error when adding this code: Property 'template' does not exist on type DIV. How can I fix this? – Frank-Ove Kristiansen Jan 04 '21 at 11:00
  • Seems like this actually is wrong, its better to do this through events. I've updated the comment with the js version. – Nic Vogt Jan 13 '21 at 19:36
  • Thank you again. When I try the updated code sample, the Person Card components are rendered instead of the Person components. The Person Card components should be rendered when hovering over the Person component. – Frank-Ove Kristiansen Jan 19 '21 at 21:26
1

Managed to get a custom PersonCard showing on-hover with additional details. You need to wrap your custom person card into it's own template (CustomPersonCard below) and setup the template props on the instance of the custom card to specify that it's the person card for that person.

render() {

    var CustomPersonCard = CustomPersonCard = (MgtTemplateProps) => {
      return <PersonCard inheritDetails={true}>
                <MyAnimalFriends template="additional-details">
                </MyAnimalFriends>
              </PersonCard>
    }

    var MyAnimalFriends = MyAnimalFriends = (MgtTemplateProps) => {
      var personData = MgtTemplateProps.dataContext;
      console.log(personData) //returns data pertaining to the person
      return <div>
        <h3>Stuffed Animal Friends:</h3>
          <ul>
            <li>Giraffe</li>
            <li>lion</li>
            <li>Rabbit</li>
            <li>{personData.person.givenName}</li>
          </ul>
      </div>;
    };

    return (
    <div className="App">
      <Person personQuery="me">
            <CustomPersonCard template="person-card">
            </CustomPersonCard>
      </Person>
    </div>
    );
  }
samjas
  • 41
  • 1
  • 6
  • 1
    This worked for me. For some reason placing the `PersonCard` directly as a child does not work as expected – Jackson May 05 '23 at 12:23