Microsoft 365 Community Microsoft Graph, 23 May 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Manage data in OneDrive application folder within your SPFx solution with Microsoft Graph

Description

In this 12-minute developer-focused demo, Adam Wójcik questions – where are you storing user personal data generated by your SPFx app located within SharePoint and Teams? Options: Hidden SharePoint List, Dataverse, user profile property? See how to manage data stored in a json file in the application’s personal folder on the user’s OneDrive. Three Microsoft Graph endpoints are used in this solution. Graph conveniently creates the data file on your OneDrive for you. Step through the web part code. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on May 5, 2022.

Demo Presenter
• Adam Wójcik (Hitachi) | @Adam25858782

Supporting materials
• Sample - Save to User Application Personal Folder in OneDrive | https://adoption.microsoft.com/sample-solution-gallery/pnp-sp-dev-spfx-web-parts-react-save-to-onedrive-app-personal-folder
• Article - Save data to app personal folder | https://pnp.github.io/blog/post/save-data-to-app-personal-folder/

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/m365pnp

A

Hi, my name is adam. I'm new here yeah, basically, first time demoing, so I hope you uh you will enjoy it as much as I can. I, like coding and coffee and mime located in poland, not much more to say. If you would like to contact me, you can do it by thinking or twitter and anyway, if you are like using some of my open source- and you have this idea- hey, maybe I will buy this guy, a coffee, don't do it yeah. I work for free, at least in open source.

A

I work for free, but in the current situation, maybe you can consider helping the the ones in need and I there's a link for the verified support, how you can do it. It's not always charity, but also other stuff and you're interested. And anyway, let's go back to the topic, so I will be presenting a subject how we can save, let's say personalized data. Let's say we have a really cool application. We developed and, of course, in this spfx application.

A

We have some user personal data, some user settings- that we want our app to be personalized and consistent. Let's say our application is in teams and in sharepoint and when we want to whatever we set, and this spfx web part in sharepoint, to see it also in teams and it's personalized for uh for the current user. So of course we should save this kind of data, but maybe where- and uh maybe you had already had this problem and considered it?

A

Okay, we could consider data first, maybe it's more connected to the power platform and power apps and, to be honest, I didn't even I didn't develop a solution where I have an spfx webpart and I connect to the dataverse.

A

But okay, it is some points to keep the data for sure and and this m365 work we can consider other thing I saw in the future and also created a couple of times this solution that we we have some hidden sharepoint list on some sharepoint site, and then we keep each user's data in columns and, of course, there's many things. We need to consider here how we provision this uh this sharepoint list. Maybe it can be provisioned by a separate script or with our spfx package or the web part. Could each time check?

A

Oh, if there is present, if it's not it, creates it and, of course we have to consider permission management here at at least the user who's the author of his role, he or he or she should be able to only uh edit this data, his or she's data right. So there are a lot of things. We need to consider other thing where we can save user personal data is the user profile service. We can create a custom custom property and we could keep those user settings as a custom properties to me seems this.

A

This could seem a quite old-school approach, maybe from the sharepoint on-prem uh versions, but okay. This is also something we can do. I'm not really sure if we can script this in sharepoint online and of course we can consider saving uh data in a user onedrive. I think this is a really sweet place for user personal data. I mean the users he's or she's onedrive is the place where uh the user stores their personal data and, of course, okay.

A

We can say okay, but in onedrive I store mainly files, and uh here we should consider something like a structural object like a table with some settings. Well, we can consider xml or better.json right and there is a a graph endpoint that supports all that. So there's not much work. We actually need to do. We need to only like remember one or okay, two okay, most of the times three three end points uh gets and put how to save the data and how will actually present this now.

A

So uh I hope you you weren't bored with the slides, not much here. So this is my user test user onedrive to this user is me- and I have nothing special here, but okay using the graph explorer, let's see what what will happen. If I just do a simple get request to this special me drive, uproot uh endpoint, okay, we'll see it's uh ended with a success and it was translated to this kind of url, which goes directly to my drive to a special apps folder.

A

I didn't have it yet before, and here I see a graph explorer folder created okay, so let's go back and okay. It actually happened a few few seconds ago, the graph for me created a new apps folder in the user's onedrive. This is a special uproot catalog, where each app, which is using this endpoint, will create their own folder for their own files, metadata whatever and in this graph explorer. I was using graph explorer, so I I have a graph explorer for the created for me automatically.

A

I don't need to provision it and think about anything else and currently it's empty. So, let's see how we can add anything here. We can do it with a simple put request and I will save it as a test data json file. Putting this as my content and okay. If I refresh, I see that okay, this file was created, and this is my json file. So this is all well and good.

A

If we have a simple solution that we want to save the data, how we would now, let's say we want to retrieve the data for sure. So we can just query this uh single file, this physical json file from the special uproot folder. We don't need to go to any sub catalogs. It will already be translated to the graph explorer folder in the uproot, and then we need actually to do an additional step which I will show in the end sample solution.

A

We as a response. We get the download url which will actually, if we open it, it will download our file. So in our web part we can actually do the same and parse the json back to our typescript object. So it seems pretty straightforward and pretty easy, even comparing case to provisioning sharepoint list with columns. Let's say in future: we want, we want to add additional metadata for the user personal settings, so we need to extend it with additional columns and stuff like that.

A

Here we have a json which is really flexible and we just with a couple of uh two requests: we save it and get it yeah from from the place we want and okay. So maybe you could ask okay nice that he showed it, but these are only requests now. I need to develop it. What there's a sample in the sample solution gallery? If you type save, there's the save to user application person folder, maybe could be a better name, and this is actually a sample solution.

A

uh I developed really easy one just to keep you up and started and er this all layer of uh saving and getting data is kept in a separate, uh spfx component, a library. So actually here in this uh spfx solution, we have a library in a web part weapons really easy one. I will show it in a while.

A

It's just one one, one client with two buttons to save and get the data, and this we could actually delete and create our own cool application and just leverage the the things done in the library to to manipulate with the with the data we want to save and since hugo added, even a dev container. Here, it's just really easy to try it out.

A

uh Let me see so we can just have it running. We can just pull it and just have it running in the dev container uh already and let's okay, let's maybe see how it works first, before I jump into the code, so I already have it. I have the gulp serve running, and uh this is my workbench. So, let's just add this web part, it's called clients underneath it uses this.

A

um This spfx library I created and, let's just add, a pnp demo whatever, so uh I have a small json with one property data which I saved to the pmp demo value. Okay, so let's see what happened in the apps folder, I have a new folder which will be shared between all sharepoint uh spfx solutions, extensions, so extensions webparts whatever- and this is really important.

A

So if we have an extension and then a web part and another web part and all of those are using this graph api to save our data, we'll all go to the same location. Those solutions will go to the same location. So it's a. I think it's a good practice to have a separate subfolder. Here's fdata uh for our for this uh specific web part we're using now so in this sharepoint online extensibility folder that was created automatically I create in the in the library.

A

I create a subfolder where I keep this json file just just in case. I would, in the future, have a different solution which would also save the json file with the same name and okay. We see we have this uh small json saved. We can also use the get button to uh to get our data and, of course, we can just update it and save, and then it's safety no magic here.

A

So, let's see in the code how it actually works, it gets updated. So, as I said, it's a pretty straightforward. We have only two components and library and a web part we just type gup surf on the web part which will start our workbench. One thing really important, also to remember that the live. It is a graph api endpoint, so it's defined in the web uppy permissions needed for it is defined in the lab library component.

A

So if you are planning to use this sample or do a similar one based on this one, uh please do remember that after you, you use it. You need to go that you need to go to the sharepoint admin portal and and click on the consent, admin consent for those permissions to make it working. Okay and then okay. This is the client. uh uh So this is the part of the of the web part.

A

Okay, actually, and as you can see it's pretty straight forward, I have some really like simple ui logic with two buttons, and so here it. Of course there could be some really cool solution and we have two really small functionalities, get and save and, as you can see, it's pretty straightforward to get the data retrieve it as a json or save it where we pass any kind of uh typescript object. We want to serialize to the json. The typescript object I created is update.

A

That's really easy, as I said, has one property which can be anything in our case. It's a string, and then uh this is the whole abstracted layer uh which you could use. If you want and sample, which is the library itself, it's uh we could think it's quite complex, but, as you can see, there's not many code here like 100 lines and there are some predefined settings at the top. So what is the json name?

A

uh We will have and the sub catalog we will be creating and we have two public methods we can use in our web parts uh when we reference this library. One is a get data which basically checks if default. If the sub catalog and this automatically created a catalog by graph is created, if not, it creates the sub catalog.

A

For us, it retrieves from the subcatalog.json file gets the download, link and downloads it and then parse it to parse the json to our object and the save just does pretty much the same, but the other way around to get gets. There gets the object and parse it as a stream, and then we put it uh directly to the sub catalog data. So, first we query query by the id and we save the content uh to the sub catalog and pretty much uh that's it.

A

I hope you liked my demo, and uh this is the first time if I was burning you and fell asleep or you're like me and you're more a reader person, it's always easier to copy copy paste from code or blog post, not from movie. So I also created a blog post on the company on the new github community blog. So I guess it's quite easy to find it, and basically I try to explain the same concept. I I demoed here so thanks for watching and that's all.

A

Thank you. Awesome stuff, adam uh really excited to see that demo.