Display The Files Stored In Another SharePoint Library Using Power Apps

Please see: Detailed approach on how to bring in an attachment in a SharePoint library (where SP list will have attachments OOTB but not the library). This article is split into three parts for separating the tasks and this is Part 3

Link to Part 1

Link to Part 2

Now the uploaded files have to be displayed!

All the files from the VendorDocAttachments library to be fetched and stored in a new collection. Add a new Gallery Control with this collection as source and display the file in hypertext element and a Remove icon.

Add the second SharePoint library(VendorDocAttachments) as Data Source via SharePoint Connectors in the Power Apps form

Once connected, Select the SharePoint Site url and choose the library

In the OnSelect property of the button add the following lines of formula

Reset(DataCardValue3);

Refresh(VendorDocAttachments);

ClearCollect(collectionFilesView,ShowColumns(VendorDocAttachments,"{Name}","VendorDocumentsID","{Link}","ID"));

Reset the attachment control. Refresh the data source every time and add the files from the library to the collection named collectionFilesView. ShowColumns formula is to choose what are the columns to be imported from the library.

“{Name}”: Is the name of the item / file in the library uploaded.

“VendorDocumentsID”: Is the Foreign Key for the matching

“{Link}”: Is a system metadata to fetch the link of the item / file uploaded.

“ID”: Is the item ID of the secondary library.

Add the Refresh and ClearCollect formula in the FormScreen1 à OnVisible property as well. This will help to fetch the collection on load of the form

Add a new Gallery Control (2nd Gallery Control) to display the items which are already uploaded in the secondary library with the data source as newly created collection (collectionFilesView)

Once the collection is selected as data source, Filter formula to be applied to display only the files which are linked to this item. Add the following line in Items property to achieve the same

Filter(collectionFilesView, VendorDocumentsID=Text(SharePointIntegration.SelectedListItemID))

Where the collection is filtered with the Foreign Key i.e., current list item ID stored in the VendorDocAttachments library and the selected item ID in Vendor Documents Library.

Now, a slight remodelling is required to make the control fit and looks as needed for the requirement.

1. Remove the image element, title and subtitle element
2. Rename the arrow element as Remove and change icon to X
3. Resize the control to fit the space
4. Insert a HtmlText element and change the HtmlText property to this

"<a href='"&ThisItem.'{Link}'&"'>"&ThisItem.'{Name}'&"</a>"

ThisItem.’{Link}’: Is the file path column from the collectionFileView collection

ThisItem.’{Name}’: Is the name column from the collectionFileView collection

It’s time for button action again. Add an Action à Power Automate à Create a flow in the Onselect property.

The template for the flow to choose will be Power Apps button

Rename the flow to removeFiles

Add a step to Delete item from the SharePoint library, get the item unique id through Ask in Power Apps

Site Address: <site url>

List Name: VendorDocAttachments {the attachment library where file uploaded}

Id: Ask in Power Apps {the SharePoint unique item ID from the collectionFileView collection}

Save the flow and go back to the Power Apps form.

Instantly the new flow name will appear (otherwise save and refresh the form). Add the flow and complete the formula in the OnSelect property of the button.

removeFiles.Run(ThisItem.ID);

Refresh(VendorDocAttachments);

ClearCollect(collectionFilesView,ShowColumns(VendorDocAttachments,"{Name}","VendorDocumentsID","{Link}","ID"));

Save the form and Publish to SharePoint.

Voila! Completed the setup! Time to test now.

Add an item in the Vendor Documents library and open the property pane form of item to upload files

The files uploaded in the VendorDocAttachments library

For Deleting the file, click the X icon will instantly removes the files from the View and from the SharePoint library as well.

Controls, Buttons and Collections used in this solution are:

1. Collections
   1. collectionFiles {to store temporary attachments in preview section}
   2. collectionFilesGallery {to store and upload through Power Automate}
   3. collectionFilesView {to store the fetched items from secondary SharePoint library}
2. Gallery Control
   1. Gallery1 {hidden}
      1. Title1 {TextBox}
      2. Image1 {Image}
   2. Gallery2 {to display / View the fetched files}
      1. HtmlText1 {to display the items with hyperlink to the file}
      2. Remove {to trigger the Power Automate flow and refresh the collection}
      3. Separator {to display a item break}
3. Button Control
   1. Button_UploadFiles {to perform actions like collecting files from Gallery1, trigger the Power Automate flow, Reset the attachment control, Refresh the collection}

Completed!