PowerApps PDF Viewer SharePoint Document Library without flow

hello everyone this is raza durrani in today's video i will show you how to build a full document library viewing experience in powerapps we will leverage the pdf viewer control and show any office documents word powerpoint excel in that pdf viewer control by transforming it to a pdf and of course we will also show pdf files in the pdf viewer control all of this without using any power automate flows i will also show you how we can showcase images from our document libraries in the image control in powerapps so let's get started with the video but first my introduction [Music] in powerapps we will connect to a sharepoint document library and build a document viewing experience directly within powerapps so to get started i have my documents library in my sharepoint site and this can be any document library i'm leveraging the out of the box documents library that comes with the site and in there i have added various types of files from images to powerpoints pdfs and more i even have a custom column that i created called status wherein i'm maintaining the status of my document also as part of a sharepoint document library we have views so if i click on the view selector here there is a view called tiles and when i select tiles if you observed what sharepoint did is it changed the view to a tile like experience now this document is an image so it's giving me the actual image in the tile but if i pick a different document for example if i pick this document which is a pdf document it is still getting me an image from that pdf document so what sharepoint is able to do is create a thumbnail of every document and place it right here in this tiles experience now let's see how we can mimic this in powerapps so in my document library viewer app here i will go to data sources add data connect to sharepoint pick my connection select my sharepoint site and then choose my document library click connect once i have my documents library connected in my power app i will head over to insert and insert a gallery and for the data source associated with this gallery i will select my documents library now this gallery has different controls i have a title control the text for which is this item.title so let me change this to this item.name and this will give me the name of the file i also have another label control here that is showcasing the modified date if i need the status this item dot status dot value because it's a choice column in my sharepoint list now how do i grab the image that sharepoint is showcasing there in that tiles view well for that for the image property we can use this item dot thumbnail so sharepoint automatically generates this for us for every document and we can just straight away leverage it dot there are three different variations of those thumbnails that are created a small size a medium sized and a large size so i will just pick the medium size in my case and just like that it's gone ahead and placed the thumbnails of those documents right here so same experience as what sharepoint does now to create that tile like experience here what i can simply do is if i select my gallery on the right hand side there's an option called layout i can change this layout and one of the layout options is title and subtitle on overlay so i'm going to pick this and this now is going to completely transform that experience for me i have the name i have the status here and i have the image at the back now the image resolution here is not that great so i'm going to change this to the large right now it's trying to fill the entire space that's there so that's why you might see some images being cut out if i want to fit this perfectly i can change the image position to fit so it's going to fit perfectly there in the middle now if i go ahead and preview this app i get that same sharepoint like experience right here when i can see image associated with my document now for the label control here when i'm displaying the name i'm going to change this to file name with extension so right here i can see the extension of the file along with it now in a gallery control a user can select an item now for image type documents my documents that have the extension png jpg and so and so forth i will have to leverage the image control and power apps to showcase that information so for example i can straight away go here go to insert go to media insert the image control and maybe i'm going to place this image control right here on the right hand side span the entire width so for the image property of my image control i'll pick the name of my gallery control and right here i'll change the image property to gallery dot selected dot thumbnail dot large and if i preview this as i select the items in my gallery it will show me the respective thumbnail associated with it right here on the right hand side now currently there's no visual indicator that showcases which item is selected in this gallery so for the image control what i can do is i can go and apply a border thickness so i'll go right here search for border thickness and write a simple formula if this item dot is selected then set the border thickness as three l set it as zero now if i go ahead and preview the app so any item that i select here will have a border around it so that clearly highlights the item that i'm selecting as part of my gallery you can also add some styling elements to your gallery for example the scroll bar here i can change that with a navigation control when i hover on a specific item i can set a transition here let's say to pop so it pops out when i hover on that item and i can also add some template padding here so let's say i had a padding of 20 so automatically all the controls in that gallery template have an additional padding associated with it because i've added some padding for the border thickness if the item is not selected i'll just give it a slight border of one so let me preview the app now and show you the experience so all my documents are now appearing in the form of cards and any document that i select in this gallery it will apply that focused border thickness and at the same time i can see the entire image right here or the thumbnail right here on the right hand side and as i hover over my gallery items you see how it creates that pop effect and here's that navigation based scrolling rather than the scroll bar so on the right hand side here we are representing a thumbnail of the document that's selected now that works for images but for scenarios wherein i have office documents like word powerpoint excel how can i show the actual document experience right here in powerapps for that we will use something known as the pdf viewer control so i'll go to insert and right here i'll go to media and i will select the pdf viewer control and i will set this control over that image control that i added when i was showing the thumbnail and for this control i'll say show controls turn on so it will show me the controls where i can actually traverse through the pdf now the pdf viewer only and only works with pdf documents plus those pdf documents should be anonymously available so for example if i look at the document property right now it says sample document right it's a sample blob and if i pick any pdf document that is anonymously available if i plug in that url right here under double quotes if i put that url in here it will open that pdf file right here it has to be anonymously accessible plus the link here has to be https these are two requirements i'll change this back to sample pdf now how do i show office documents in this pdf viewer because the pdf viewer can only show pdf documents how do i show word and powerpoint and excel so i was doing my standard weekend reading going around reading blogs i came across this fantastic blog by paul clumsy way back in 2018 he went in he has showcased an api that's available in sharepoint we can convert office documents word powerpoint and excel to pdf for free so from powerapps he calls the flow he calls those sharepoint specific apis to grab the actual content of the file and then he sends it back to powerapps and then once he gets that blob data back in powerapps he just renders it in the pdf viewer and the key thing what i observed was he's using an api which which does something like slash transform slash pdf so basically transforming word powerpoint and excel to pdf using this api however in my case i wanted to avoid flow i wanted to do everything in power apps so no flow whatsoever so i was thinking how can i call that api directly from powerapps itself now for this thumbnail that is being rendered right here let me go ahead and insert a label controller because i want to show something and for the text property of this label i'll use the gallery dot selected dot thumbnail dot let's say i picked the small size and this gives me the entire blob associated with that image now this is what i was thinking but i went ahead and i copied this and here i am i'm just pasting that in notepad now if you see right here there are some really really interesting things that are happening one thing i observed here is it's using that same transform api that paul was highlighting here to transform to pdf but over here it is transforming it to a thumbnail and in order to use this api you need a lot of other pieces of information like who's the provider what's the input format of the document what's the actual idea of the document it also needs an access token associated with it and all of this is being done out of the box right here in that thumbnail api so what i was thinking is what if i change thumbnail to pdf now if i copy this and i just directly fire this on the browser remember that's a word document that i had i'm just firing it in the browser and check this out it's actually converted my word document to a pdf because it has all the data it needs this is a full pdf experience right here in the browser itself it's an actual pdf file if i save this see the extension here it's pdf so this got me thinking how do i use this with the pdf viewer so here is my pdf viewer now for the document property what i can do is this gallery of documents dot selected dot thumbnail dot large so this gives me that url and you can see the url right here and all i have to do is change thumbnail so slash thumbnail to slash pdf so for that here's the hack use the substitute function in powerapps substitute slash thumbnail with slash pdf and now if i actually go and preview this check this out here is that word document converted into a pdf right here in the pdf viewer i can skim through all the pages i can search within the word document so let's search for teams there you go it's actually searching for text as well right here i can minimize maximize and i can click on this little icon here to open the file and here i get the full file i can print this save this i have all the options open for me let's go and take an example of a powerpoint here's a powerpoint document that i have i select this and now it renders that powerpoint file as a pdf document in the pdf viewer and here it is and if i click on open file again this will transform that powerpoint document into a pdf file this is a live document transformation now this works great for office documents that's word powerpoint excel but if i pick an image file the pdf file is not going to be rendering it that's because that transform api cannot transform any other document types into pdf so first thing is when do i show this pdf viewer i show this pdf viewer only if the selected item in the gallery is word powerpoint or excel so how do i get that for my pdf viewer if i head over to the visible property here i can write a very simple formula and that formula is what it's doing is it's going to grab the extension of the file so if you notice here i've highlighted this at the bottom i can see the result the extension is png it's storing it within a scope that's what the width function does i didn't want to repeat the formula over and over again that's why i used with i'm checking to see if that extension is either excel or word or powerpoint now if i preview the app if i pick the word document it's going to show the pdf viewer and render that file if i pick excel it's going to do exactly the same thing if i pick any other file type let's say i pick an image type it's not going to render and right now what's rendering here is that image control that i had added earlier which is just showcasing the thumbnail now what's left is pdf now you would think that pdf viewer showcasing a pdf is extremely easy same concept well no if i go and select a pdf file right now all i'm looking at is that thumbnail image now if i want the pdf viewer to be visible i'll go back to my pdf viewer control and right here i will add pdf so we can see it in action if i preview this you see it says it cannot open the pdf file so why can't the pdf viewer transform a pdf document into pdf well that's because that transform function can only transform office documents to pdf it cannot transform a pdf file into a pdf so once again we are kind of stuck here now i can easily go ahead and call the flow and grab that contents of the pdf file and send the data back to powerapps but i don't want to do that so i was thinking is that another way and guess what once again paul clumsey and his excellent blog post on clever workarounds to the rescue he posted something in 2017 a very simple update to powerapps that actually allowed us to do something really really cool so in sharepoint if you create a column of type hyperlink or picture and in there in the pictures once you provide a link to a picture if you try and render that in powerapps right and that's what he's showcasing right here if you connect it to powerapps and bring it in place a label and try and see where the value is coming from he got this url once again and in this url at the end what he observed is there is that site relative path to that specific image and what he says is if you actually go and change that to any other document and sharepoint for example pdf and use it in pdf viewer it will render and all of this without using any flow so let's see how we can do that so for this you need that extra column so i'll go back to my sharepoint document library let me change this back to the list view and here i need to add that column in the new modern experience for add column here is that hyperlink column so i'm going to select this i'm just going to name this pic the type is hyperlink i'll click save this is just a one-time setup i need that url so for that i need a reference on one of these files so let's say here i will select this document we'll go to details and here on the hyperlink column i'll place the url of this document library slash the name of any image file i have here so i'll pick the same file actually alm dot png so i'll just do that and once i'm done with this i will click outside so sharepoint saves this so i have that value right here now if you want to see that actual picture being rendered in sharepoint i can go to settings library settings i can go to that column which is hyperlink or picture select the column here and change format as picture say okay go back to the document library and here i can see it being rendered so i'll go back to my power app now i'll go to my data source and one i'll refresh my data source because i added a new column let's try and grab the value from there so once again i'll add a label and i'll place it right here for the text property of this label i will use gallery of documents dot selected dot the new column of hyperlink or picture type which is pick now i'll preview my app so i have the value in there only for one of my documents which is alm dot png so i'll select this and here is that label now if i grab the value from here and paste it in my notepad if you observe right here it creates this link which is like an inbuilt memory that it is holding here in powerapps the key thing here is is that get file content by path and here it is specifying the path to that file now what i want to do is change this so let me go ahead and first copy this url preview my app so i'll go and select a pdf file which says cannot open now for the pdf viewer control for the document property i cannot use the transform function when the file extension is not pdf so what do i do in this case first i have to check the extension of the file so i'll use if and this time i've written that same formula as before to go and grab the extension of the file if this is equal to pdf so if it is a pdf document in that case i want you to put the url that i just copied from that label else go ahead and continue using that substitute trick for office documents now if i click on format text we can see this entire formula in action if it is pdf it's going to use this formula now the path currently is pointing to that image which image in this documents library the item image that i just added but i want to make that dynamic i wanted to point to my pdf which is currently the item that's selected so to get that right here wherein it says path what we can do is after percentage 2 5 to f remove everything and here write the following formula so i write ampersand so i'm concatenating gallery dot selected dot folder path and gallery dot selected dot file name with extension and the key thing here is we have to encode all of this so i will write the following formula which is encode url wherein i'm going to encode all of this here's that link right up to the end which is percentage 252f i removed everything after that and then i'm using encode url get the folder path of the selected document in the gallery and get the file name with extension of the selected item in the gallery and this is only true for when it is a pdf why because i'm trying to put this into a pdf viewer now that i have this if i go ahead and preview my app check out the pdf viewer i have the pdf selected it's actually showing me that pdf file right here so i have the full pdf viewing experience if i pick another pdf document here it's loading up that document right here in the pdf viewer for me full pdf viewing experience right here in powerapps without using any flow now i don't have to add any content related to this column i will need the column though so it's important that the column exists and another thing is for the url that gets generated you see it has a reference to a specific row it says rows4 and the reason is because this is a row in sharepoint where the id is for if you want to remove the dependency of that row you can do that by changing this to zero so now there is no dependency on whether that row exists or not you don't need any data as well but it's important that this column exists because i am still pointing a reference to that column if i preview my app you see it will still work even though the row i set it as zero if i pick this pdf file it will showcase it right here if i pick my office documents the pdf viewer will render the office documents because i'm using that transform function and if i pick an image the standard image control shows up with the thumbnail now this is just the start now based on your response and i'm going to look at commands i'm going to look at the likes if i get a good response i will try and expand this further i'll try and add folders in the document library i will show you how we can pass through a folder structure as well and get the same experience here for the entire viewing experience i'll create a breadcrumb experience so we can go back and forth in folders i'll add filters on the top where you can refine your documents and much more so let me know i have my eye on the comments if you enjoyed this video then do like comment and subscribe and thank you so much for watching

Channel: Reza Dorrani

Views: 26,878

Keywords: powerapps pdf generator, powerapps pdf viewer, powerapps pdf viewer sharepoint document library, power apps pdf tutorial, power apps generate pdf, power apps document viewer, power apps, view pdf in powerapps, pdf in powerapps, powerapps pdf, show pdf files form sharepoint, powerapps pdf viewer without flow, power apps word, powerapps view pdf from sharepoint, pdf viewer powerapps, pdf viewer powerapps sharepoint, powerapps document preview, pdf viewer control, powerapps

Id: vqK29FWbLxU

Length: 24min 51sec (1491 seconds)

Published: Tue May 25 2021