Gallery Components for Power Apps

Display data in organized, visual layouts with gallery components. These ready-made galleries help you show project lists, data tables, and structured information beautifully.

When to use gallery components

Gallery components are pre-styled data displays that you can customize and connect to your data sources. They save you time compared to building galleries from scratch.

Choose your gallery style

Project Gallery

Card-based layout showing projects with title, status, and priority columns. Clean horizontal rows with data organized in columns.

Best for: Project management dashboards, task trackers, work item lists, and any data with status/priority fields.

Settings you can customize:

• Data items (project name, status, priority)
• Column configuration (labels, widths)
• Card styling (border radius, padding)
• Font sizes and families
• Border visibility

Clean Data Table

Professional minimal data table with clean rows and customizable columns. Includes an optional "Add" button.

Best for: User directories, contact lists, inventory, and any tabular data that needs a clean, professional look.

Settings you can customize:

• Table data (rows and values)
• Column configuration (keys, labels, widths)
• Add button visibility and text
• Row styling

Implementation steps

1. Select your gallery style

Go to Gallery and choose the layout that best fits your data type.

2. Configure the gallery

Click on your chosen component and use the Settings tab to set up:

• Data items - Preview data to see how it looks
• Columns - Define which fields show and their order
• Styling - Adjust borders, padding, and typography
• Actions - Configure add button if needed

3. Copy YAML code

Switch to the YAML tab and copy the generated Power Apps code to your clipboard.

4. Paste into Power Apps

Open Power Apps Studio, right-click in the Tree view, and select "Paste code".

Connect to your data source

After pasting, replace the sample data with your actual data source:

Bind to SharePoint list

// Replace Items property with your data source
Projects

// Or with filter
Filter(Projects, Status.Value = "In Progress")

Bind to Dataverse table

// Connect to Dataverse
[@Projects]

// With sorting
Sort([@Projects], 'Created On', Descending)

Display dynamic columns

// In gallery item, reference your columns
ThisItem.Title
ThisItem.Status
ThisItem.Priority

Add click actions

// Navigate to detail on row click
Navigate(
    ProjectDetail, 
    ScreenTransition.Cover,
    {SelectedProject: ThisItem}
)

Filter the gallery

// Filter by dropdown selection
Filter(
    Projects,
    If(
        IsBlank(drpStatus.Selected.Value),
        true,
        Status.Value = drpStatus.Selected.Value
    )
)

Common use cases

Project dashboard

Use Project Gallery to show all projects with their status (In Progress, Completed, On Hold) and priority levels.

Team directory

Use Clean Data Table to list team members with name, title, email, and role columns.

Task tracker

Use Project Gallery to display tasks, replacing columns with Task Name, Assigned To, and Due Date.

Inventory list

Use Clean Data Table for product inventory with columns for Product, SKU, Quantity, and Location.

Order management

Use Project Gallery with columns for Order ID, Customer, Status, and Amount.

Best practices

• Match columns to data - Update column configuration to match your actual data fields
• Keep it scannable - 3-5 columns is ideal, more becomes hard to read
• Use meaningful labels - "Project Name" not "Field1"
• Consider row actions - Add click handlers for navigation or editing
• Handle empty states - Show a message when no data matches filters
• Optimize for scrolling - Set appropriate heights for your data volume

Troubleshooting

Data not displaying

Check that your Items property points to a valid data source and that column keys match your actual field names.

Columns misaligned

Verify column width values add up correctly. Use percentages or relative widths that total 100%.

Gallery too tall/short

Adjust the height property in settings or directly in Power Apps Studio after pasting.

Click actions not working

Make sure OnSelect is set on the gallery template, not the gallery itself. Use ThisItem to reference the clicked row's data.

Styling differences

The generated YAML uses standard Power Apps properties. Some styling may render slightly different than the preview - adjust in Power Apps Studio as needed.