Microsoft 365 Community OneDrive, 26 Aug 2022

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: Using OneDrive File Picker v8 control in your solution

Description

In this 24-minute developer-focused demo, Patrick Rodgers shows Microsoft’s newest GA File Picker v8 "control" code that’s available to third party developers. Picker is an .aspx page hosted within a Microsoft service with which you interact via post messages and that appears in your app as an embedded iframe or popup displaying content from a SharePoint library or OneDrive. Sample code available in JavaScript, TypeScript, C#, React, with or without SDK. Step through commands, messages, authentication, and other capabilities in 3 code samples. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on July 28, 2022.

Demo Presenter
• Patrick Rodgers (Microsoft) | @mediocrebowler

Supporting materials
• Documentation – File picker | https://docs.microsoft.com/onedrive/developer/controls/file-pickers/
• Samples – OneDrive File Picker v8 Samples | aka.ms/OneDrive/samples/file-picking

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/m365/community

A

What I want to talk to you all about today is something I am really excited about, so this is something we've been working uh with the feature teams inside sharepoint engineering to do something uh pretty new. This is the first time I'm aware of the onedrive and sharepoint group doing something like this, so we have a new capability that is g8, and this is a file picker v8.

A

So this is the same file picker we use within the service itself, so we are now sharing our component or control code. However, you want to think about it with uh third-party developers, so you can use in your applications, whether in sharepoint framework, whether uh in a spa single page application, whether uh in a remote, uh you know sas application. You can use this new file picker in your application to open uh files documents from sharepoint or onedrive, so you could target either place and uh it's I'm really excited about it.

A

The team uh believed in kind of uh you, know the the scenarios we explained to them and the real big benefit of this is because it's part of the service. It cannot really be left behind and never updated. So, as we add new capabilities to the service, we will be adding new capabilities to this control, it'll kind of flow. That way, so this control may not ever necessarily be an exact one-to-one match.

A

There might be certain flags or capabilities that don't work for third parties, but overall, it's very capable and does a ton of great stuff for you and again should save you a whole lot of time and you might be familiar. There was an old version, seven, not old. It was you know the current one until just a few weeks ago uh for the 7.2 picker, that's the older version. uh They are completely different in how they work I'll, be honest with you. So migrating is just a new integration.

A

There isn't really a migration path between the two, but it's very much a better experience now and much more tied into the service, so this file picker. So let's talk about kind of how it is and what it works. So it is a page that lives in our service. It's an aspx page and you uh communicate with it through post messages, so messaging with it through a page.

A

So this is this: is the documentation here, uh so that link will take you to this documentation, I'm looking at here which walks through setting up an aed app and then talks about how it works. So there's a page for the file picker talks about setting up the post and message reports initiating the picker. Then we've got a bunch of sample code here in this article but as well.

A

We also have a bunch of sample code uh in github now for uh this picker, and so we have a bunch of samples and some of these I'm going to walk through here today, but should be a way to get. You started no matter the environment you're trying to build in so just javascript, typescript c-sharp, uh with or without an sdk. You want to do it in react. It works uh everywhere.

A

We've tried it so really encourage folks to check this out, and with that I do want to sort of uh start to talk about how this is all set up and works right. Let's look at some code, uh so I have a onedrive here. It's a very exciting onedrive. It's got some files in it. uh That's really neat some files and folders uh love that I also have I'm not gonna spend a bunch of time in azure active directory.

A

I have an app set up you've all seen this before, but I just want to touch on the permissions. Real quick is files.rewrite all and for sharepoint myfiles.read, and so I've got those permissions uh consented on this application so uh good stuff. This is my onedrive again just to sort of show you that and then we want to go ahead and sorry. uh So this is the javascript basic sample and I want to start with this because it has no dependencies uh other than uh msol and it has uh no tricky code to it.

A

So it's very much a straight just uh you can see it's all here in this html page. So it's it's very straightforward sample and I think it's a great place to start and kind of talk through how to interact with the picker and uh but you know, because some of the other samples kind of obfuscate or abstract away a little bit of this. But I think this is great way to sort of step through this. So uh we you can see here we're loading the unsolved browser.

A

We do have a little auth script here that just does some msol plumbing for us: nothing, fancy there but setting some client ids and redirect urls and the authority and stuff like that in this sample.

A

But so now the first thing of note here is this param section. Let me zoom in a little bit zoom in so hopefully that's okay for folks. Somebody in the chat tell me if it is not um so uh these params here are uh all documented in the documentation. So you don't think you have to memorize this. All of these things are explained in here, but I'll just broadly say uh you always say sdk 8.0, that's a fixed value right now that may change.

A

There might be an 8.1 or something like that, but right now fixed 8.0 and then you've got this entry node. That tells you where you want to start. This could be one drive or it could be sharepoint. It cannot be both. um So you pick one onedrive or sharepoint and uh files. This isn't strictly needed, but uh is being a little more explicit. You include this authentication node. uh It explains why in the documentation, but it tells the picker control itself that hey we're ready to give you tokens.

A

We have a way to give you tokens, um and then you have some messaging stuff here, so you want to set up the origin which in our case is just localhost 3000 and a channel id and that's the actual post messaging channel that will get set up to manage the uh communications between your application and the picker. I see a bunch of questions in the chat, I'm not going to be able to answer them right now. Let me get through a couple of this and we'll come back to those questions.

A

Okay, but I'm not ignoring them and then you've got in here some settings around types and sources. So we want to pick files and we want to pick one drive and we we also want to show our recent pivots. So that's something in the left-hand uh menu there. So then we've got just some javascript code. You all have seen javascript code, I believe before, but here is some now, so we've got a launch picker function and that launch picture picker function. Excuse me is just uh bound to this button.

A

You'll see the button here in a second, I believe: we've all seen buttons before and so we're just doing uh we're creating a window opening that window, uh the picker can be embedded in an iframe or it can be embedded or not really embedded but shown in a pop-up. It works either way and we have samples in that gallery or in that repository that show both approaches, but we need a window and because we're going to load this url, we get a token using umsol great we've all done gotten tokens.

A

We also create a query string. Now the query string for the file, picker and you'll see this in all of the various samples is a json stringification of these parameters. So this is how you configure and control the picker. So you're gonna load uh this window with the query string of the stringified parameters, and that is how the picker is gonna get initialized. It's gonna pull those params into it and do it some initial initialization work.

A

Excuse me there and then you're going to create a form and actually do a post to that url with the query string and everything- and this uh includes your access token- uh it includes uh the params and the query string and then you submit that form page will reload you're going to get your picker now we're going to set up some messaging so the way you do that and uh window.add event listener for messages, we're going to get some event source and uh doing just a little bit of checking there to make sure, because there could be other messages.

A

So we're making sure it's our message and then, if it is our message, what we want to do is make sure it's the right channel id and everything and then we're going to go ahead and get ourselves a port and we're going to add a listener to that port and then start up that port and then post a message back to the picker and tell it to activate.

A

And so that's going to go ahead and activate the picker and start it all up, and then the only other real piece of code to to have a look at is that message listener that we attach to that port. So you see we're adding a message listener to that port. This is that message listener. So this is all again in the documentation. Don't worry uh you know if it initially looks a little confusing, it should be all covered in the documentation as well.

A

You can always ask us questions in the issues list, but so you get a couple different kinds of messages back from the picker. You've got notification, type messages and so messages have a type, and the type of notification is just that. It's a notification, you could ignore it, you could log it. You could show it to the user. It's up to you, but there's notifications, you're also going to have command messages, so every command message.

A

You have to acknowledge it, and that is just posting a message back to the port with the type of acknowledge and the id that we just got. So we were essentially telling the picker hey. You sent us message number one. We got message number one we're gonna start working on that then we get some data uh from that message and we're gonna. Look at that command of that message, and so this is another string value, so a command there's several different commands.

A

You have to worry about, so I'm gonna skip authenticate for just one second, because it's easier to look first like one command is closed. That means, if uh they've clicked the cancel button in the pop-up window right. uh The next thing is pick. This means hey they've picked something in me and I'm giving you some information about that and uh you you know you could see us updating the inner html we'll show that in just one second, um I'm gonna run npm start in the background here and then uh as well.

A

We've got a default which is our unsupported command and then uh authenticate is inner se1. So the way the picker works is every time you go to hit a resource uh whatever that resource might be. For the picker. It's going to ask you for a token and that token uh may be one you already have, so emsa will just give that back to you and that's great.

A

It might be a new token for a different kind of resource, but then you get that token and you send it back to the picker and the picker itself allows you to manage these tokens. It doesn't do anything, it's not hidden away, and this at first might seem like. I wish the picker would just do this for me, but the real advantage here is: you can now do authentication how you want to do it, so you might already be doing authentication in your application.

A

uh You just plug it into the picker uh you might want to use. If you're in sharepoint framework, you might want to use the a d token provider. I'm sorry I forget the exact name for it and that would work great, there's a sample that shows that so you might not have to use msol. There might be other options for you to get these tokens and use these tokens.

A

But this allows you complete flexibility to control how these tokens are generated, how they're managed and then how you send them back to the picker is just through another post message command with the result. This is a result of the authenticate thing for all these results, you're going to include the original message id that started this chain, and that is the data block of it, which the result is a token uh and the actual token value is a token uh so we'll send that back to the picker- hey, that's great patrick.

A

Let's see this run cool cool cool, so uh we're gonna go to our great website here you can see there's a button here and if I hit that button, I'm gonna launch the picker, you saw a little um saw thing happen and whoa. I can pick files out of this one drive, so we see the one drive over here neat and now, if I whoop I've lost my picker. So if I look at the picker, I can now pick those files.

A

So if I pick this one- and you can see in this one, just real quick note- I can only pick one file at a time. That's a setting. I can control. If I hit cancel, that's that close command. I showed you before if I launch that picker again- and I pick one of these guys- let's look at what we get back.

A

We get back a great amount of data here, so this is our command is pick and if we go look uh back at our code and look at this is where we see our command was pic, and this is what we're doing so, we're just updating the inner html and we have to tell it uh tell the picker that we had a result of success that hey we got that picked thing, that's awesome and then, in this sample I've chosen to close that window. That's optional! You wouldn't have to do that.

A

For example, if you were running inside an iframe, you could not close it, you could just leave it open and let them pick files and stuff could happen. Lots of different scenarios. You can support through this control, but bouncing back to this page. uh I of course make the best user interfaces in the world, but you get an array of items, so this is sort of indicating you could have multiple items here, but I get a name of that document.

A

Document.X I get webdav urls web urls, I get its size, I get ids. I get a parent reference, so this is great, so you can now access this file through microsoft graph, which would be the best way to access files in onedrive and sharepoint is through the graph um so encourage you to to take that path, but as well, if you need to work or it's easier for your application to work in sharepoint, uh here's a set of sharepoint ids that will get you. uh You know to that thing.

A

You've got list item ids, web ids, site, ids the site, url, all the stuff. You might need as well as then, some of these kind of meta values of an embed, url list, url and so forth. So really neat stuff, um and- and that's uh you know, hey, that's super cool right, but what can we do with that like? How else can we use that? How might we use this information to build an application?

A

Well, the next thing I want to show you is I'm going to hop around just a tiny bit, because it's a two presenter day and I've got some time so we're going to kill this server and we're going to go back up to all our samples. Here. You can see all the samples these are just the ones from the github, and the next thing I want to do is look at uh this typescript script, script uh sdk sample and what this does is I'm gonna.

A

Also, oh, no, I'm gonna do code there and then I'm gonna do uh npm start there, while that's getting spun up. So this sample uh is using an html page uh and then it's using this bundle thing. So this is actually doing a little bit of web pack stuff, showing you how that might work and then doing it in typescript to show you. uh You know that step and as well. It uses this uh picker api sdk.

A

This is not published. This is a thing that is internal to the sample gallery right now. uh We are not sure if- or you know, who might produce an actual sdk for this picker we're in discussions for that right now, but we have two sample. Sdks I'll show you in just a second that you can use as examples to help build your applications so check that out uh when you have a chance, but this is just one way of doing it.

A

There's no requirement, as you saw in the first thing of using any sdk, you can use this absolutely just raw typescript raw javascript. Do it in react, lots of different ways to do this, so no sdk is required. This is simply showing you hey.

A

Here is a way to do it with an sdk, so we've got some stuff here. That's just plumbing. To set up our page here is again our parameters or our options that we're going to pass to the picker to initialize it you can see here. My selection mode is multiple and I have a max count of five. So what that now previously you saw, I could only pick one item now. I could pick multiple up to five. um I've got my other pivots here and again.

A

This is the stuff we talked about entry into one drive you can see. I didn't include the files uh node underneath it it's uh not necessary for for one drive um and then I've got uh the rest of this is all more or less the same, uh except this is just using the picker through that sdk, but that sdk just surfaces, the process that we've all seen before. So, let's go to our uh page again and oh, that's not right!

A

I'm gonna refresh this and remarkably, this sample looks a lot like our other sample, except now. I could pick multiple of these, so this is just sort of showing you and you can see here, got multiple results, so same sample visually, but different code. So just try to present different ways to do this.

A

That might help you if you happen, to want to approach it in a different way, and the last thing I want to show you is a typescript uh react sample, because a lot of folks are working in react, um and so I'm gonna do a code of this one.

A

Sorry, I'm closing some other windows, a code of that and then I'm gonna run npm start in this, and so in here uh we are using that uh same other sample sdk. But we're doing all this in react now, so we've got uh that's gonna get started and not work, so just one second, uh so we've got a let's get to like the app.tsx, so this was just created with create react app. So nothing uh too fancy in that regard. It's not like the the greatest bestest react app in the world.

A

It's just a boilerplate react app with just a little bit of stuff added into it, just to demonstrate uh what we're doing with the picker. So you can see here again this common theme of setting up our options. For the picker note a couple of things here uh now I've got some filters, I'm filtering on docx files. Right! That's neat: I could also still pick multiple of those that's cool, but I haven't set a max right, so I could pick a thousand.

A

uh I don't know what your application would do with that, but it's possible, but I could pick multiple I've got filters now, though, I think it's neat it's another capability. You can have there and again you see our entries being onedrive, I'm showing all this stuff in onedrive, just because I think it's a little clearer than hopping back between sharepoint and onedrive, but functionally it's exactly the same experience. You would set up the entry information and we have samples for that as well as documentation that covers that.

A

But so that's really. The only difference is setting up that entry information and then uh just this is some react stuff right. This is uh here's our on picked function, we're gonna, set results, uses use state. uh So I think this is probably fairly familiar to a lot of you um but encourage you uh to try it out and so uh so looking uh this is just you know some react stuff right, but here's our picker button. So, instead of just having a button now, we've got a react component. That's a button!

A

What's more exciting about that. So if we go look at our picker button, where's our picker button go to definition. Oh, so it's this thing right here. um So no, it's not where's our picker button boy! Oh boy, pick her pick a pick of record yeah. So here is uh the actual button right, but we have then inside this component.

A

This is a way to do it again, not necessarily the way to do it, lots of ways to do it, uh but uh the way I've done it here is: we've got some props that have a base, url a token uh generation function and uh the options right. That function is the same thing. We've seen a couple times before we're just getting tokens, uh then we've got some other use state stuff about setting the window and managing the picker, and so you can kind of see in here. We've got some use effect stuff happening.

A

So if we have a picker we're going to set up our notification and our logging and our error handlers and then as well we're going to run a quick uh async activate so that sdk thing has an activate uh method that takes a base, url those options and then uh we're just going to say on results.

A

You know, use those items so the way uh this picker is working in this sample is it's uh gonna await uh you to pick some stuff or close that window, and then it's gonna pass those results to our on results function and which is which is uh coming from uh the props. So we have the on results. uh Coming from the props and we've got use effect. uh This is setting up the content window uh so setting the picker picker you know using, and this uh sdk is built on the uh pnp js v3 timeline.

A

So you see the the idea of using behaviors here, and this was uh this sample was a little bit of an experiment for me. If the timeline was extensible to work, for you know, non-sharepoint and rest request stuff, and it was so great and then we've got our click thing and then we set our content window. We create a new window and open it and that's great, and then we show our stuff and why this sample is neat and we're going to go back to our trusty localhost 3000, hey our button's in the middle.

A

Now that's doing different cool we're going to click it we're going to get the same. Picker note a couple of things same picker, but we filtered just on docx. I could pick multiple of these things uh and then I can hit select. I can hit cancel that works. Oh whoops, hi. Okay, that's a little bit of a bug we'll deal with that later. uh Never never hit cancel when you really should hit select, so we're gonna hit, select and now what we're doing in the react sample specifically is showing uh some.

A

You know, because the next logical question right is hey. I've got a file reference through that picker data. You saw those json blobs cool. What can I do with it? So this react sample uh starts to answer that question. So you can see I've got the thumbnail previews here I could uh click this button. I could preview the file using the embed link. uh This is uh interesting. We have an online services, art and so here's just some great text. I wrote it's a really interesting story. We don't need to read it now.

A

I can also copy a link- let's put a link to that document in my clipboard, so I can go there. That's going to open it. Actually, in the word app, not just the embed kind of preview. I can download that file. That's going to do whatever your uh you know, configurat, your local configuration to do with the downloaded word file is mine is open it and I can also delete those files. uh It actually deletes those files. So I'm not going to click that because I you know, I've got two sample word docs in there.

A

I don't really need to delete one of them but how's that code work. So it's actually really simple. So uh we have this files list thing, and this is the react for it. That makes it all work. So it just takes these different things. You can do with files and uh sort of makes this little table of them here, and you can do a thumbnail with that item and so forth, uh but, interestingly like if we look at the copy link stuff, it's uh pretty simple code.

A

Once we've got the item, we can use the web url here and just we're writing that to the clipboard on that button click. So that's copying. A link right deleting is just hey: we're going to make a request to the graph so using drives that parent reference drive id items, item id and we're going to delete it. So uh you know nice and easy.

A

Once we have that item ref, it's super easy uh to to get going and then as well, we got download and then we've got preview uh and all of these you can check them out on how that works and then thumbnail. It just is a little more complicated because we've got to get the references and stuff and then actually set that thumbnail value, uh so making a request and then setting some stuff to show it so uh great stuff there.

A

So I'll just want to close and get stuff moved over to paulo by just encourage all of you to. uh Where did my docs go check out the new file picker? It is, I think, a really amazing capability and it's really amazing. The team worked with us to allow this to be available for third-party developers, so encourage you to check it out.

A

uh This is the first and what we are hopeful will be a number of uh controls along these lines and we've got some stuff, hopefully in the pipeline, that we can announce soon, but just wanted to say. Thank you all for the time.