How to use List Screen in PowerApps

In this PowerApps tutorial, We will discuss how to use a List Screen in PowerApps.

Also, We will see how to display all the documents in the PowerApps list screen and how to display the documents in the Display form.

We will also see how to display the Document Details in one Screen without navigating other Screen in Powerapps.

You can also read another article on Create PowerApps App for SharePoint List. and How to format number as currency in PowerApps.

Use List Screen in Power Apps

To use a list screen in PowerApps, we need to follow these below processes:

• Create a SharePoint Document Library and Upload some documents into that Library
• Sign in Powerapps and Create a Canvas app
• Create a List screen and connect the Data Source as SharePoint
• Choose List or Library
• Add the Document Library Data source to the List screen and add some properties
• Add a Display Form to view each Document Details
• Preview the Powerapps app

Create a SharePoint Document Library and Upload Documents

First, In the SharePoint Site, I have created a Document Library (TSInfo Documents).

This library contains some columns and different types of documents (PDF, PPT, DOCX, etc) as shown below.

Create a Canvas app in Power Apps

• Sign in the PowerApps app with your credentials.
• Go to Apps option from the left navigation.
• Select Canvas under the + New app tab from the top of the page.

• Select Tablet layout under the Blank app section as below screenshot.

Create a List screen and Connect the Data Source

In the Powerapps page, Go to Insert tab -> New screen -> List as shown below.

Connect the Data Source as SharePoint

Select the List screen and connect a Data source as SharePoint through Connectors as like the below screenshot.

Enter the SharePoint site URL for the location of your list and hit the Connect button.

Choose your SharePoint Document Library (TSInfo Documents) and click on the Connect button.

You may like, PowerApps Count Function.

Template Gallery List Properties

• Select the List Gallery screen and go to Properties tab from the right section.
• Select the Data source as the SharePoint Document Library Name (TSInfo Documents).
• Select the Layout as Image, Title, and subtitle as shown below.

Add a Label to the List Screen

Add a Label (Insert -> Label) inside the first Data card and rename it (Company Documents) by double-clicking on it.

Add Thumbnail to each Document

As we considered the Layout as “Image, Title, and Subtitle”, so there is no need to add the image again in the List screen.

Select Image and put the below formula in the formula bar as:

Image = ThisItem.Thumbnail.Medium

To display the image in Powerapps and how it works, You can follow this below article:

How to display images from a SharePoint Online library in PowerApps

Add Ellipse (…) to each Document

Ellipse is used to open each Document in the new tab by clicking on it. It is also known as More.

Add Ellipse (Insert -> Icons -> Select …) and put the below formula in the formula bar as:

OnSelect = Launch('Link to Item')

Add Next Arrow Icon (>) to each Document

This Next arrow icon is used to view the details about each and every Document. Once you will click on the icon, then it will navigate to the Details screen where all the Document details will display.

Select the Arrow Icon (>) and apply the below formula on it:

OnSelect = Navigate('Document Details')

Where,

Document Details = It is the Display form where you can view the document details. For this, you need to add another screen which I have explained below.

Create a Blank screen and Add Display Form

Similarly, To view the details about each document in the Display form, follow these below steps:

• Create a Blank screen (Go to Home/Insert tab -> New screen -> Blank)
• Select Display form (Insert -> Forms -> Display)

• Select the Display form and go to the Properties tab from the right section.
• Select the Data source as Document Library Name (TSInfo Documents).
• Edit the Fields and add those fields that you want to display.
• Select the Columns as 1 and Layout as Vertical. Also, if you want to provide some other properties like Font Size, Font Color, Border, etc, then you can.
• Add a Label (Insert -> Label) inside the Display screen and rename it (Document Details) (Optional)
• Select the Display form and apply this below formula on its Item properties as

Item = TemplateGalleryList1.Selected

Now you can see the item in the display screen as like the below screenshot.

• Add a Cancel icon inside the Label where the item will navigate to the first screen (it is the List screen where all the documents are present). Apply this below formula:

OnSelect = Navigate('Company Documents')

Where,

Company Documents = List screen name

Preview the Canvas App

To Preview the App to see how it works, Press F5 or Run icon on the top of the page. This below screenshot represents the total performances of the List screen and Display screen.

In the Preview screen, Click an arrow icon of any document, then in another screen, it will display the details about that document. When you will cancel the display screen, then it will again come back to the list screen.

Similarly, When you will click on the Ellipses (…), it will help you to open the document in the next tab as shown in below screenshot.

Display Document Details in one Screen without navigating other Screen in Powerapps:

Follow the below steps:

• Add a Blank screen (Home -> New screen -> Blank).
• Add a Gallery control (Insert -> Gallery -> Vertical) into the Blank screen.
• Select the Gallery control -> Go to Properties tab (from the right section).
• Select the Data source as “TSInfo Documents” (SharePoint Document Library Name).
• Select the Layout as “Image, title, and subtitle”. To get the Document Image, follow this article: How to display images from a SharePoint Online library in PowerApps
• Select the Gallery screen and provide the SharePoint Document Library name (TSInfoDocuments) on its Item properties as

Items = 'TSInfo Documents'

Select the Next arrow icon (>) from any one of the document and apply the below formula:

OnSelect = UpdateContext({DocumentVar:Gallery2.Selected.ID})

Where,

• OnSelect = Property Name
• UpdateContext = This function is used to create a context variable.
• DocumentVar = It is the name of a Context variable to create or update.
• Gallery2.Selected.ID = It is the value assigned to the context variable.

• Now minimize the Gallery screen and add a Display Form (Insert -> Forms -> Display) in the other half of the screen as shown below.
• Select the Display form and Go to the Properties tab.
• Select the Data source as “TSInfo Documents”, Column as 1, and Layout as Vertical.
• Click on the Edit fields from the Fields section and add the fields as per your choice.
• Select the Display form and apply the below formula on its Item property as

Item = First(Filter('TSInfo Documents', ID = DocumentVar))

Where,

• Item = Property name
• Filter = Function name
• TSInfo Documents = SharePoint Document Library Name
• ID = Field value
• DocumentVar = Context Variable name

When you will preview the app, then the screen will appear as like the below screenshot.

When you will click on the next arrow icon of any document, then all the details about the document will appear in the display form.

Also, you may like the below Powerapps tutorials:

• How to create PowerApps collection from Excel
• Create Collection from SharePoint List in PowerApps
• PowerApps Collection: Add, Update, Remove and Filter items
• How to Create a Canvas app from SharePoint List in Power Apps
• Create a Data Table from Excel Data using Power Apps
• How to share PowerApps with external users
• How to navigate between screens in PowerApps
• PowerApps charts (Column, Line and Pie Chart)
• PowerApps Employee Directory

In this PowerApps we learned how to use a List Screen in PowerApps and how to display all the documents in the Powerapps List screen and how to display the documents in the Display form.