Display SharePoint Document Library on PowerApps Portal

So Simply I got this question today on the community forums and I actually liked the idea what if we do not want to enable sharepoint document integration with DataVerse and we have a PowerApps portals which is always connected to DataVerse and we want Simply to display a Sharepoint Document Library.. So the Idea that came to me what about to Embed Canvas App in a web page?

So first thing is to create your Canvas App and link it to your Document Library!

Lets Get Started!

STEP1: Create Canvas App

  1. we start by creating a new document library on sharepoint and lets call it Portal Docs

2. Go to make.powerapps.com and Select Create New App -> choose from Blank and choose Tablet Layout.

2. Choose Data Source->Add Data -> Search for sharepoint connector and Select Your Site.

3. Choose the Portal Docs Document Library that you have created in step 1

4. On your App -> Add a Gallery so that we use it to display the documents and connect it to the DataSource which is Portal Docs

5. Change Layout to Image, title, subtitle, and body

6. So for the Image control , we need to display the image thumbnail but what if we have a folder so we need to use a folder image; So go to Media and Upload your favorite folder icon

7. On the Gallery Image Property , Add the below Expression to display nice icon where there is a folder

8. Now we need to add an Icon to download the document , so Go Insert Icon and Choose the Download Icon and this Icon needs to be displayed only if the Item is not a folder.

To Download on the OnSelect of the Icon we need to use the Launch function as below

9. Save the App and Publish it

10. Go to your app and click Details

11. Get your App Id

Step 2: Display Canvas App on the PowerApps Portal

  1. Go to make.powerapps.com and edit your PowerApps portal.
  2. Click on New -> Blank Page

3. Set Name and Partial URL

4. Open the source Control Editor and Insert an IFRAME using the Web Link captured above, to access source control editor click on the <> Highlighted in the picture above and insert an iframe as below.

And Here you GO!

Keep the following points in mind for authenticating users of your app:

  • If your website uses Azure Active Directory (AAD) based authentication, no additional sign-in is required.
  • If your website uses any other sign-in mechanism or is not authenticated, your users see a sign-in prompt on the iframe. After they sign-in, they will be able to run the app as long as the author of the app has shared it with them.
  • For External Portal Users they need to be added as Guests on Azure active directly and then share the app with the users.
  • You must have a PowerApps plan license assigned to your organization

References:

https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/embed-apps-dev?WT.mc_id=DX-MVP-5004221

https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/share-app-guests?WT.mc_id=DX-MVP-5004221

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
%d bloggers like this: