Microsoft 365 Community Community Demos, 1 Sep 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Using OneDrive Apps folder to save user's preferences cross-device

Description

In this 10-minute developer-focused demo, Giuliano De Luca delivers an SPFx web part used for saving user settings or preferences (i.e., dark/light theme, temporary secrets, etc.) in the OneDrive Apps folder. The web part calls Microsoft Graph API. Preference changes made in any of the user’s devices are reflected across the user’s other devices. Thorough code walk-through. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on August 12, 2021.

Demo Presenter: Giuliano De Luca | @DeLucaGiulian

Supporting materials:
• YouTube Channel - Giuliano De Luca | https://www.youtube.com/giulianodeluca
• Blog - Giuliano De Luca | https://delucagiuliano.com/

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

So, first of all I have to apologize for my voice. I have the flu but I'll go forward. My name is giuliano de luca. I am an independent technical architect. Here you can find all references if you want to reach me out, feel free. There is also my youtube channel where you can find 128 videos. Now I started one year ago: okay, let's move now with the with the solution.

A

So what I want to demonstrate today is how you can save user settings or preferences in in one drive. There is a special folder in onedrive called apps, where you can store data, so this is a very common scenario when you, when you deal, for example, with the with the favorite them, so you want to make available the dark and light. Then functionality on your application, or maybe you want to just store temporary secrets or any other user preferences.

A

So this is a very nice approach. uh What I'm going to demo here is a sharepoint framework solution. It's a web part but, of course, using microsoft, graph api. You can use um any other kind of web application that you can integrate in microsoft presence 365 now, as I said, I'm going to to save user settings in this special folder called apps in onedrive.

A

How we can do that there is an endpoint in the microsoft graph api that you can consume, and this is an example, so you can put here uproot. So you are referencing the the folder apps. Then it's a good practice uh define your folder in this in this folder. So it's more easy to find your your data and then I, what I'm going to do is create a json file with all my attributes and properties when you load your application.

A

First of all, you have to load your data, so you have to query the json file store it in in one drive, and you can use this endpoint in order to to get the download url.

A

Why we have to do that because, basically, it's a different domain and in order to avoid cars issues you have to you have to have, and you have to use and fetch another url. In fact, when you, when you get this download url, we can see in the next slide, you get something like that. So you have this this url and and then you have a temporary authentication. So this is a token a valid token and that you can use to download your your content.

A

In my case, um what I'm going to show you is um I'm going to save three properties and the them the favorite tam of my of the application, then a token and finally preference, one okay, let's jump now on the demo. I have here my browser instance and what I have here. This is my personal space on onedrive. I'm going to now delete this folder just to show you how how it works, I'm going to click on the three dots and then delete.

A

Now, I'm going to microsoft teams, I'm going to refresh the page.

A

Okay, let's say you know and.

A

So I pinned the this sharepoint firmware solution here in the left pane uh as a personal app, it's called a cross device user data, and here we go. This is my my application and I have already some preferences, so I I'm going to delete again this folder, because previously I was not properly logged. In now this folder is removed. I can jump, for example, in teams and then open again this up and now I have this this form. This is very easy. I have just three properties here.

A

As I said, I am I'm able to to set my forward tam of this up. I can just add a value here on this field and then another one. This would be spfx.

A

Let me open the dev toolbar, so we can see on the backstage the call and then I'm going to click on save current user. So this is the call and let me jump on the headers.

A

We can see that this is the payload of the request. I I passed these properties, which represents exactly uh what I saved here now going on the on one drive and refreshing the page. I have this new folder just created, as I said before, it's a good practice to create another folder. Now I am using the sharepoint framework. So then this is the principal sharepoint online client, extensibility web application principle, and here we go.

A

This is my my folder that I just created and then I have my file settings json, so we have seen in the demo before that show has used exactly. I have seen in the code um some minutes ago that zhao has used exactly this kind of approach to keep track of of notification.

A

So, as a as we can see here, I have the the the temp that I set the token and the preference one.

A

Now I'm going to open this tool, which is very cool, it's called the let's view and it's very fantastic when you want to mirror your device, I'm going now to open the same application, the same personal app on my android device. Here I have cross device user data, I'm going to open the same application and as we can see, we have exactly the same app that show up with the properties that I saved before. So I can, of course, change value here.

A

Let me add additional number or let me type sharepoint and then save current user data.

A

If I jump back here on one drive and if I refresh the page normally the change happens in real time, but it's always good to refresh the page, and now we can see that the new values that I added in the on my android device.

A

Okay, let's jump to the code because I see that we don't have a lot of time. So um all we need to do here is just to define the the permission. The microsoft graph permission required. Are files read right, so this is what we have to specify in the package solution.

A

Then let me jump in the core of the solution. I am here in the function component and so what I have here, I have a bunch of user states, and so here I have a function, get user data, and this is exactly the end point that I consume in order to get the download url. Once I have the download url, I can fetch this url in order to get the and so then, at the end I have the 10 the token and the preference one, and I can display this data in the form.

A

When I have to save this data, I have to execute.

A

I use it here: the microsoft graph, client factory, the merger graph client, which is included in the base library of sharepoint framework, and there is this endpoint that you can use by specifying content at the end and then in the put method you have just to specify your your jazz once you have done that you are able to to save your um json file in your onedrive.

A

So I would say this is a very nice approach um to to save user settings, but also um so I think it's a very drawers use that a very clever approach in order to keep track of notification about users.

A

So this is all I have to you for you today. I hope you enjoyed thank you for giving the chance to demonstrate this sample and so back to you guys, awesome. Thank you very much.