How to Create PowerApps GridView

In this Power Apps tutorial, We will discuss what is PowerApps Grid View and how to create a Gridview in Powerapps using Powerapps Gallery control.

Also, We will see how to create a header in Powerapps Gridview.

What is PowerApps Grid View?

A graphical representation of a tabular view of Data is known as Grid view or a DataGrid.

When we will create the Datagrid or Gridview in the Powerapps app, It is known as the PowerApps Data Grid view.

SharePoint List Data used for the PowerApps Grid View

I have a SharePoint List named “SharePoint Project Expenses“. This list has some columns with different data types as:

• Project Name (By default it is a Title Column)
• Number of User (Number Data type)
• Typical Software Costs (Currency Data type)
• User Licenses (Currency Data type)
• Created (Date and Time Data type)

Below screenshot represents the SharePoint list which has some records.

Create PowerApps Grid View using Gallery Control

You can create Powerapps Grid view using two different ways as:

1. By using Powerapps Gallery Control
2. By using Powerapps Data Table

Follow the below processes to create Powerapps Gridview using Gallery Control:

• Open the Power Apps page through the Browser. Sign in your Power Apps using Microsoft account.
• In the Power Apps page, Select + New app -> Canvas as shown below.

• Choose Tablet layout under the Blank app section.

Create PowerApps Grid View using Blank Vertical Gallery Control

• Now a new Blank screen will appear in the Powerapps Canvas App page. Go to the Insert tab -> Gallery -> Select the layout as Blank vertical as shown in the below screenshot.

Create a Data Connection for the SharePoint List

• To create a Data Connection for the SharePoint List, Click on Connect to data link from the Blank vertical gallery.
• Expand Connectors and select the SharePoint Data Source. Add a new or existing SharePoint connection.

• Provide your SharePoint Site URL for the location of your list and hit the Connect button. Also, you can directly specify the SharePoint Site Url under the Resent sites section.

• Choose your SharePoint List (SharePoint Project Expenses) and click on the Connect button. Now the SharePoint Data source connection is added to the Blank Vertical Gallery screen.

• Select the Blank Vertical Gallery Control and add the Label Control (Insert -> Label) in the Powerapps grid. Though, I want to show five fields in the Grid, So I added five Labels inside the grid as shown below.
• I have renamed the five Label names as vTitle, vNumberOfUser, vCreated, etc.

• Now you need to map the labels with the actual fields of the data source. Select Fields from the Properties pane and set the required fields.
• Suppose, in the vCreated label, you want to show the created date, then you can easily set using the Fields section.
• Similarly, you can also provide more properties to your desired field like Size, Layout, Color, Border, etc.
• Once it is done, then set all the height and width of each and every Label in a proper manner.

• When you will preview the Powerapps grid view, then all the SharePoint Data will appear like in the tabular Grid view structure as shown below.

NOTE:

In the Data Grid view, If you want to display all the Currency value in the proper Currency format and Date with a proper format, then follow this below Powerapps article:
How to format number as currency in PowerApps

After formatting the Currency value and as well as the Date picker value, you can see the below screenshot that how the Powerapps Grid View looks like:

As I have modified some records in the SharePoint List and refreshed, that’s why some of the values are changed in the above screenshot.

Create A Header In PowerApps Grid View

A Grid view without a header does not look a perfect grid view. For that, you need to create a Header on the top of the grid. So that you can verify the grid data easily and looks like a perfect grid.

In the Powerapps, you can create a Grid view Header in different ways. Such as:

• To create a Header in Powerapps Grid view, you can use a Data Label.
• To create a Header in Powerapps Grid View, you can use the Label controls or Input Text controls.

If you want to use the Label control or Input text box controls to create a Powerapps Grid view header, then it takes more time to design it as you need to set its height, width, and formatting for each control.

That’s why it will be easy to create a Grid view Header by using a Data Table. Follow these below steps:

Step: 1

Create a Powerapps Collection to store the column Headers. Select the Screen and write the below code on its OnVisible property as:

OnVisible = Collect(
    Header,
    {
        ProjectName: "",
        NumberOfUser: "",
        TypicalSoftwareCosts: "",
        UserLicenses: "",
        Created: ""
    }
)

Where,

• OnVisible = Screen Property Name
• Collect = This is the function which helps to create Power apps Collection
• Header = This is the Collection Name
• ProjectName, NumberOfUser and so on = These are the Column Names that you want to put in Header

Step: 2

Run the Powerapps app and check whether the Collection is created or not. To check the created collection, Go to View tab -> Click on Collections.

You can see your collection (Header) will be created with the blank data as shown in the below screenshot.

Step: 3

To create a Data table, Go to Insert tab -> Add Data table.

Step: 4

Place the Data Table on the top of the Grid view (as like Header) and select the Data Source as Header (Collection name).

Step: 5

Go to the Properties Pane -> Edit fields -> +Add field -> Choose the desired fields that you want to put in the Grid view header -> Hit on the Add button as like below screenshot.

Step: 6

Now all the Headers will be displayed on the top of the Grid view. Set and arrange the headers with appropriate Data and column names.

Step: 7

When you will preview (F5) the Powerapps Gridview app, it will appear as like shown below.

You may like these below Powerapps tutorials:

• Various PowerApps Validation Examples
• PowerApps charts (Column, Line and Pie Chart)
• How to use List Screen in PowerApps
• PowerApps Collection: Add, Update, Remove and Filter items
• How to display images from a SharePoint Online library in PowerApps
• Create Collection from SharePoint List in PowerApps
• Create a Data Table from Excel Data using Power Apps
• Create People Picker in Power Apps with Combo Box
• How to use PowerApps notify function

In this Power Apps tutorial, We discussed what is PowerApps Grid View and how to create a Grid View in Powerapps using Powerapps Gallery control. Also, We saw how to create a header in Powerapps Grid view.