Create Grid View In PowerApps Using Blank Gallery Control - Part One

In this article, we will learn how we can create a Grid View in PowerApps using Blank Gallery Control.

Overview

 
In this article, we will learn how we can create a Grid View in PowerApps using the Blank Gallery Control.
 
When someone is new in the development phase in PowerApps, they always have a question about how they can show data in a Grid format in PowerApps.
 
Actually, OOTB manner PowerApps provide us some beautiful Grid layouts for Phone and Tablet view.
 
We can create a Grid view in PowerApps either using “Data table” or using “Gallery”.
 
 

OOTB templates of Gallery

 
Below are some Out of The Box templates provided to design the Gallery.

 
We want to create a Data Grid something like the below example.
 
 

Requirements of Grid

  • Show the data in a Tabular Format
  • If there is no data – show “No data available”.
  • Conditional Formatting of each row.
  • Highlight each row of Galley upon selecting the row.
We will cover all the above-mentioned requirement in the different part of this article.
 
So, now let’s get started to create a Grid in PowerApps.
 
Step 1
 
Decide which field we want to display in the PowerApps grid.
 
 
Step 2
 
Create a Data Connection of the SharePoint list.
 
Go to the "View" menu and click on "Data sources".
 
 
Add a data source.
 
 
Step 3
 
Insert a blank screen in PowerApps.
 
 
Step 4
 
Go to the "Insert" menu and click on Gallery. From Options, select "Blank vertical".
 
 
Step 5
 
From Items, select your List.
 
 
Step 6
 
Now, add the Label control in the PowerApps Grid.
 
 
I want to show 6 fields in the Grid, so I added 6 labels inside the Grid.
 
 
Step 7
 
Now, map the labels with the actual fields of the data source.
 
To do that, select Fields from the Properties pane.
 
It will allow setting the value in each label. Set the desired fields.
 
Example - Under “vExperience” label, if we want to show Experience column, we can easily set from there.
 
 
Step 8
 
Set the height and width of each label and arrange them in a proper manner.
 
 
Step 9
 
Once we set the row, the Gallery data would look like the following.
 
 
Step 10
 
In the next article, we will learn how we can add Headers in the Grid.
 

Conclusion

 
I hope you love this article! Stay connected with me to learn more about power platforms like PowerApps, Power BI and MS Flow.
 
Happy PowerApping!!!