Microsoft 365 Community Microsoft Graph, 26 Jul 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Using Microsoft Graph Profile API in SPFx for awards web part experience

Description

In this 8-minute developer-focused demo, Luis Mañez’s web part displays awards courtesy of the recently released beta Microsoft Graph profile endpoint. Awards is an example of new information (skills, projects, languages…) you can attach to a user’s profile using Graph. Sample shows title, description, badge and link to more information about award. Luis uses Postman to add an award and uses the me endpoint to get list of awards. Future update - enabling users to add their own awards in UI. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 30, 2022.

Demo Presenter
• Luis Mañez (ClearPeople) | @luismanez

Supporting materials
• Documentation - profile resource type | https://docs.microsoft.com/graph/api/resources/profile?view=graph-rest-beta
• Sample - My Awards | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-profile-awards

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

Hi everyone in this demo, I'm gonna, show you an spfs web part that is listing the user profile and awards using the beta microsoft graph profile endpoint. So before starting just a super quick about miss light, and my name is luis maniev, I work as a chief architect at clear people where we're building a digital workspace platform, I'm a microsoft mvp in office development and you can find me in sofia, networks at louis monet, so feel free to pin me with any question or whatever you need.

A

Okay um before starting with the web part, and let me introduce you the beta profile endpoint in in graph api, because actually I was happily surprised with all the new information that we can now attach to the user profile in graph. So here's the list, as you can see, you can have things like skills projects, positions, languages, addresses and awards, of course, and so even more. And if that sounds familiar to you, it's because you have a linkedin profile and yeah.

A

You can imagine that now you can have that information in in your organization using using graph regarding the hours, and you can do the usual grad operations and everything is well documented in in the beta endpoint.

A

And if you want to do um a list of of awards, you have the endpoint behind beta, mean profile, awards or beta, slash users, slash user id profile awards.

A

And if you do a get request and you're gonna get the different, the different awards attached to the user profile and obviously you need to grab the proper permissions as you can see in the in the table.

A

Also, if you want to create a new award and you can do a post request in the profile awards and send in the body with the different properties, so you have the display name. Description is update the authority that is issuing the the award thumbnail external web url and even some other properties that you can see in the in the table where I just mentioned them and most important in my opinion, and also again, to create a new award. You're gonna need to run permissions as well as you can see in the in the table.

A

Okay, so um let's see the website in action.

A

Into this, as you can see here- and I have my web part running locally, so I've created a new, a new page, another the my awards web bar. So you can see here the list of the different awards, I've already configured using graph and for each award, and we have the title description.

A

The batch and the authority, the date and also, if you click in in view details, it opens the external url, with more information about them and about the award and, as I said well in the in the next version, I plan to to have an editing functionality. So every user can add their own awards and manage their words. But in the meantime you need to call the graph api, and so I have um postman requests here to to add an award.

A

So if we do a post request to their profile awards and with this information, description display, name date- authority, thumbnail and web- and if the token is not expired, this is the request yeah. The award has been created with the with the information. Now you have an id in case. You want to select this specific award or delete it and so on and now, if we go back to the page and we reference, we are getting the information of the of the new of the new award okay.

A

So that's pretty much everything about the web part in action. So let me back to the slides.

A

And yeah: let's take a look to the more relevant parts in the in the source code so first and what I'm doing is just modeling the the award with the different properties, id name, description and family and so on.

A

Then I have created an award service class and this class is responsible to choreograph and bringing back all the awards of the of the user. In this case, I'm using the the me endpoint. So I'm getting my awards, I'm configuring, the the endpoint and the graph client factory as a as a property and in the constructor and I'm using independence, injection and and the service scope to get the graph client factory that is actually already registered by the spfx framework.

A

So I'm doing the service scope consume with the service of the graph factory and getting that graph client factory and then in the admirers method, I'm just using the factory to create a graph client and then calling the m awards endpoint graph to to get the awards sorting by issue date.

A

That class is being registered in the let's say, the dependency injection container in the in the services code and then in the web part itself in the uninit method. What I'm doing is creating a new service scope and when the service is copies on, I'm retrieving the award service object that was already registered in in the previous step and then that award service object is being passed as a property. In the my awards react component.

A

The myowars react component in the component. Demon is just using the award service to get my awards, and what is done is is updating the the estate of the component with the list of the of the awards and then in the render method, as you can imagine, and I'm just rendering a list of our components.

A

And finally, the word component is just rendering all the different award properties with the proper styling.

A

So that's pretty much everything about the the source code and, as usual, it's uh already available in the pmp webinar repository so feel free to.

A

Having me in call and back to you, patrick.

B

Awesome stuff, thank you for that great demo. There love to see that stuff with the use of the graph. There really interesting hope folks check that out.