Sp-dev-fx-controls-react: New Control: Persona Card

[hugoabernier]

Category

• [x] Enhancement
• [ ] Bug
• [ ] Question

Version

Please specify what version of the library you are using: [1.12.0]

Expected / Desired Behavior / Question

The office ui fabric library provides a way to create a persona card that looks and feels like the out-of-the-box persona card in SharePoint. However, it requires the developer to do all the work to retrieve the information.

Picture credit Heinrich Ulbricht

While it ultimately gives developers full control over what to render in the persona card, there are times where a developer just wants to render a standard/out-of-the-box persona card in their custom solutions.

Would it be useful to have a standard control to render an out-of-the-box persona card?

Observed Behavior

Office UI Fabric offers persona card control, but does not retrieve data for you.

Steps to Reproduce

1. Go to the Office UI Fabric example and copy into your own solution.
2. Control will require you to populate the data

This idea originated from a StackExchange post from Heinrich. If you think it's a good idea, he deserves the credit. If you think it's a bad idea, I deserve the credit :-)

Thanks!

[hugoabernier]

By the way, the proposed control would leverage the existing hovercard in the FieldUserRenderer control, but make it more generic so that it can be used outside of the FieldUserRender control.

[heinrich-ulbricht]

Note: Re-using the standard control would be my preferred solution as this would always be up-to-date. But if that's not possible a PnP control would be really handy!

[hugoabernier]

Yes, you're right, I should have been clearer. It should use the standard control, but make it easier for developers to use in their solutions. That way, the behavior remains consistent when Microsoft updates the functionality.

[heinrich-ulbricht]

Oh and looking at the PersonaCard component: this is Fabric JS only, there is no React component. I'd like the new component to be a React one.

@hugoabernier On StackExchange you said you implemented your own PersonaCard in the past. Maybe you could push this (or parts) to Github and link it here as a basis for discussion or further work?

[hugoabernier]

@heinrich-ulbricht I started putting something together last night. It uses the Office UI Fabric HoverCard and retrieves the user profile information from their username. I would have preferred to hook into SharePoint's own livepersonacard but I suspect it isn't supported for us to do so.

If anyone has any ideas how to leverage the OOB livepersonacard, I would appreciate any tips you may have.

My goal would be to avoid having every developer to re-write the profile loading and persona card rendering bits, but with the ability to pass the persona information (to avoid loading it from the profile) and optionally override rendering (to create your own version of a persona card).

I'll post it as a sample on my own repo over the next few days, and we can see about converting it to a control if there is interest.

[heinrich-ulbricht]

Don't know who could give more information about whether using the standard card is supported or not - maybe @estruyf?

[AJIXuMuK]

As far as I know, standard card is not exposed as a component. That’s why we can’t use it. And that’s why I implemented the functionality using HoverCard in FieldUserRenderer. You can partially reuse code from there, and maybe add additional info if you find a way to get more profile details (like LinkedIn profile)

[heinrich-ulbricht]

@AJIXuMuK Well technically it seems to be possible to load and use the standard card as demonstrated here. Now we need a sign if we are supposed to do this.

The code is linked to by this Technet article: https://social.technet.microsoft.com/wiki/contents/articles/52249.sharepoint-online-live-persona-card-in-custom-webpart.aspx
I don't know the credibility of this source. I tried do post an article but don't have enough privileges. So somebody must have signed this off. But there is not much other information around this topic.

[hugoabernier]

@AJIXuMuK the example you linked uses the loadComponentById method of the SPComponentLoader. If I'm reading this right, that method is no longer available and shouldn't be used. I believe the best way to do it (as @AJIXuMuK pointed out) would be to use the HoverCard.

If you have success with the sample you linked to, please do not hesitate to share with us. I'd love to avoid duplicating what SharePoint does.

[jonathanhotono]

This might not be related, but there is also a nice Org Chart feature within the persona when clicking the "Show more" button that perhaps can be extracted and decoupled into different component:

[yeshwanthjagannath]

@AJIXuMuK @heinrich-ulbricht @hugoabernier @VesaJuvonen - Is there a blog that showcases the steps to implement a custom HoverCard functionality with custom attributes to be displayed on the hovercard? or any article out there which shows us how to incorporate the FIeldUserRenderer? In my case i do not think this would work, since i am reading data from a custom list on SharePoint and rendering the data in a Persona Office UI Fabric react component and i am trying to surface custom attributes onhover of the persona card. Can you confirm if this is doable with the FieldUserRenderer?

[AJIXuMuK]

@yeshwanthjagannath
FieldUserRenderer is created to provide UI similar to OOTB rendering on User or Group field in SharePoint - display name as a link + HoverCard on hover.
There is a documentation on how to use FieldUserRenderer.
You can also look at FieldUserRenderer code itself to see how HoverCard is used.

[yeshwanthjagannath]

@AJIXuMuK - Thanks for pointing me out to this. Looking at it looks like i would have to implement my own FieldUserRenderer and HoverCard because of my custom attributes i want to surface as part of the HoverCard. Correct me if am wrong.

[AJIXuMuK]

@yeshwanthjagannath
Yes, FieldUserRenderer doesn't have any API or something to allow to add custom elements into HoverCard.

[yeshwanthjagannath]

@AJIXuMuK - Sounds good. Thank you for your response. I will dig through and code this out from scratch for my need.

[hugoabernier]

Ok, since loadComponentById is available again, I was able to create ProfileCard component with Denis Molodtsov's help (he did all the hard work, I just made it into a potential PnP control).

This is what it looks like:

(My dev tenant does not have an organization chart because I'm the only person in it, but it works)

The question I have is: do we want a control that wraps around any element, e.g.:

<ProfileCard>
<FieldUserRenderer users={event.fieldValue} context={this.context} className={'some-class'} cssProps={{ background: '#f00' }} />
</ProfileCard>

Or do we want a control that allows passing all the properties of a persona card in? Which is what I have now...

 public render(): React.ReactElement<IHelloPersonaProps> {
    const currentUserProps = {
      text: this.props.context.pageContext.user.displayName,
      email: this.props.context.pageContext.user.email ? this.props.context.pageContext.user.email : this.props.context.pageContext.user.loginName,
      serviceScope: this.props.context.serviceScope,
      //className: 'persona-card',
      //size: PersonaSize.size32,
      // moreDetail: this.personaDetail(), /* pass react element */
      //moreDetail: '<div>Details</div>', /* pass html string */
      // onCardOpenCallback: () => {
      //     console.log('WebPart', 'on card open callback');
      // },
      // onCardCloseCallback: () => {
      //     console.log('WebPart', 'on card close callaback');
      // }
  };
    return (
      <div className={ styles.helloPersona }>
        <h3>User with automatic picture</h3>
        <PersonaCard {...currentUserProps} />
        <h3>User with smaller picture</h3>
        <PersonaCard {...currentUserProps} size={PersonaSize.size32} />
        <h3>User name for list</h3>
        <PersonaCard {...currentUserProps} size={PersonaSize.size10} hideCoin={true} />
        <h3>External user</h3>
        <PersonaCard
        text="Denis Molodtsov"
        email="[email protected]"
        serviceScope={this.props.context.serviceScope}
        secondaryText={"Deserves all the credit"}
        //size={PersonaSize.size32}
        />
        <h3>Totally fake user</h3>
        <PersonaCard
        text="Fake User"
        email="[email protected]"
        serviceScope={this.props.context.serviceScope}
        //size={PersonaSize.size32}
        />
      </div>
    );
  }

I suspect that we want option 1, so that we don't have two controls that render user information and so that it can be re-used in other situations, but I'd like your opinion.

Either way, I can submit the PR today.

[hugoabernier]

Oh, and also, what do you want to call the control? PersonaCard or ProfileCard?

[heinrich-ulbricht]

Looking at the developer tools:

Seems to be called "LivePersonaCard" by Microsoft - so I would say something with "Persona" is good.

Oh and congratulations - look good :)

[hugoabernier]

LivePersonaCard it is! Thank you @heinrich-ulbricht -- it was you idea in the first place! (Don't worry, I gave you credit in the code)

[heinrich-ulbricht]

No worries! So far I did nothing but wanting to have such a component. I'm thankful you guys found the time to work on this.

@joaojmendes over here on Twitter https://twitter.com/joaojmendes/status/1155945428027768834 was the one getting this topic rolling again - maybe some development efforts could be coordinated? Just discovered he has a pull request open: https://github.com/SharePoint/sp-dev-fx-webparts/pull/930

[joaojmendes]

Soon I will work on new reusable control persona card that will have a live persona card associated.

Thank you. ☺️

Obter o Outlook para Androidhttps://aka.ms/ghei36

---

From: Heinrich Ulbricht [e-mail]
Sent: Thursday, August 1, 2019 4:24:51 PM
To: SharePoint/sp-dev-fx-controls-react [e-mail]
Cc: joaojmendes [e-mail]; Mention [e-mail]
Subject: Re: [SharePoint/sp-dev-fx-controls-react] New Control: Persona Card (#259)

No worries! So far I did nothing but wanting to have such a component. I'm thankful you guys found the time to work on this.

@joaojmendeshttps://github.com/joaojmendes over here on Twitter https://twitter.com/joaojmendes/status/1155945428027768834 was the one getting this topic rolling again - maybe some development efforts could be coordinated? Just discovered he has a pull request open: SharePoint/sp-dev-fx-webparts#930https://github.com/SharePoint/sp-dev-fx-webparts/pull/930

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/SharePoint/sp-dev-fx-controls-react/issues/259?email_source=notifications&email_token=AC7YHVN66KAEOQTLZOV76LDQCL54HA5CNFSM4HA6AKFKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3K6TDQ#issuecomment-517335438, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AC7YHVKYYFQFFAABOCEDV33QCL54HANCNFSM4HA6AKFA.

[hugoabernier]

@joaojmendes Great minds think alike! I submitted PR #352, but I would love to see how we can combine our efforts to avoid duplicates. I'm sure that you can come up with better ideas.

The version I wrote is intended as a wrapper around any HTML elements, for flexibility purposes. If you create an empty <LivePersonaCard /> element, it will attempt to create a PersonaCard with the user info that's passed it.

My goal was to make it super-easy to encourage web part developers to treat users as first-class citizens inside their web parts. Any time you see a person's name, it should like to their profile.

There is an opportunity to combine some elements with FieldUserRenderer, but I didn't want to make those changes until I discussed it with you guys.

Let me know what you think! I welcome any and all suggestions... just be kind :-)

[joaojmendes]

Hi Hugo,

I saw your PR now, that's what I was going to do! 🙂 It's looking pretty good. is what I use in the React-directory Web Part.

It seems-very well to change the FieldUserRenderer, and include the Live Persona Card.

Thanks for sharing!

João

---

From: Hugo Bernier [e-mail]
Sent: Thursday, August 1, 2019 7:46 PM
To: SharePoint/sp-dev-fx-controls-react [e-mail]
Cc: joaojmendes [e-mail]; Mention [e-mail]
Subject: Re: [SharePoint/sp-dev-fx-controls-react] New Control: Persona Card (#259)

@joaojmendeshttps://github.com/joaojmendes Great minds think alike! I submitted PR # 352, but I would love to see how we can combine our efforts to avoid duplicates.

The version I wrote is intended as a wrapper around any HTML elements, for flexibility purposes. If you create an empty element, it will attempt to create a PersonaCard with the user info that's passed it.

There is an opportunity to combine some elements with FieldUserRenderer, but I didn't want to make those changes until I discussed it with you guys.

Let me know what you think! I welcome any and all suggestions... just be kind :-)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/SharePoint/sp-dev-fx-controls-react/issues/259?email_source=notifications&email_token=AC7YHVNWJBNUNWTPPUZYZ5LQCMVSBA5CNFSM4HA6AKFKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3LRE4A#issuecomment-517411440, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AC7YHVJMC3LTPQ6IYMGKRVDQCMVSBANCNFSM4HA6AKFA.

[hugoabernier]

@joaojmendes @heinrich-ulbricht @AJIXuMuK I opened a uservoice feedback to ask (nicely) that Microsoft supports the LPC for 3rd-party developers. Your votes would help: https://sharepoint.uservoice.com/forums/329220-sharepoint-dev-platform/suggestions/38451154-provide-support-for-livepersonacard-in-3rd-party-s

[joaojmendes]

Thank you @Hugo [e-mail].

Done ! 😊

From: Hugo Bernier [e-mail]
Reply to: SharePoint/sp-dev-fx-controls-react [e-mail]
Date: Monday, 26 August 2019 at 18:04
To: SharePoint/sp-dev-fx-controls-react [e-mail]
Cc: João Mendes [e-mail], Mention [e-mail]
Subject: Re: [SharePoint/sp-dev-fx-controls-react] New Control: Persona Card (#259)

@joaojmendeshttps://github.com/joaojmendes @heinrich-ulbrichthttps://github.com/heinrich-ulbricht @AJIXuMuKhttps://github.com/AJIXuMuK I opened a uservoice feedback to ask (nicely) that Microsoft supports the LPC for 3rd-party developers. Your votes would help: https://sharepoint.uservoice.com/forums/329220-sharepoint-dev-platform/suggestions/38451154-provide-support-for-livepersonacard-in-3rd-party-s

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/SharePoint/sp-dev-fx-controls-react/issues/259?email_source=notifications&email_token=AC7YHVNJCRYDSOEJD3D7Q4TQGQEHRA5CNFSM4HA6AKFKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5E7U7Q#issuecomment-524941950, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AC7YHVKGULOXXT2O6INS6VTQGQEHTANCNFSM4HA6AKFA.

[robiharid]

@joaojmendes @heinrich-ulbricht @AJIXuMuK I opened a uservoice feedback to ask (nicely) that Microsoft supports the LPC for 3rd-party developers. Your votes would help: https://sharepoint.uservoice.com/forums/329220-sharepoint-dev-platform/suggestions/38451154-provide-support-for-livepersonacard-in-3rd-party-s

Hey can I ask what happened with this? I voted for your web part too.

I want a Persona web part so I can use the Graph API to call 'People I work with' and provide a list of users via Graph displayed through the Live Persona Card. Do I have to manually create it through https://docs.microsoft.com/en-us/graph/toolkit/components/person-card?