Working example for Graph Toolkit using SharePoint spfx, React and Get component with template

Question

I'm trying to make use of the Microsoft Graph Toolkit inside my SharePoint spfx web part solution, and more specifically the React version (@microsoft/mgt-react).

I've managed importing the packages, and also render the control correctly.

However I am now trying to render controls based on the result from a control. Something like this:

const MyPerson = (props: MgtTemplateProps) => {
      const { person } = props.dataContext;
      return <Person userId={person.userPrincipalName}></Person>;
    }

And here is the control:

      <Get resource={`/groups/${this.props.groupid}/members`}>
        <MyPerson template="value" />
      </Get>

Nothing is rendered out. Could someone help me out fixing this?

Thanks!

UPDATED WORKING SAMPLE:

  public render(): React.ReactElement<IMemberListProps> {

const LoadingPerson = (props: MgtTemplateProps) => {
      return <div><Spinner size={SpinnerSize.large} label="Loading members..." /></div>;
    };

const MemberPerson = (props: MgtTemplateProps) => {
      const person = props.dataContext;
        return <div className={styles.memberRow}>
          <Person userId={person.userPrincipalName} view={PersonViewType.twolines} fetchImage={true} showPresence={true}
            personCardInteraction={PersonCardInteraction.hover} line2Property="mail"></Person></div>;
    };

    return (
      <div>
        <Get resource={`/groups/${this.props.groupId.toString()}/members/microsoft.graph.user/?$count=true&$orderby=displayname`} >
          <MemberPerson template="value" />
          <LoadingPerson template="loading" />
        </Get>
      </div>
    );
}

score 1 · Accepted Answer · answered Oct 28 '20 at 20:22

1

The props.dataContext doesn't have a person property but is the person object itself, try changing your MyPerson definition to:

const MyPerson = (props: MgtTemplateProps) => {
  const person = props.dataContext;
  return <Person userId={person.userPrincipalName}></Person>;
}

answered Oct 28 '20 at 20:22

Nikola Metulev

566
3
7

Thank you very much! Is it possible to also have a "loading" template (and maybe an "error" template) as well? I have seen how to achieve this in the standard mgt components, but I can't find any documentation on how to set this up using the React components. – Frank-Ove Kristiansen Nov 05 '20 at 13:49
1

Do you mean as part of the `Get` component? If so, it would be similar to how the `value` template is defined- just set the `template` prop to `loading` or `error` on the child component. – Nikola Metulev Nov 06 '20 at 03:58
Thank you again, Nikola! I managed creating a new object, and sending in the 'loading' template. Worked like a charm :-) – Frank-Ove Kristiansen Nov 10 '20 at 10:53
As you can see in this code, I'm trying to get a number of people using the Get object. I would like to order them by name. I have tried using this resource query, but it does not sort. Do you know what might be wrong? `/groups/${this.props.groupId.toString()}/members/microsoft.graph.user/?$count=true&$orderby=displayname` – Frank-Ove Kristiansen Nov 10 '20 at 10:58
It could be that this particular API doesn't support sorting. In this case, you'd need to use the `default` template (``) in which you'd get access to the full result set, which you can then sort before rendering. – Waldek Mastykarz Nov 25 '20 at 08:48
Thank you very much for your help, Waldek! Any chance you can share how I can manage sorting this collection before the rendering takes place? I have updated my initial question with my working example now, so you can easily see my scenario. – Frank-Ove Kristiansen Nov 27 '20 at 10:48
@WaldekMastykarz , do you have any examples on how to work with the default template in my custom template? Thanks. – Frank-Ove Kristiansen Dec 10 '20 at 20:28
1

@Frank-OveKristiansen, I haven't tried it, but perhaps something like this would work: - bind the `MemberPerson` to the `default` template (`template="default"`) - in the `MemberPerson` template, from `props.dataContext` you'd get the whole collection of data retrieved from Graph, sort it and then loop through it yourself to build the HTML to show – Waldek Mastykarz May 17 '21 at 14:36
@Frank-OveKristiansen Hi there, i've been playing around with this lately but i am struggling to deploy it without getting: Manifest not found for component id "78b11c7d-7ca8-47cb-a93c-d3beabb519a1" and version "2.0.0" Have you managed to deploy it? could you share your package.json? everything works nicely when i'm in debug and workbench - but i can't seem to make it deployed without the errors. – Ole Bergtun Aug 06 '21 at 09:44

Working example for Graph Toolkit using SharePoint spfx, React and Get component with template

1 Answers1

Linked