1. Introduction to Power Apps Controls

Power Apps allows users to create low-code applications for web and mobile. Two commonly used controls for displaying data are:

Gallery: Flexible, interactive, customizable
DataTable: Tabular, Excel-like, structured and read-only

2. Gallery Control

What is a Gallery?

A Gallery displays multiple records from a data source in a repeatable format (card or list). You can fully control what fields appear, the layout, and even include buttons, icons, and images.

Description

Types of Galleries

Vertical Gallery – scrolls top to bottom
Horizontal Gallery – scrolls left to right
Flexible Height Gallery – dynamic height based on content
Blank Gallery – start from scratch

Step-by-Step: Implement a Gallery

Step 1: Create App

Go to https://make.powerapps.com
Create Canvas App (Tablet or Phone)

Step 2: Add Data Source

Click Data > + Add Data
Select Excel, SharePoint, SQL, Dataverse, etc.
Example: (SharePoint list)

Data table image

Step 3: Insert Gallery

Insert > Gallery > Vertical (recommended)

Set Items:

'expense-items' // Data source name

For viewing only their own expenses.

Filter('expense-items', Email.Email = User().Email)

Step 4: Customize Template

Image control:

Column type Image
```
ThisItem.'Receipt-image'
```
Column type Attachments
```
First(ThisItem.Attachments).Value
```

Label ( Name ): set Text
```
ThisItem.Name
```
Label ( Email ): set Text

Column type Text
```
ThisItem.Email
```
Column type Person
```
ThisItem.Email.Email
```

Label ( Amount ): set Text
```
ThisItem.Amount
```

Add some text
```
"Amount: $" & Text(ThisItem.Price)
```
set Color
```
RGBA(221, 79, 14, 1)
```

Label ( Status ): set Text

Column type Choice
```
ThisItem.Status.Value
```
Set dynamic Fill color
```
ThisItem.Status.Value
```

Button or icon (optional)

Output Gallery:

Filtering and Search

Add a TextInput (txtSearch) for searching:

Filter(
    'expense-items',
    Email.Email = User().Email &&
    (IsBlank(TextInput.Text) || StartsWith(Text(Amount), TextInput.Text))
)

Filter(
    'expense-items',
    Email.Email = User().Email &&
    (IsBlank(TextInput1.Text) || Amount = Value(TextInput1.Text))
)

First, this formula is correct in structure:

Filter(...): filters records from a data source
'expense manager': your data source
Title: a column in the data source
TextInput.Text: the input from a Text Input control
StartsWith(...): used for case-insensitive search starting with the string

Insert another screen (EditScreen)

Set button/icon OnSelect in gallery:

Navigate(EditScreen)

Use screen transition:

Navigate(EditScreen, ScreenTransition.Fade)

3. DataTable Control

What is a DataTable?

A DataTable presents data in a grid layout similar to Excel. It is read-only and automatically generates columns based on the data source.

When to Use a DataTable

Data Table

Step-by-Step: Implement a DataTable

Step 1: Insert a DataTable

Insert > Layout > DataTable

Step 2: Bind Data

DataTable.Items = 'expense-items'

Step 3: Configure Columns

Select DataTable
Right panel → Edit Fields
Choose:

Name
Email
Amount
Status
Attachment

Output:

Filtering

Add filtering using a text input (txtSearch):

Filter(
    'expense-items',
    Email.Email = User().Email &&
    (IsBlank(TextInput.Text) || StartsWith(Text(Amount), TextInput.Text))
)

Filter(
    'expense-items',
    Email.Email = User().Email &&
    (IsBlank(TextInput1.Text) || Amount = Value(TextInput1.Text))
)

4. Combined Use: Gallery + DataTable

Use Case

Gallery: visually display product catalog with image
DataTable: show all products in a report-like grid

App Layout

+------------------------------+---------------------+
| 🔍 Search Box                | 🔍 Search Box       |
|                              |                     |
| 📦 Gallery View (Left)       | 📊 DataTable (Right)|
+------------------------------+---------------------+

Both share the same Items property:

Filter('expense manager', StartsWith(Title, TextInput.Text))

Gallery and DataTable