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.

powerapps grid view

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.
powerapps editable grid view
  • Choose Tablet layout under the Blank app section.
power apps editable grid

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.
power apps grid view

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.
powerapps grid edit
  • 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.
power apps grid edit
  • 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.
powerapps grid view edit
  • 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.
power apps grid view in gallery
  • 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.
powerapps grid view in gallery
  • 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.
power apps editable grid view

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:

power apps grid view edit

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
Create a Header In PowerApps grid view

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.

Create a Header In Power Apps grid view

Step: 3

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

Create Header In Power Apps grid view

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).

Create Header In PowerApps grid view

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.

create a header in powerapps grid view gallery control

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.

create a header in power apps grid view gallery control

Step: 7

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

create header in power apps grid view gallery control

You may like these below Powerapps tutorials:

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.

  • >