Microsoft 365 Community Microsoft Graph, 10 Sep 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building a Microsoft Graph People Search web part

Description

And why do we need a people search web part? Save time, deliver relevant information. In this 17-minute Developer - focused demo, Yannick Reekmans demonstrates how this web part allows you to limit or filter profiles from AAD. The Microsoft Graph-based web part shows Person Cards from Office UI Fabric React/Fluent UI library and shows Live Person Cards on hover. Configure query and search parameters, styling options, template options as well as Microsoft Graph query code for debugging. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on September 10, 2020.

Demo Presenter: Yannick Reekmans (Qubix) | @YannickReekmans

Supporting materials:
• Article - SPFx People Search web part based on Microsoft Graph | https://blog.yannickreekmans.be/spfx-people-search-web-part-based-on-microsoft-graph/
• Repo - Microsoft Graph People Search Web Part | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-msgraph-peoplesearch
• Article - PnP Modern Search solution | https://microsoft-search.github.io/pnp-modern-search/
• Repo - Microsoft Graph People Search Web Part | https://github.com/YannickRe/spfx-msgraph-peoplesearch

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

My demo is about my web part that I created about building a microsoft graph, people search web part. So we'll start first with the. Why of this web part? Basically, uh how every web part starts or everything that you build? It's because you have a need and there's nothing else in the community that solves it.

A

So you start building it yourself and, first of all, um what I normally use to show user profiles or who is who, on an intranet on the sharepoint internet, were the pnp modern search web parts that showed all of the profiles in a nice way. Looking similar to the people web part, that's out of the box available in sharepoint.

A

The problem is that the pmp modern search is based on sharepoint user profiles and with this, in this specific case, the user profiles had incorrect and incomplete data.

A

Basically, when you have a user account in azure active directory and that user logs into sharepoint, it gets a user profile created, but then afterwards, if you disable that account or you tweak something and you do not remove the account from azure active directory, the user profile still exists and that's a problem in environments where they like to keep their disabled accounts around for a certain amount of time.

A

So, as a result, their user profiles in sharepoint still contain those profiles and they get shown on the who and that's probably not what you want to do.

A

You could try and filter it with custom properties, but then again, not all properties from azure active directory are synchronized into azure active directory.

A

So I went looking out for a way to show the users from microsoft graph graph provides the ability to filter and limit the search query just to those user profiles that you want to show now. My requirements for this web part were that it has to show the person card or the people card from office. Ui fabric react now fluent ui library.

A

It has to render the whole list of users on page load. It has to be configurable in the search query, so I can say give me only the enabled accounts or only those from a specific department.

A

I wanted to allow additional free text search, so you could provide a set of 100 user profiles and let people search again in there to limit the result set, preferably it showed the live person card on hover. So I introduced that as well, and it should be based on microsoft. Graph like I said, because that one allows me to achieve everything that I want now looking at the web part itself. This is how it ended up.

A

So on the page. It shows you a certain amount of user profiles that are fetched through a query, and it also shows you the results or the number of results, and I recently added back a nation support as well, so on first load. It shows you the first set of user profiles from the query that you configured and then it's possible to page through all of the pages that are returned from microsoft graph.

A

So if we go to the next page, you will see a small loader like this, but if you then return back to a previous screen, it goes very fast because it keeps the previous result sets in memory. Only when you move to an additional page, it will refetch or do a query again to microsoft. Graph now, for those people that are paying attention, you'll see that there is a small bug in here that I saw when preparing this demo. It's as soon as you move to a second page or a third page.

A

This undefined results shows up something that I reported to the graph team and we're discussing whether it's my mistake or their mistake, so we'll see um how that ends up and then about the live person card or persona card. It's basically the feature where you hover over a user account and it pops out the out of the box, experience or profile card. You can also click on it and then it will open up the bigger, um like the bigger persona card. Just a reminder here that this is a a component.

A

That's made available or well that's in sharepoint online and we're not supposed to use it in our custom development. So just so you know, I included it because it was a client uh request, but if you're not comfortable with using this in your own solutions or when you use this web part, I've also got a toggle to um to turn it off. Now, if you look at the features when we go edit, this web part, you see that I put everything into four categories.

A

First of all, there is this query: settings that allow you to provide the select parameter, the filter, parameter and the order by parameter values like you would do on any graph query.

A

So if you see that we limit, for example, the select parameter value, you will see that this gets updated and some of the well, if my internet wants so some of the properties, I did not fetch at the moment so that it doesn't get rendered now.

A

So if you update the select query to all of the necessary properties, you will see that they get filled in again now you can also filter on rather simple filters like this one and it just filters on job title this time, it's id and now it's on a teacher and then it returns 10 values. You can also do more complex queries as long as they're, supported by microsoft graph.

A

So you could do department equals hr or department equals finance for any account. That's enabled it doesn't return any results now, but you get the the point here and then there's also the order by parameter value. Now this one uses the user endpoint of microsoft graph and it only supports uh sorting or order by on display name or user profile name just so you know, even though you can fill in whatever you want.

A

If you put in another property it just returns, ordering is not allowed on this property and you can limit the number of items per page as well.

A

Now, looking at the search parameter option, this one is recently introduced at microsoft, graph at the beta endpoint and it allows you to do a full text search on the display name.

A

um There are four options: there is none and as the ability to do a static filtering where you say, let's get all alex's um in here, then it's just filtered like that. um You could question why you would do that. You probably will want to put that in the filter parameter in inside the query part, but you can also have a built-in search box. So if you have the search box, you can do the filtering in here as well. um I'm not sure, let's see if there's a shelly, no so um so.

A

This is the uh the result in here. So you can get a search box like a dell and then you filter here as well. You can clear the search query and it returns again and then the last one that's available is dynamic data, so you can connect any other source. This time I only have the page environment on my page to provide dynamic inputs into this uh web part.

A

In terms of styling there's the ability to turn on or off the so let's say you only want to show the first nine results uh turn off pagination and you cannot go to the next page.

A

The ability to show or hide results count as long as this bug is here, you probably want to turn it off, enable the show live, persona card, yes or no, and then there's the ability to debug the results that you get from microsoft graph. So if you switch to the debug mode, you can see everything. That's returned and work with this now. The last one is the templating options.

A

It's it allows you to tweak the size of uh the persona cards and also manage the persona fields. So this persona card has a field for user principle, name and four lines of text that you can fill in and you just enter the property name that returns from microsoft graph and it will be rendered in these four lines on the page in terms of improvements, the one thing that it doesn't do yet because I haven't that time is fetching the user profile pictures.

A

So it's on my to-do list for somewhere in the future, now switching over to how I did this um or how I built this, I'm not going to show the code in visual studio code. I have a tendency to click around too much and make it uh very difficult to follow along. So I just highlighted some of the code. Snippets that are very interesting- or I believe interesting is the first one is that I put everything from search in a search service.

A

So all my services are separate and one of the actions in my search service is to execute the actual search, and this is where I return a page collection of all microsoft graph users. So, first of all, I get a client from the microsoft graph client factory. This is built in into the context of your web part and there you can get the client factory and get the client, and then you can build your own query.

A

So the first action is to tell the graph client which endpoint you want to use. So in this I want to use slash users, because all of my users are located in there and which version of the graph you want to use and I'm doing beta endpoint, because this paging and search parameter is only available in the data endpoint.

A

At the moment, then I say that the tester returned the count and how much items it has to return at the first request, and then this is one thing that I struggled with, because the documentation isn't so clear for this. But basically, if you want to use search or do some advanced order by mechanisms or to account, you have to provide an additional header of consistency level, eventual it's somewhere in the back end, a way that they fetch or prefetch their data.

A

And it might be that if you use this and search that it doesn't always include or return all of the results that are available in your user profile or your user's endpoint normally. And then I just apply additional queries. If there is a select parameter, I provided if there is a filter option provided in the web.properties. I add it to the result. Query and the same goes for the order by parameter.

A

The special one is the search parameter because of the fact that, what's built in in types and in functionality in the sharepoint framework, isn't the beta code of microsoft graph. So you have to provide the query itself and say which parameter that you want to uh provide a value for, and in this case I provide my search parameter for display name, and then I execute the request.

A

The second one it's for the fetch paging, because I want to fetch the next page and the next page is returned in your first result as a complete url. So it's a complete url, the same one that I used before with the count and the top 10 and a skip token to skip the first set of results and get the next one and there. The thing is that you can inject this whole url in the api method.

A

So you do graph graphclient.api you put in the whole url and you still have to provide the dot header consistency. Eventual because of the fact that you still want to return the accounts and the search and everything that you provided in here as well- and this is where we have a discussion with the graph team, because if you do this on the paging it doesn't, even though it contains account, is true and it works. On the first request. It doesn't work on the page request.

A

It doesn't return the count value at the moment and then there is the the container itself that renders a page the difficulty there was to keep all of the results in memory. So, first of all, I'm keeping a state of all my results, which is a an array of all the pages collection with the user values in there.

A

Whether or not we're loading uh stuff error messages, if it has an error and the current page that's being loaded. The page collection is a generic interface, so you can provide any graph object and it provides a value with an array of users. In this case, the next link, the previous link account and some dynamic properties. If you'd like now, that's important to understand because of this code, which is quite complex, um if we fetch the people results, we do it for a specific page and we check if it's a full reset or not.

A

We need to do a reset when we change the webwork properties.

A

So, first of all, first section quite simple: if pages one and it's a reset reload, the information also do execute this part when there are no results in the state when the state first results are empty or when there's nothing in the value, just fetch it again, we put it on loading and then we fetch the first request.

A

Every result that that's returned is an um a page collection of microsoft graph and we put it in the results property of the state and we put the page at one now. If we move to the second page, we check here. If we have fetched um already that page or not, so we check results. Length is one. The page we're requesting is two minus one, so it's one equals one. So we check.

A

Does there? Is there a next page? If there is a next page, we load again and we provide the net, we fetch the next link from the last uh result from the state. We execute the search results for the fetch page. We get data and we merge the existing data with the new one. That's returned now. If we already had page 2 requested, it would mean that our length would be 2. Our page will be 2 minus 1, it's not equal, so we skip this one.

A

We are not fetching it again and we just update the page to being 2..

A

That's interesting, because when we do the render that's one in here, we can just use the page in the state to fetch the correct page collection from the state, put it in an items property and use that one to render all of the results.

A

This allows me to keep everything in memory, go forward and backwards between all of the results, because the microsoft graph does not return this previous link. It only has next links as soon as you're in page 2. You cannot go back by requesting it from graph again. You have to keep it a memory, and that brings me to the end. I just want to show the resources.

A

So I blogged about this. On my blog, the code is on the github. My github is the most recently um up to date, because I've been tweaking it this week, there's an older, slightly older version in the samples github repository.

A

uh I'm sure that hugo will uh keep it up to date somewhere in the future and then there's a microsoft graph documentation in the beta endpoint that describes all of this uh consistency level, uh eventual stuff all right. Thank you very much great ionic, fantastic demo excited to see that really good stuff.