Microsoft 365 Community SharePoint, 25 Mar 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building extension to save documents as PDF in tenant document libraries

Description

In this 11-minute Developer-focused demo, Mikael Svenson shares his updated list extension first created 2 years ago for converting one or more selected documents into pdfs using internal SharePoint REST APIs. The extension uses 2 key methods – Export (download) and Save As (convert). Saves pdfs to current library. Mikael steps through the conversion and render coding – essentially copy entire document and metadata to blob, writes data into pdf. Tenant wide extension is automatically created in the App Catalog. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on March 25, 2021.

Demo Presenter: Mikael Svenson (Microsoft) | @mikaelsvenson

Supporting materials:
• Repo - Save and convert as PDF by PnP | https://github.com/pnp/sp-dev-fx-extensions/tree/master/samples/react-command-convert-to-pdf
• Documentation - SPRenderListDataOptions options | https://docs.microsoft.com/en-us/sharepoint/dev/sp-add-ins/working-with-lists-and-list-items-with-rest#sprenderlistdataoptions-options

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 it's I think, it's probably two years ago I created this list studio extension for converting documents or supported file formats into um into pdfs in line from uh from the library, but but it was sitting in the repo of my old employer, so we decided well, let's just move it over to pmp and maybe we'll get more traction to it. So the idea is that I mean often you might be sitting in a library.

A

You have one or multiple files and you want might want to either download these as pdfs or convert them to pdf. um The good thing about this solution is that it's using out of the box api, so there's no external calls to flow or azure functions service, whatever it's all all just using the internal api, so I'll cover that later as well. So, let's just start with one. If I do one document first, um so I have download as pdf and convert to pdf.

A

So now, if I do convert to pdf processing and then it's generating- and we should see an update here and here's my file, so I guess I can. I can open this as well. You see well, it just had some text in it. I can also do so. Let me just remove this and I can do two files and then we can go back.

A

Oh sorry, it was already there and then convert to pdf processing the first one processing, the second one, and we should probably get the couple of pdfs updated here yep then this one also had an image in it and let's just delete them again, and then let's do the download demo.

A

So if I do download it will convert them and then it will use jsip on the page to zip them up and give you a zip file.

A

With the same files with a small powered by pnp text file in there- and if I open this file, you see it's the same pdf, it's all all quite simple. So how is this actually working behind the scenes? That's sort of that might be what you're wondering I can cover a couple of things. First, uh so first up the the icons here, which are also themed and there are svg icons. So I covered this in my last term as well, so I'm using the same trick.

A

That means I'm using svg xml and then I'm getting the theme color and then I'm just putting that in as a fill color of this svg. So that's sort of a good pattern. If you want icons which looks and scales good and then picks up the the current theme at the beginning of my list view command set. So this is on listview it I am checking well, do you have permissions to add items to the library, because if you don't have right access to the library?

A

Well, you can't really do any conversion and then there are two different methods we have export and then we have save as which which generates to sharepoint.

A

So if you look at the save as the one doing the conversion, we have first generate pdf urls and if I go to this helper function, um so you see it's using a render list data as stream, uh where the important part is the different options I pass in which it like enable media ta urls.

A

So if I go back to the documentation, uh I think I work here so here's the options for render list data and then you see enable media. Ta urls enables urls pointing to the media, ta service or meta service, which gives you a thumbnail url video, manifest and pdf conversion. Urls.

A

So this is on the see. So if you, if you search for render list data as stream, you get the official documentation and that's what's being uh being listed right. So so so what I do then is I pull out all the files and then so. We need the pdf conversion url and we have the media base url, because these are being picked up by the cdn.

A

So then I'm loading these fields for for the items putting them into the payload and then we're creating the payload to get these files.

A

So that's just generating the urls. If we go back all right and then if we do save so the save method, so so what uh so? What happens? Is we take the the document url and then the full url, and then I replace the extension which in this case is docx and then pdf, and then we do a uh do a copy. So here's a copy down here.

A

So basically, basically what happens? Is I copy the entire um entire word document? Because, then, you get all the metadata as well, but I rename it inside the same time to pdf and then we read the um then then we read the conver so so. Here's the pdf url, which which reads the the converted files and then get the blob data and then write that back to the file. So that's sort of an easy way to to maintain all the metadata but replace the actual contents with um with the pdf content.

A

So so the binary stuff works and here's a small fix. So there was uh some race conditions where the internal file type wasn't set to pdf. So that means, even though the file here said dot pdf uh in the extension it still had a word icon, because uh sharepoint hadn't caught up with internal fields. So it's just running an extra update to ensure that the this this works correctly and that's expected- and I haven't had any reports of issues uh issues afterwards.

A

So that's basically the the uh the conversion um and then the same same is for download, but instead of copying it to a pdf file. We, let's look at the zip code, so it just takes takes the blobs adds it to a zip file and then saves it out to the client right. So it's um yeah, not a big deal.

A

Do you have any any? Are there any questions? Do you have any comments? Let's say you typically are good to sort of clue me back into stuff. I forget um details.

B

I think did we go through the deployment thing uh related on getting the extension across the tenants um just from this side, just the pinpoint.

A

I mean it's it's it's in that package, which is deployed to the app catalog so like same as all sharepoint framework, stuff, yeah,.

B

But can you open up the tenantwide deployment configuration and this let's see if just a reminder on that one for most and some people it might be super clear. But again, this is such a powerful feature and we have a few minutes time to spend here. So.

A

So I probably haven't built it, so that means uh you do upload and then it um it's a tenant wide extension. I don't think I have the uh package.

B

Let's go to the site, it should be there by the phone. That's that's the beauty. So yes yep, so.

A

Let's deploy all the sites, yeah yeah, if you go, somebody recite.

B

B

Not in here in the app in the app catalog yeah.

A

B

I'm I'm completely messing up your demo, so it's okay, ten and five extensions listed over there, uh we're potentially looking into putting this by the way in the app catalog left menu uh pretty soon- um and this basically means in here since when, when mikhail created the solution, we do create the default xml and files as part of the solution structure. We'll have a look on those as well, but the beauty of doing this is that now, by default, every single document library will have this extension in them.

B

It doesn't matter where you create the document library. This extension will be lighting up across the antenna and that's beautiful.

A

And you see, I have two of these, which is probably why I am getting a nice uh error. So if I go here and open this, you see, I have one two three yeah.

B

But we could easily control because we control all of this from a one centralized location, which is that list which.

A

B

In app catalog and that's the beauty of this model, so you don't have to go to the site level to change things you come here, delete one file and row from here and that changes or you can disable one of them and that impacts immediately run time. The experience has crossed the tenants, no delays, no, nothing. It's a runtime resolution and, of course, if you, if.

A

You don't delay.

B

If we're being super super practical from a technical perspective, but still anyway,.

A

Yeah and if you don't want pdf conversion in all your sites, I don't know why. But then you can deploy to site app catalog as well, so you only get it for for that. One site.

B

Or you can filter that only to a specific web template now. Can we go to the solution? Let's just pinpoint where this is happening. So if you go to the solution, sharepoint folder extend the sharepoint folder.

A

B

These are that's, basically, what is causing the uh oh, that's the custom action, and this one is the client side component instance. This is the one which is adding the instant to the tenant wide deployment list and then that, basically, this is the information which is being visible on that list and then that enables the runtime resolution of the extension across the tenant automatically, which is beautiful.

A

Yeah and 101 means it's available in document libraries yeah.

B

So I've just a funny side note on that. One just had a meeting earlier today with our china team who's looking into modernizing the whole app catalog end to end and all of that's the fan store, there's a lot of announcements coming on there and and they were wondering uh or the pm who doesn't have years and years of expertise related on sharepoint. How would you know that 101 is a document library? How would you know that sds 3 is a modern subside?

B

Well, of course, you know if you're in sharepoint for a while, but you wouldn't know otherwise so potentially at some point, we'll have a nice administrative ux to manage all of their settings for now it's this codes, which aren't recommended, though, so I.

A

Mean, but if you google, for it, you will find it right. It's all on the wall. That's true.

B

Yeah 20 years.

A

B

The document library has been 101 for 20 years. So that's the thing so yeah, which is yeah mind-blowing.

B