Microsoft 365 Community OneDrive, 22 Oct 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: NodeJs File Handler for integrating custom file types in SharePoint and OneDrive

Description

In this 12-minute Developer - focused demo, Patrick Rodgers invites you to use your existing client-side development skills to make SharePoint and OneDrive handle your custom file types as if they were first-class citizens! Display file actions, add the ability to create, open, edit, preview, and save your custom files from within a browser. The sample code – complete with CodeTours – shows how to use the Microsoft Graph API to handle secure file access, manage metadata, handle permissions and sharing. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on October 22, 2020.

Demo Presenter: Patrick Rodgers (Microsoft) | @mediocrebowler

Supporting materials:
• Repo - Contoso: Markdown FileHandler | https://github.com/pnp/contoso/tree/main/filehandler
• Documentation - Adding custom preview, open, and actions to files with File Handlers 2.0 | https://docs.microsoft.com/en-us/onedrive/developer/file-handlers/

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 this demo is all about something called file handlers and this isn't strictly a sharepoint framework or a client-side development thing, but I think it's an interesting example of how you could take your client-side development skills and extend them into solving other problems. So what we have is a project that is a file handler and you might say to yourself patrick what is a file handler. That is a great question. A file handler is a piece of functionality that allows you to integrate tightly into the sharepoint or onedrive ui and handle custom file types.

A

So I'll just show you this real quick. So I've got a neat document library here with a bunch of markdown files, and I can actually go in here and open and I've got these uh custom file handlers here. We're going to click this one and there's two of them there, because I have a poor, dev environment hygiene, but you can see. We've now ended up on localhost and we're editing my file.

A

So this is file has content and I can do markdown, and here is some stuff and my preview updates and what this file handle lets us do. uh We've got our our down here and you might say: well, I've seen a markdown editor before, but if we hit save we're actually going to save and close just to get that cleaned up, we get little ui updates and that's going to end up going in a big circle and close our window.

A

But we get our file updated back here in the website and you say well, markdown is not perhaps the most exciting example, but it is a great example to show that this could be any proprietary file type. So you might have a custom image format, a custom mapping format.

A

Some type of uh you know I don't know autocad rendering format, something like that that we natively don't support in the service, but you would like to provide some functionality so file handlers. Give you an excellent hook to do that and they give you a hook in uh three main ways. You can actually uh create a new file.

A

It's gonna show up here integrated right into the new menu it's going to show up here under open and, as you can see, you could actually register multiple file handlers for a given extension and it's also going to be built into the preview functionality.

A

So if I hit preview you're going to get the office 365 microsoft rendered bar at the top here and then below that an iframe which again is pointing to our local host- and here is just uh the the preview of the content with no editor supplied and you can actually scroll through uh all the files. uh In your thing and it'll invoke correctly our custom file handler and our preview, um you can see my test content is all very, very interesting.

A

It says things like my heading and so forth, but how does this all work- and where is this? Where can I see this so we've created a new repository uh just made public this morning called uh contoso, and so that repository under pnp is somewhere. We are looking to put isv or partner-focused samples that we uh write so this right now we aren't looking for contributions here, uh but we're working on figuring out how that might work, because these are meant to be reference samples, not really ones.

A

So if you have ideas for samples, please do keep putting them in the same spot, the sample galleries. That is the appropriate place for all the community samples, but these are going to be things we use in our discussions with partners that point out certain specific bits of technology.

A

So what is a file handler well under the hood? A file handler really is an azure active directory application, and so here's our file handler registration um and you can see all the settings but in your azure active directory application you insert into the add-ins property a manifest here and this manifest describes your file handler and really what it does is give you some.

A

You know some names and version numbers and things and you make up an id, that's whatever you want, but the important bit here is you give it icons and you give it uh urls to different actions. So there's a new file action and we have a url here, that's just one. We gave it so that's uh to create and then so forth.

A

Off, I don't there's sorry, multiple scroll bars, there's edit and there's preview are all defined here in this manifest and that's how we know where to launch our file handlers from so when I hit, for example, open what it's really doing is posting a bunch of information to my file handler and this file handler sample.

A

We put together uh with a couple interesting things I think uh folks could find uh fascinating is that uh this is built with next js, which is something I personally hadn't used prior to this, but found to be very helpful for developing an application like this, and it's got a bunch of great capabilities, one of which is. It does a lot of the uh react and web pack stuff behind the scenes for you. So, for example, it does great routing.

A

So if you want to create, you can just create them under the pages folder and, for example, our action page and this bracket action is a next syntax. To just tell you that we have multiple actions and we actually pick off our action here from the query. That actually is the path um which comes in as as uh in next as query, and we get our action and we can do some other things and so I've added in a bunch of code tours.

A

I'm not gonna, go through each code tour here in the interest of time, but we do things on the server side. So next has a great capability of splitting server and client side functionality and there's a lot of additional documentation on that you can check out, but so on our get server side props.

A

This is obviously running on the server side, but we get a post request from sharepoint when we launch the file handler and then we have a helper method here called a nit handler and that init handler method take a quick look at that it does some stuff for us. So what it does, is it either handles, uh knowing that we have a token meaning we've gone through the off flow or recognizes that we don't have a token and launches the authentication flow.

A

In this case, we're using uh the new msal for node library, which is out in I think, they're calling it an alpha still, but it's I found it quite stable for what I was doing in this testing. So you could definitely check that out, but we're using the auth code flow. So we get our auth code.

A

A file handler needs uh open id to sign people in and then files read, write all gives you access to all of the files that the given user has access to and then we're giving it a redirect uri back to our api login. But all of this is more or less just typescript code and react code that you're already familiar with. So it's a great way to take those skills and extend them to solving another problem in the sharepoint onedrive space.

A

So once we get through our off flow, we get a token. We actually make a request to graph this url uh comes in activation. Params items is going to be a graph url to the microsoft graph. We grab the content of that file and we actually pass it then into our page as properties. So it's going to come in as part of the properties. This handler is our actual page component function, our functional component for the page.

A

We do some validation of the stuff. We think we're getting. We set up our state using hooks. We do some functions here, so we have a function for handling content change for save again. This is more or less just react, programming um and setting states and things, and so we come down and we have two different views, so we're handling in the same control, we're handling our preview action and we're handling uh the other two actions which are edit or create, and so we provide our ui here.

A

uh Some message bars we're using uh the office ui fabric and monaco editor in next was a fun piece of stuff to set up. So we actually have one of our code tours outlines how to set the monaco editor up in next js. So we've got a control there and then we also have a preview control. That is just an iframe that takes uh the content and inserts into an iframe to isolate it a bit from what we're doing so.

A

We can edit on our page, as you saw here, we can go and we can edit this guy and we can make all our edits and when we're ready to save edit edit edit we're ready to save.

A

We come back to our code. We have two types of save, so these are just functionally binding. uh This flag for true or false, uh we'll come up to save, and that means, uh if it's true we're, also gonna close the window once we're done, and then we just run some typescript logic here we actually post to our api locally. So our api is part of our application. That's then going to run and persist the content back to sharepoint.

A

We pass it the things it needs to do, no, the app id the updated content and then as well uh the url uh to our item in graph. uh We send that back and then this is all just normal. uh The response worked, we could clear our dirty flag and we could close the window or set the message bar. Take our other appropriate actions. The last piece here I'll show you real quick, is file handler.

A

We did the same thing with the bracket action using that next js capability to put multiple routes into a single page into a single module. So we've got uh some configuration our size limit. We're saying this sample is only going to handle files up to 10 megabytes uh because that's it's just a sample. uh So we've got our handler. We could do save we're going to handle a save. We come in here we again process some of our inputs make sure we're good to go.

A

We have our token already we saved that in the session, so we don't have to re-off. We've actually saved the token in the user session, so we've got that ready to go, and then we construct a request to get some additional uh info about our uh list item or I'm sorry about our file item.

A

We get that make that request in graph and then we actually put the updated content uh as a buffer uh back up to the graph, and you can see our graph url built out there and then, if a request is okay or not okay, rather in this case we log do some error, logging and report an error to uh the consumer, which in this case is our own page.

A

Otherwise we say 200 and we're good, and so this is a great way to extend again your spfx skills, but also it's a good example of looking at solving a problem and taking making use of capabilities that already exist inside of sharepoint and onedrive to help solve these problems.

A

So we have a lot of partners we're looking at working with that have done various uh we'll call them clever workarounds to create similar functionality to this file handler um kind of capability and would encourage folks to re-look at file handlers as a great option um on that stuff. You can always read more about file handlers, so that's the overview of file handlers all up. We have some updates to that as well. That should be coming out in the next couple of days, and with that I will close you.