Microsoft 365 Community Community Demos, 24 Sep 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Cascading managed metadata using Microsoft Graph and SharePoint Framework

Description

In this 13-minute Developer - focused demo, Anoop Tatti shows a web part that uses Microsoft Graph APIs to get and display data from Term store. The web part requires one developer supplied property – term set ID. Based on geographic location selected by user, drop down menus are populated with country and city terms and displays a map using PnP Maps control. The web part is available in the PnP Samples repository and supports 2-level cascading today. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on September 24, 2020.

Demo Presenter: Anoop Tatti (Content and Code) | @anooptells

Supporting materials:
• Document - Microsoft Graph APIs for Taxonomy | https://docs.microsoft.com/en-us/graph/api/resources/termstore-store?view=graph-rest-beta
• Repo - Cascading managed metadata using Graph API (beta) | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-graph-cascading-managed-metadata
• PnP SPFx Map control | https://pnp.github.io/sp-dev-fx-controls-react/controls/Map/
• Repo - React Functional Component web part with data fetch | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-functional-component-with-data-fetch
• Repo - Yammer Praise using aadTokenProvider | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-yammer-praise
• Post - Example of wrapper to ease usage of Graph calls in SPFx | https://www.techmikael.com/2018/09/example-of-wrapper-to-ease-usage-of.html

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Hello, everyone, so uh they say that uh you know it's, uh it's good to start a presentation with an interesting fact. So uh the interesting fact for today is uh today is world bollywood day. Yeah, that's right! Today's world bollywood day and now you might be wondering how is that relevant to the presentation that I'm doing so uh what happened was a couple of months back microsoft, graph apis for taxonomy were released and I did a little bollywood dance after that. So that's why that's why it's related anyway, that's uh by.

B

A

So uh in today's presentation, we'll be uh mainly focusing on that the microsoft graph apis for taxonomy a couple of years back, I wrote my first blog on on managed metadata. So that time I used json to get all the data from the term store and display it onto a page uh using some html uh fast forward. Two years we've got the graph apis now, which can talk to the term store and display the data right all right, boring slide.

A

So that's me: anu tati, I'm a sharepoint developer at content code and that's my blog on medium at uh under the username another, and my uh I'm on twitter as well with username, tells I tweet about sharepoint and then that's my github repo.

A

My username is.

A

So let's have a look at the demo first and then then look at the code. So what I've done here is I've gone to my dev tenant and I've opened the open the term store.

A

So here I've got a term group called as one company which is an imaginary company and in that company we've got a term set called as our locations, so this term set basically represents the locations of all the offices of this company, so we've got all the different countries at the top and then, if I expand one of the countries say, uk uh we've got london as manchester, london and manchester as the two cities uh where the offices are so.

A

If I go on to the page, uh which has the uh the web part for today's demonstration, so here I've got a web part and what what I do is I just edit, the web part and then set the the property, the only property which is the term set id as the id of the of this term set, which is our locations and and after that, what happens is uh they were part? uh Queries uh queries.

A

The term store gets all the countries uh which are the uh which are present in the term, store and displays them in this drop-down. And then, if I select a country, uh it goes ahead and queries the transfer again to get all the cities under the selected country. So in this case we get london and manchester, and then, if I select london, uh it goes ahead and shows the location uh in in a map of the uh you know of these selected city.

A

uh So they here we are using the uh the pnp spfx maps control uh to to display the map and uh regarding the uh the pointer uh or the exact location, the way we are displaying, that is by using the latitude and longitude that have been set and if I just quickly go back to the term store and then select london.

A

What we have done here is uh in the description uh so which is uh right over here. So in the description uh we've set, the latitude and longitude that we need to be displayed in the map.

A

So that's what the web part does now, let's have a look at the the code and how it's been done.

A

So all the web part is part of the pnp spfx dev samples repository, uh so you can uh find the code over there and uh what I've done here is I've just expanded the that particular web part uh and we'll go through it before going uh through this. I just want to thank you for the presentation uh tips. uh I've used hugo's ideas uh in in this presentation. So um what I've done here is I've highlighted the main component, which is the cascading managed metadata and that component, let's start with the render method of that.

A

What it does is. It renders the different controls so basically a drop down for the country drop down for city and then the map control and, finally, the uh message control. uh So if that's what we see uh you know at the top, we've got the country drop down uh the city drop down and then the then the maps and then, in that same uh same control, um we've got a method or a function to to get the countries.

A

um So just before going to that, I I want to mention that we are using react, functional components over here. uh There are a couple of nice samples in the pnp dev fx uh web parts, repository uh by bill, iyers and ramen, which, which can be looked at for the for the functional components, and I guess there are a couple of uh demo videos as well. On the same, so we are using functional components over here now coming back to this web part.

A

uh The first thing that we do on load is: we need to get all the countries, so those countries are um are the first level terms in the country uh in in the locations term set that we saw earlier. So that's why what we do is we hit the graph endpoint, which is term store. Slash, sets slash term set id slash children, so we would have gotten the term set id from the properties that we said so just to give you a a quick look at the uh terms.

A

Again, we've got the our locations and then all the the countries are under that and that's what we populate uh in the drop down on the left side.

A

Now, once we have all the countries populated uh what we do is um you know when, when a user selects a country, we then uh need to get the children uh or the child terms under that selected country. So again uh we hit the graph endpoint, uh which is now terms slash the term id and children that will go ahead and fetch all the first level children under that under that term.

A

So in this case uh you know we selected uk as the country and then the first level terms under uk, where london and manchester so that's what we get back from the api. And uh you know we we feel those details uh in the drop down and then what we do is once we when we get back the cities, uh uh we we also get the description of the term. So in this case for london we get the description as the uh the coordinates of the term.

A

So that's what gets stored in the drop down item as well. We will come to that in a minute.

A

So what happens is once the cities are populated uh and the user selects a city?

A

We then go ahead and call this function, which is on city change, and what what we do here is uh uh we get that particular city and then the the description uh which has the latitude and longitude gets stored as the key of the drop-down item, and so we get that key and then get the latitude and longitude from that key. um You know we just split it by semicolon and then that's what we use to do this bigger map.

A

So once we have the coordinates, we just set the state um with the required latitude and longitude, and the map control makes use of these uh latitude and longitude values uh to display the map so that that's the web part in a sense uh now.

A

uh uh The services that we are using here is uh uh mainly microsoft graph, uh so we've got a file here called mscraftds.es, and I would like to thank uh michael swenson uh for this for this code, so he has written a nice blog article on how we can use graph in spfx. I know there are a lot of options, but this is one of the options. So all I've done is just went to his blog and then literally copied that file and then put it in the services folder.

A

That file has got four methods to do all the crud operations.

A

So all we have to do is just pass in the required endpoint uh to one of these methods and then the rest is taken care and uh caching, so caching, as in is an important thing in in any web part or in any uh code uh that we write. uh So here we've got a file called mmd service for ts. So what we do here is uh we don't want to hit the term store again and again uh to get the data.

A

So that's why, whenever the web part tries to get these cities under the selected country? The first thing we do is uh use these session storage to uh to get the required cities, and if they are not present, then we hit the api, get the cities and then add them back again in the session storage, using the session storage, dot, set item method and then, finally, on the logging site, uh you know what what I've done is uh in the in the main component.

A

uh Use these console.org messages uh with to which we can pass some, uh this string format so percentage s stands for string percentage. O stands for an object, uh so what I tend to do is usually, uh though the first one will be the constant log source that uh you know with which we can easily see the logs. So if I just show you an example of how it looks in the browser, I open the uh the console and then, if I search for cascading mmd, I it just filters all the messages.

A

So in that way, it'll be easier to you know, look at the information and to see what's going on right, uh a couple of improvements that uh can be made to this web part. So at the moment the web part supports only two level cascading. So that's uh we select a country and then we select uh city. uh So maybe in the future we can add dynamic level cascading. So maybe in the web part property.

A

We just set how many levels of cascading or hierarchy we want, uh and then the part renders those many drop downs, dynamically and then the other thing is local custom properties. So what we saw uh earlier was to get the coordinates and either latitude and longitude.

A

We use the description of the term, uh so instead we can use the uh you know. The coordinates can be stored in the local or the custom properties uh of the term. uh Now I didn't find any method uh using the graph api to get these uh properties. So that's why we're using?

A

I was using this the description uh to store it store the coordinates, but in future you know if, if there is an end point to get the custom properties, then we'll be using that one or if there is one already, uh please raise that as an issue in the repository, and I look into resolving that uh and finally, these are all the resources that were used uh while developing this for part. Thank you very much.

B

Thank you fantastic demo and new. I really appreciate you putting that together very cool to see those.

B