How to Connect to SharePoint Online Document Libraries Using PowerApps Canvas Apps

A new Power Apps Canvas Apps feature released in the spring of 2019 enables you to connect to SharePoint Online document libraries from PowerApps Canvas Apps.

Previously, the only way you could connect to SharePoint using the SharePoint Connector from Power Apps Canvas Apps was to connect to list data. This additional feature will enable users to do many things with the items within Document Libraries.

We have created a demo video (watch below) to show how to bind a Document Library to a PowerApps Gallery and to use the auto-generated thumbnail renderings of the files.

This video will give you a glimpse of some of the cool things you can do with this feature:

 
 

Bind a Gallery Control to a Library

Upon opening Canvass App, you can go to the SharePoint connector. In the Data Sources list, we connect to a demo library called ‘Test Docs’.

 
Sharepoint+Library+in+PowerApps+Canvas+Apps
 

With the new PowerApps Canvas Apps feature, now, you can connect to both Lists and Libraries.

To have a look at the data in the library that we selected, we add a Gallery by clicking on ‘Insert’ and then on ‘Gallery’ in the top menu.

In the right-hand pane, we choose ‘Properties’ and select the data source ‘Test Docs’ in the ‘Item’ option.

 
connect sharepoint online library
 

Change the Layout of the Gallery

After this, we show how to change the layout of the gallery to show the data you wish to display to your users. 

For example, in this video, we choose the ‘Title’ option as ‘Modified by’ and choose the meta ‘Display Name’, so that we see the name of the person who added the file in the ‘Title’ area of the files displayed in the Gallery. 

 
 

Set the Image Property to ‘Thumbnail’

For the images of the items in the list, change the function to ‘ThisItem.thumbnails.small’. This helps show thumbnails of the files in the Gallery. Instead of adding large-sized images, these thumbnails are created in the list to help make your app run faster.

 
 

The above steps help us to easily connect to the library, reveal the meta data, list the files and present thumbnails of the files.

After the list of files of your library are displayed in the Gallery, we try highlighting Thumbnail Images for the selected files on top of the Gallery. For this, we go to ‘Media’, select ‘Image’, and type ‘Gallery2.Selected.Thumbnail.Large’ in its function.

 
main image.png
 

Add a Button to Save Files to Variables

We also show how to add a button below the gallery to enable users to save files to variables. To do this, upon adding a button, its function is set to ‘Set(SelectedDocument, Gallery2.Selected)’.

So, now when you select a file and see its Large thumbnail on top, you can click the ‘Button’ to save the details of that file as a variable.

To check the value of the variable, you can go to ‘Variables’, click on ‘SelectedDocuments’ and see the record of that file from that library with the file’s extensive meta data including author.

 
Button.png
 

Conclusion

We are excited to see and share this new feature! Hopefully, this article will help you get started with it; there’s a lot you can do with it. We hope that our post and video will help spark some ideas for you to work on.