Build PowerApps Gallery with Four Column Layout

Problem Statement

How to add multiple columns & rows with gallery control. So I have taken an example with four (4) column structure designs to demonstrate.

Solution

Let's follow the below steps to design multiple columns and rows in Gallery Control.

Step 1. Select the Blank Vertical Gallery

PowerApps VirtualEvent

 

Step 2. DataSoruce List

DataSource List

Step 3. Set vertical Gallery below Properties.

  1. Data Source with SharePoint List with two columns i.e. Title (Event Name) & Event Date.
  2. Size as "Parent.Width" to capture the entire screen.
  3. WRAP count as 4 i.e. Gallery item will be in one row with 4 columns, and the rest will continue similarly into the next rows.
  4. Template Size can be set as per desired height. 
  5. Template Padding can be added as the gap between gallery items.

Vertical gallary

Step 4. Add other fields to Gallery.

  1. Add Vertical Container.
  2. Add two labels under the container.
  3. Set the value of the first label i.e. ThisItem.Title &  Set Width of the label as Parent.Width & Height as Parent.Height/2.
  4. Set the value of the second label i.e. DateDiff( Today(), ThisItem.EventDate, TimeUnit.Days ) & " day(s) ago"   &  Set the Width of the label as Parent.Width & Hight as Parent.Height/2.
  5. Set Container Width as Parent.Width/4-10 and Height as desired height. In this example, I used 150.

Build PowerApps Gallery

This is how the Vertical Gallery can be designed with multiple desired rows and column. Hope you have learned something useful here


Similar Articles