SharePoint Document Library In A Power Apps Custom Page

A SharePoint document library can be embedded in a Power Apps custom page by using an iFrame. This technique allows us display to SharePoint document library as if we were on SharePoint.com. It also gives access to the full range of abilities offered by SharePoint – drag and drop to upload, change to another view, click to open a file and much more.

Many thanks to Ramiro Melgoza who discovered this capability. Important note – an iFrame pointing to a SharePoint document library may only be used within a custom page. It will not work in a standalone canvas app.

Table of Contents
• Introduction: The Vendor Invoices Custom Page
• Create A New SharePoint Document Library
• Download The iFrame PCF Control From PCF Gallery
• Import The iFrame PCF Control Into A Power Platform Environment
• Make A New Power Apps Custom Page
• Import The iFrame PCF Control To The Custom Page
• Display The SharePoint Document Library In An iFrame
• Add The Custom Page To Power Apps Model Driven App
• Test The SharePoint Document Library In A Custom Page

Introduction: The Vendor Invoices Custom Page

The Accounts Payable department at a retail company stores electronic copies of invoices in a SharePoint document library. While using a model-driven app with a custom page they can drag-and-drop new invoices directly into the document library.

Create A New SharePoint Document Library

We need a SharePoint document library to display inside the custom page. Choose any existing SharePoint library or create a new one. In this example we’ll be using a document library named Vendor Invoices with the following columns:

• Name (Single Line Text)
• Vendor Name (Single Line Text)
• Invoice ID (Single Line Text)
• Invoice Date (Date Only)
  
  

Download The iFrame PCF Control From PCF Gallery

To display the SharePoint document library inside of a canvas custom page we will need to use an iFrame. Power Apps does not have an iFrame control. But we can download a free iFrame PCF control from PCF Gallery which has the functionality we need.

Go to the PCF Gallery page for iFrame Virtual PCF by Greg Garcia and press the Download button.

The download button will navigate to the IFrameVirtualPCF Github repo where the PCF control is stored. Click the link for Releases.

Find the latest release and download the managed solution.

Import The iFrame PCF Control Into A Power Platform Environment

The iFrame PCF control must be installed in the Power Platform environment where our model-driven app will be created. Go to make.powerapps.com and navigate to the Solutions page. Select Import solution from the top menu. Browse and select the iFrameVirtualPCF managed solution then wait for it to be imported into the environment.

Once the iFrameVirtualPCF managed solution is imported it will look like this.

Make A New Power Apps Custom Page

We’ve completed all the pre-requisites and can now start to build our custom page with a SharePoint document library. Create a new solution and add a new custom page to it.

Insert two labels into the custom page. Fill the labels with the page title and a subtitle.

Import The iFrame PCF Control To The Custom Page

To add the iFrame PCF control to the custom page go to the Insert menu and select Get more components. Navigate to the Code tab and check the Component named IFrameVirtualPCF. Press the the Import button.

The IFrameVirtualPCF control is added to the Code components menu group of the Insert menu. Choose the component and add it to the app. By default the Microsoft Bing homepage will appear.

Display The SharePoint Document Library In An iFrame

To show the document library inside of the iFrame go to SharePoint and copy the URL. Then paste the URL into the src property of the iFrame. Save and publish the custom page.

The URL for the SharePoint document library in our example looks like this:

"https://matthewdevaney.sharepoint.com/sites/MatthewDevaneyBlog/Vendor%20Invoices/Forms/AllItems.aspx?viewid=c0009b43%2D3525%2D476e%2Dbe47%2D2912d231f99e"

Add The Custom Page To Power Apps Model Driven App

Now that we have completed the custom page we will add it to a model-driven app. Go to an existing model-driven app or create a new one and press the +New button in the Pages menu.

Select the Custom page option and press Next.

Choose Use an existing custom page and check the the name of the custom page. Press the Add button.

Save and publish the app. Then press the Play button.

Test The SharePoint Document Library In A Custom Page

We’re done. Open to the Custom page in the model driven and give it a try.

Questions?

If you have any questions or feedback about SharePoint Document Library In A Power Apps Custom Page please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.