Microsoft 365 Community Community Demos, 16 Dec 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building a custom React based Microsoft Graph Group Viewer experience

Description

In this 5-minute developer-focused demo, Zach Roberts walks viewers through a web part with a single text field that enables search using Microsoft Graph for groups in your tenant and allows users to view the details of a selected group, view a list of group members and the option to export the list of members to a CSV file. Concise code walkthrough. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on December 16, 2021.

Demo Presenter: Zach Roberts | @ZachSPODev

Supporting materials:
• Sample Repo - Graph Group Viewer | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-groupviewer

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

All right so after every long demo, here we'll pop into the web part, if you look at it first um so simple web part, just a uh a text field here, start searching for your groups once you start typing in a name of a group, this will start to populate this list down. Here it's going to make a graph a microsoft graph call uh searching under the display name as you type. uh You can then select a group here from the list and down here. It's going to uh load this component in here.

A

uh There's a description on the group it'll display that here as well by clicking the view.

B

Can you a bit.

A

Soon, sorry for jumping in here as well, so just just yeah excellent, brilliant. Yes, that's easier! This way! Thank you so clicking the view members button will load the members of that group. um You can see here. There's an email address attached to that user. They'll show here as well. You can use the search bar here to just filter. That's a oops free search. They will put a test in their name, but you can filter them out. If you're looking for a larger group, you can filter that down there export to csv.

A

This is say using a react component. Csv link so spoil download a or export the list of all the users in the group to a csv document of the name and email address, attached, yeah export share of a user um and simply click on our group. You know it'll allow us to change the name here to the members.

A

You can see that the count of the members also updates, and also who is a part of that membership, so hop over into the uh code. Now take a look at how some of this kind of works here so we're on the the main view of the the web part right here.

A

So we have our that text field right here and the entering and on change event, we're going to take the the text value and pass it into our. uh The search groups function right down here and that's going to make this graph call right here. um So it's going to return the top five results. You know it could be some. uh You know improvements to this. Where you know you could have a in the properties panel. We could, you know, adjust how many results you want to turn.

A

um You know opportunity there and then we're going to take the results from this and set it to our state so we'll hop into so. The group list component also is pulled into here on this main page here upwards of that. So once the results are loaded, uh it's going to pass these props into the group list.

A

uh We have our we're using a pnp uh component here for the list view, so we set our our view up here. The view field going down here, we see our list view here and the views up there and our items are passing as the props.

A

uh We have the selection mode single, so I'll use select, select just one one at a time on selection, we're going to call this function here and getting or passing all the items and the details into this uh module here, or the model uh display name, description and id for the group and we're setting the selected group here with the selected group um when it's the state value is not null we're going to display this component or here uh so group details is that that component.

A

That shows uh right here, the group description or the name, um and so that will be right in.

B

A

And so we have the button on this component where, when on click it's going to, you know control showing that panel. uh You know just that the the state's, not not um you, know true or false there, and during that members list. We have another component here with some props that we're passing into uh with the group name and the group id so based on the group id that members list that loads in we will have um when this component loads when it mounts here.

A

uh So it's react component on mount, we're going to run the load members and so we're going to set our state to loading. So if you have a slow connection there, it's going to have a little uh loading bar there we're calling the the get members function passing in the selected group id and we're going to wait for that response here.

A

So it's going to uh do the tmp graph call get the group members by the id uh it's going to return that and then we're going to once we get that response back we're going to set our state into the values here, so that's kind of how it all flows together there and yeah. That's about it thanks. Everybody.

B

Awesome stuff zach. Thank you very much great demo and a really nice clean example for folks to check out there of using react to bind things up and give a nice display.