Display SharePoint List Attachments in Power Apps | Viewer Component

hello everyone reza here in this video i will show you how we can build a sharepoint list item attachments viewer control inside of powerapps this control will showcase all types of list attachments images pdf word video files and a lot more i have also made this a component that you can download and try it out right away so let's get started with the video my scenario here is a simple power app that is connected to a sharepoint list the home screen i have a gallery that is displaying the information from the sharepoint list the user can select an item in the gallery which takes the user to the form screen wherein the user can edit and make changes to the form we have the attachments column which comes with a sharepoint list wherein we can add attachments now we are trying to build an attachment viewer wherein the user can view all the attachments that are associated with a list item in this gallery i have an image control and this is where i would like to showcase a preview of an attachment related to this item now for the image property if i try and use this item dot thumbnail and i can pick the size of the thumbnail for a list item attachment this does not return any value for document libraries and i have done a full video on this experience here in my gallery i have an image control the image property here i am leveraging this item.thumbnail.large and it goes ahead and showcases a thumbnail of that specific document for list item attachments this thumbnail property does not return any specific value for a list item we can have more than one attachments but here since i am showcasing the data in the gallery let's say i would like to just show a preview of the first attachment associated with the list item so to do that i can leverage the first function which returns the first value from an array of data or a collection of data and that information will come from this item dot attachments and then we have certain properties that are exposed as part of the attachments data type we have the absolute uri to the attachment the display name the id and the value now if i was to go ahead and just use the value in this scenario if i preview this you will note that in the third record i did get an image if i was to go to this specific record we can see that the first attachment is an image and that is exactly what shows up here if i go to powerapps learning for example there's nothing attached so let's go ahead and attach a file and let's say in this case i attach a pdf file now if i click on subvert we are back to our gallery experience although we added an attachment we don't see the image associated with it however if i was to go to a specific item and add an attachment which is of type image and submit we should have that image showcased here now the reason why it works for attachments of type images because we're using an image control so as long as the values of type image it will go ahead and showcase that in this control other types of attachments pdf word powerpoint etc will not show up right here now i came across a blog post from vitaly and here it's pointed out that there is a specific endpoint that we can call and that end point is layouts15getpreview.ashx it supports 47 file types which is as follows and for any document that you have in your document library if you provide that path to that specific document to this end point it will render a thumbnail and that thumbnail as well you can define a property called resolution so that you can define the width of that thumbnail that's returned instead of pointing to a specific document i point to an attachment inside my sharepoint list item now the end point here looks like this so i'm going to go ahead and copy this go to powerapps and here for the image property under double quotes i will paste that url now here where it's written tenant we need to replace this with our tenant name so i've just done that and then the path is the path to the document and in my case it is the attachments in my list item now in this gallery since i'm just showing one image i need to point to the first attachment if there is any so i'll use first off this item dot attachments and i need the path to that specific attachment which i can get directly from absolute uri now if i was to preview my app we can see that it's grabbing the thumbnail for my first list item as well and in this case the attachment was a pdf file now for a specific list item a user can have multiple attachments so for example here in this list item i have six attachments and i've added files of different types how do i show all the attachments that are a part of that list item on my home screen i can go and insert a gallery and let's say i pick the horizontal gallery i will position this on the right hand side i have renamed this gallery to gal attach and for the items property of this gallery i will leverage my main gallery which is called gallery data dot selected dot attachments and for the image control here instead of using the absolute uri to that specific attachment i can simply go and leverage that same endpoint and then for the path i will use this item dot absolute uri if i was to preview the app i get the image the mp4 file is not supported so it doesn't show me a thumbnail i have an excel file here i have an svg that did not show up and an audio file that is not supported by that end point so it did not show up now for the images that showed up as well if you notice the resolution of this image is not that great so not only can you pass the path but we can also pass the resolution and i can pass the attribute which is resolution and the highest resolution is six so i'll leverage six now if i preview the app i get a higher resolution image now what do we do about the file types that are not supported for example here i have an mp4 file now in this gallery i'll add a media control which is video i have positioned the video control right here and for the property of the video file i'll use this item dot absolute uri now if i was to preview my app video file will not play for my image type but for the type which is mp4 i can get a video player right here and i can play my video file right here in line in powerapps now for image file types svg png jpg and more i can directly leverage the image control itself and rather than using this endpoint let's say i add another image control here in this gallery i could have directly leveraged this item absolute uri so if i preview the app if you observe for the svg i get the powerapps image and for the mp3 type files in powerapps we also have an audio player and this could simply be this item dot absolute uri audio files so keeping all of these scenarios in mind i went ahead and built a component which acts like a reusable control in powerapps and in that component i have included all these concepts that i just showcased so i'll remove my attachments gallery and i'm going to replace this now with my component and to add the component i'll go to custom and add my component to the app i will position this component right here on the right hand side bear in mind this component is fully responsive so if you were to reduce the height or the width you will observe how the component automatically repositions the controls now for this component for the items property all you need to do is pass the attachment reference to your list item my main gallery dot selected item dot attachments and once i pass that for my component if i head over to advanced i need to ensure that i do the correct mapping here so absolute uri should be mapped to absolute uri display name is correctly mapped i'll just map the value and the id is correctly mapped as well now if i was to preview this app for the current selected item in the gallery which is inventory data that's my first attachment which is of type png and at the bottom it also shows you how many attachments you have with respect to this list item so i have six and i'm showing the first one of six i can get a preview of that image right here and i can also go ahead and download that image by clicking on this button i can click next here is my mp4 file so it knows the type of the file and based on that it's showing and hiding the different controls inside that component here it showcases the video player if i click next i have a word document a preview of that specific word document once again i can click on download and download the files next is an excel file so in this case i am showcasing the svg icon for excel the user has the option to download that excel file next i have an svg file and then finally i have an mp3 file and i'm showcasing the mp3 player here so the user can straight away play it inside the app itself and since this component is getting its data from this gallery if i was to select a different record in the gallery the component will automatically update itself so now it's showcasing just one record because for this list item i only have one attachment if i was to go into the form edit the form and let's say i attach a couple of pdfs an svg maybe a powerpoint and click submit back to my attachments viewer component now we have five attachments related to this list item here's the first one here's the second one which is a pdf now for a pdf the component has an additional feature wherein you can even preview the entire pdf document live so if i was to select this it will launch the pdf viewer control and you can view your entire pdf document right here you have the search option you can go to different pages of the pdf you can zoom in zoom out and if you would like to come out of this previewing experience just click on this x icon for this component i have included some additional properties background color so let's say my app has the doc theme so i'm going to change the theme of my app i would like the component to match the theme of my app so for the background color here i can go and define that same dark theme for the text color i can simply go and change that and give it let's say in this case white i can showcase a border around my controls and i also have the ability to define how many items i would like to show here so right now the wrap count is one if i change this to two it will showcase two attachments in one screen and i can now move through all the attachments right here if i go to my form control experience the user can add and remove attachments right here on the fly but one thing the user cannot do is preview those documents so in this screen as well i can simply go and insert my attachment viewer component i'll position it here on the right hand side for the items property for the attachments data card you go and select the specific attachment control grab the name of that attachment control inside that data card go to the items property of the component and replace it with the name of your attachments control dot attachments and after this ensure that you go to advanced so value set it to value absolute uri if you notice absolute uri is not exposed you set that to value display name you set it to name and id is not exposed as well so you set that to value this attachments control and the form experience is a little limited so if you observe the attachment viewer component it has a few limitations here as well it is showcasing that there are five attachments it's showing the first one which is export excel dot png that's right here i don't give the download option here to download in this case the user can just simply click on the name of the attachment and then it will start downloading the file now important thing to note here in this experience since i do not have the absolute uri in my component i did not have the ability to call that api endpoint to get a thumbnail for this scenario i've kind of handled it differently so if i was to look at a pdf document can't get that thumbnail so i've just put an svg icon here but the user can still click on pdf and that pdf file will open up in the pdf viewer experience here is the svg now the beauty of this is as the user makes changes to the attachments we will notice that the component will reflect those changes live so let's say i remove three documents we can see how the component is aware of that and it does specify that currently there are only two attachments if i undo any attachment the component will reflect that update right away and if i was to attach additional files the component will update itself and we can see those newly attached files in action as well the main feature is the items property of the component i have mapped it to exactly the same properties that the attachments control exposes by default i've added some sample data in here here is my gallery of attachments based upon the type of the attachment i either show the video player or the audio player and for the preview image i've gone ahead and used the following code i'm using a with function here i can create a local scoped variable inside the width function which i've done right here i've called it file extension i'm grabbing the extension of the attachment if the extension of the attachment is excel or csv related then i've gone ahead and added some svg code that showcases that excel icon if the attachment is any one of these which are more or less my image type files which the basic image control anyway supports i can directly use this item.value if the absolute uri contains this specific url which is the case when you are leveraging that attachments control inside the form experience in that case i do not have the preview for most of the document types so i added that svg to show the fact that there is no preview available for the specific type of document and if i'm using the component connected to a gallery like i did on the home screen in that case my absolute uri would be pointing to sharepoint so i can go ahead and leverage that endpoint that i showcased earlier so for these specific types of files i've mentioned go and leverage that specific endpoint feel free to add additional file types here that you would like to support based upon your use case i will make this component available to download the link is in the description of this video so to go ahead and try it out if you enjoyed this video then do like comment and subscribe to my youtube channel and thank you so much for watching

Channel: Reza Dorrani

Views: 4,586

Rating: 5 out of 5

Keywords: powerapps attachments sharepoint list, powerapps sharepoint, powerapps, sharepoint, powerapps sharepoint tutorial, sharepoint list attachments, powerapps attachment control, microsoft powerapps sharepoint list, powerapps download attachments, powerapps display image from sharepoint list, powerapps display attachment, powerapps attachment sharepoint list, display sharepoint attachments in powerapps, power apps, reza dorrani, display sharepoint list attachments in powerapps, component

Id: 3dNeMVLZDHo

Length: 17min 23sec (1043 seconds)

Published: Tue Sep 28 2021