Microsoft 365 Community Microsoft Graph, 8 Jun 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building Microsoft Teams user bulk membership update tool with SPFx and Microsoft Graph

Description

During this 13-minute developer-focused example, Nick Brown’s web part a.k.a. the Teams Membership Updater tool – enables Teams’ site owners to pull member updates from a selected CSV file. Upon load, the web part calls Microsoft Graph to pull the list of Teams you are a member/owner. The tool calls Graph batch functions to remove orphaned members and then to add new members. Membership updater uses SPFx Reusable controls and react-papaparse. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on May 20, 2021.

Demo Presenter: Nick Brown (Cardiff University) | @techienickb

Supporting materials:
• Sample - Teams Membership Updater | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-membership-updater
• Documentation - Combine multiple requests in one HTTP call using JSON batching | https://docs.microsoft.com/en-us/graph/json-batching

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

Hi everybody I'm nick from cardiff university, and I'm going to be talking to you today about the team's membership update. It's a web part that I created to update the membership of a team in teams at the moment, we're still in the early phases of rolling out actually being able to do this in a in the proper way, actually using school data. Sync and everything else. So a bit about me.

A

I've been, I may look very young, but I've been in the web development business now for I've got nearly 14 15 years so, um but I've only been doing sharepoint for the last three years since I joined cardiff university and we'll get into the demo straight away. So this was built out of a need for our staff to actually update the membership of their teams based on membership information from our student management system. We're still working on having this in a proper automated way.

A

But I figured I'd make this little web part, and it was my first web part that I ever made so I'm gonna get out of powerpoint and go right into the demo.

A

So it's a sharepoint web part that you can attach onto any web page uh when it first loads. It pulls down a list using the graph calls a list of teams that you are a member of, and it goes through that looking to see if you are an owner of that team and then shows you a list uh when you select a team, you just saw there checks the ownership again just to make sure and then it you move on to the next step, which is selecting a csv file.

A

This has been updated since the original version. My original vision wasn't using the file picker from the lovely guys. The lovely pnp react controls. So now you can pick from a onedrive location or from or you can upload a file individually. So I will select this file. What you'll then do is it will use a component called react per pass to just pass that csv file and produce json objects for each of the files which I can then plug into one of the standard fluent ui framework table modules.

A

So you can see here it gives me the various information from the csv file. We then have the option to choose the column that contains the email addresses. We actually store. Multiple email addresses in our system because we're university people tend to have separate email accounts, but we're only after the university one which matches their upn.

A

We've then got the option then to remove all from members. This is where it will go through the csv file and if you are not an owner- and you are not a use- a member of the in the csv file, it will remove you from the team uh by default turn this on. But people may want to have this off it's again, it's there for making sure that the team is always up to date and doesn't have people that shouldn't be there and when you hit update, I'm not going to do this now.

A

It'll, go through it'll, pull down the membership and update that there's an optional setting, if you edit the page and edit the control where you can actually specify a log list that the data can go into from somebody actually using the form and as it says there, it just needs a standard list, standard sharepoint list uh with a the title column, a multi-line um column, that's called blogs and one that's called errors, and that will just allow users to see what they've already done and, as I said there, it's best to put a filter, a default filter on that to me, so that people can only see what they see so um there's a couple of permissions that need to be assigned.

A

So when you first install this you'll need to go into the api access and just assign the permissions. That's the user read all! So you can get the basic user information of the current user.

A

The groups read write so that you can actually re update the group membership and the group read isn't necessary, but it's it's useful to have purely to get basic information back of the group which you don't get from the group member call and again this I've enabled this for teams, so you can deploy sync it to teams and have it in teams.

A

If you have a look on the entry for this part on the sharepoint framework site, you can actually see that there's a little animation actually being used in teams, so I'm going to head over to code now um so again, we've got the api. Permissions say that you do need the couple of little things that you will need around additional controls. Hopefully this is size.

A

Okay is you need the uh I'm using the spfx controls, react, controls and the property controls, and I'm also using the component called react, papas, which is a javascript uh component for csv parsing.

A

So in the main section I'm not doing much here apart from defining the log list and allowing users to select it again, I'm using um the react property controls, so you can actually select the list control and I'm just I've just put a description here. That's defined inside the strings file of what the log list needs to contain and then, if we actually have a look at the code itself, so there's not a huge amount.

A

That's going on here, I'm certain various bits of initial states say that initially it's going to be loading, the teams and we're going to head down to the first section, which should be the component, did mount section so on on the did mount call. What I'm doing is I'm using the batch function, so I'm creating a batch. That's basically going to go away. It's going to grab the me, so basically the information about the user themselves and it's going to get the teams that the user has joined again.

A

This is uh using I'm not using pnpjs. I've only recently found out about pmpjs and it's amazing compared to the inbuilt stuff so yeah, I'm calling the batch function and what I'm doing is waiting for that to come back.

A

If there's any errors in that, it will just put them into the logs uh entry as errors, so the users can see it that way, most of the time nine times out of ten it's because the permissions haven't been assigned or sharepoint has taken some time to actually assign the permissions and what I'm doing is just going through the graph, I'm just adding all of those then into the state so that we can render that and the rendering that's this drop down. That appears here.

A

So when you select something, then we scroll back up here again. This is one of my first ever sharepoint framework parts, so things are a bit all over the shop compared to my later ones. So when the drop down is changed, what we're doing then, is we're, calling the owners function in graph just to see just to get who the owners are and we're going through then and making sure that the user- that's selecting.

A

That's using this is actually an owner of that team. If you're, not an owner, you'll get an error saying you know. No, no, please! You can't update the membership of this team.

A

What the system also does, then is: it adds the owners to a separate list so that we can keep track of it because you don't want to be removing owners that don't necessarily exist in the csv file. It's especially true for classless in education environments, because you may not have the teacher assigned in the classes because they're, not a student, so that's going on here and what we then do is once you upload the csv file.

A

What I'm doing then, is I'm pulling the raw data back from the array buffers depending on whether that needs to be downloaded from the internet or read from the local file store. It runs in exactly the same way. Thank you very much to the react.

A

Controls on that side of things and what I'm doing then is I'm pulling out what the fields are, so the headers I'm putting them into a separate bit of state and then I'm going through the columns and just creating the objects that need to be created for the react, dataless control to actually render, and I'm just doing various bits and pieces with the map in there just to put into the right format, and I'm also just blanking out any initial settings that were there because you could be re-running this and then it's uh the actually running yeah, it's the actual run-in.

A

So the first thing we're going to be doing is loading the members. So I use an enum here just to say what the state of things are. So loading the members and what we're going to be doing is calling the graph api to find the members of that team. I've updated this since the initial release to add the ability to reiterate through if graph has paged the return that you initially get wasn't doing that initially and it was larger teams, larger classes that was actually causing an error.

A

So there's some log entries that go into here, just to say: what's going on, so the user gets some feedback of what's going on and yeah. What it will do is then go through the comparing the members with the csv file and looking to see if they exist in the csv file, or they are an owner of the team and then it will decide right. I need to delete these users or I need to add so.

A

The first bit I do is delete the unnecessary users if the user has chosen to orphan the members- and I'm doing this via again graph calls, but I'm doing this in a slightly different way in the fact that I'm using uh the graph batch functions and I'm using some I've made an interface called irequest.

A

uh That just takes any any element as the request item- and this is just building up graph- calls to delete the users. I've chosen the truncalizer 20, because I've found that that's the best one to use for graph.

A

All this looping here is doing is split in the people that need to be deleted into chunks of 20, so that when you call the graph you're not putting too many requests into the batch, and you can find the limits on the batch sizes in the the graph rest api information on docs.microsoft.com and then what we're doing once all that's come back and it's happy we go through and uh create who needs to be added and then we're going to actually do the call in so this is where the system will go away and start firing off.

A

The rest. Api calls to graph going. Please delete these and it will just keep looping through this until the batches are done of the deletes. Once the deletes are done or there's no deletes to do, it will move on to doing the add members.

A

um I do this in a separate function just for just so I can iteratively go through this and ref and it can just call itself basically so again same as I was doing with the delete functions, I'm creating the graph batches that need to be done. So this is where you actually do extra bits, because in graph you use the ref functions. You actually need the object id of the user, not the email address, so you actually have to do two calls.

A

You have to go away and call the graph to find the object id, and then you have to once you've done that you have to build another batch to call to send off to graph with the actual delete function so yeah and that's what we're doing down here. So we're just batching that all up I've got various debug bits of information in here just so.

A

It's logging that onto the console, if you ever wanted to see it- and it then just goes away and calls the graph with the ids that have come back from the initial batch batches, all that up again and fires, that off and again any errors or anything that's been done- is logged into a an array inside the web part so that it can go and the user can see what's going on and in theory, if you enable it can be logged into data into a separate list.

A

So even admins who deploy this can actually see what people are doing and what's actually happened and yeah. That's basically it here's the render function. So there's not a huge amount that goes on in here. It's using primarily the standard, fluid ui framework components um on. Obviously, the file picker component from the pnp react controls. So thank you very much.

B

Awesome stuff there. Thank you very much for that demo, nick great to see that really exciting, uh thorough demo and thorough bit of coding, so that'll be a great sample for folks to reference as well.