Answered

How to accommodate gallery with 4*4 row setup

(1) Share

Report

Posted on by Iantaylor2050

601

I want to accommodate gallery with 4*4 row and columns setup. May i know how to design such gallery as per below screenshot

Categories:

AI Builder

Building Power Apps

Connector development

Error handling

GCC, GCCH, DoD - Federal App Makers (FAM)

Microsoft Dataverse with Power Apps

Experimental features

Governance & administering

Power Apps Pro Dev & ISV

Power Query

General topics

I have the same question (0)

All responses (3)

Answers (1)

Sort by

Verified answer

WarrenBelz 155,242 Most Valuable Professional on at

Like (1)

Report
Copy link

Link copied!
Hi @Iantaylor2050,

You need 8 records and a Gallery WrapCount of 4. I did a test here (I know some of the icons are wrong) with the Items of the Gallery

Table( { Value: "Accounting", Pic: Icon.Settings }, { Value: "Human Resources", Pic: Icon.People }, { Value: "Help Desk", Pic: Icon.Phone }, { Value: "Sales", Pic: Icon.Calculator }, { Value: "PTO", Pic: Icon.CalendarBlank }, { Value: "R & D", Pic: Icon.ToolsWrench }, { Value: "Marketing", Pic: Icon.Message }, { Value: "Staff Directory", Pic: Icon.Journal } )

and this is the result using a WrapCount of 4

In the gallery, you need 3 controls -

A Rectangle with the dimensions to fit in the gallery with the margins you want (this needs to be at the back) and have the Fill of the colour you want.

An Icon - start with any icon, then change the Icon property to

ThisItem.Pic

and a Text Label with the Text
ThisItem.Value

The other thing you will probably want to do here is go to a screen on each, so add a third element with the target screen (example)

{ Value: "Accounting", Pic: Icon.Notebook, Scr: scrAccounting },

and then OnSelect

Navigate(ThisItem.Scr)

Please ✅ Does this answer your question if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider answering Yes to Was this reply helpful? or give it a Like ♥
Visit my blog Practical Power Apps LinkedIn

Was this reply helpful? Yes No
Suggested answer

11manish 1,963 on at

Like (0)

Report
Copy link

Link copied!
Follow the below steps :

Open the make.powerapps.com

Choose the "Start with design"

Select below

Select Vertical Gallery like below :

Create table like below and add in the Items Property of Gallery :

Table(

{ SNo: 1, Name: "Accounting" , Icon : Icon.Settings },

{ SNo: 2, Name: "Human Resources", Icon : Icon.People },

{ SNo: 3, Name: "Help desk" , Icon : Icon.Phone },

{ SNo: 4, Name: "Sales" , Icon : Icon.Notebook },

{ SNo: 5, Name: "PTO" , Icon : Icon.Clock },

{ SNo: 6, Name: "R & D" , Icon : Icon.ToolsWrench },

{ SNo: 7, Name: "Marketing" , Icon : Icon.Message },

{ SNo: 8, Name: "Staff Directory", Icon : Icon.Journal }

)

In the Gallery, Put the Wrap Count : 4

Add Rectangle, Icon and Text value in the Gallery like below

Set the Icon Property : ThisItem.Icon and Label.Text : ThisItem.Name

adjust look and feel

add the Rectangle color property : RGBA(54, 176, 75, 1)

Adjust the Icon and Label color : white

It looks like below

Was this reply helpful? Yes No
RobElliott 10,485 Super User 2026 Season 1 on at

Like (0)

Report
Copy link

Link copied!

And don't forget that we now have the grid container which would be another way to build this.

Was this reply helpful? Yes No