Power Apps Galleries Forms and Controls Deep Dive

Three controls carry most of the weight in any canvas app: the Gallery, the Form, and the controls that make up a form's individual fields. Understanding these three deeply — how they connect to data, how they relate to each other, and how to customize their behavior — puts you ahead of most Power Apps beginners. This topic goes beyond the surface and into the details that make apps feel professional and work reliably.

The Gallery Control: Your App's List View

A Gallery displays a repeating list of records from a data source. Each row in the gallery shows the same template — a small card — repeated once for every record. The gallery is where users browse data, search for items, and tap to select something they want to view or edit.

Gallery Layout Options

GALLERY LAYOUT TYPES

Vertical Gallery (most common):
┌────────────────────────────┐
│ Record 1 details here   ▶ │
├────────────────────────────┤
│ Record 2 details here   ▶ │
├────────────────────────────┤
│ Record 3 details here   ▶ │
└────────────────────────────┘
(Scrolls up/down)

Horizontal Gallery:
┌──────────┬──────────┬──────────┐
│ Record 1 │ Record 2 │ Record 3 │ ←→ (scrolls left/right)
└──────────┴──────────┴──────────┘

Flexible Height Gallery:
Each row is as tall as its content needs to be
(different rows can have different heights)
Good for: chat messages, variable-length descriptions

Blank Gallery (you design every element from scratch):
Gives maximum control over the template

The Gallery Template: What Gets Repeated

The gray/outlined section inside the gallery is the template — it represents one record. Everything you place inside the template repeats for every row. Click inside the gallery (not on its border) to select the template, then insert controls into it.

GALLERY TEMPLATE ANATOMY

┌─ Gallery Border ─────────────────────────────────────────┐
│ ┌─ Template (one row) ─────────────────────────────────┐ │
│ │ [Icon] Title Label           Status Badge       [▶] │ │
│ │        Subtitle Label                                │ │
│ └──────────────────────────────────────────────────────┘ │
│ ┌── Template repeats ──────────────────────────────────┐ │
│ │ [Icon] Title Label           Status Badge       [▶] │ │
│ └──────────────────────────────────────────────────────┘ │
│ ┌── Template repeats ──────────────────────────────────┐ │
│ │ [Icon] Title Label           Status Badge       [▶] │ │
│ └──────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────┘

Inside the template, every control references the current row's data using ThisItem. ThisItem.Title shows the Title field of whichever row that instance of the template is rendering. ThisItem.Status shows that row's Status. You never need to specify which row — Power Apps handles the iteration automatically.

Key Gallery Properties

Items     = The data source or formula that fills the gallery
             Filter( 'Service Requests', Status = "Open" )

Selected  = The record the user last tapped (Gallery1.Selected)

OnSelect  = What happens when a user taps a row
             Navigate( DetailScreen, ScreenTransition.Slide )

TemplatePadding = Spacing inside each row template (pixels)
TemplateSize    = Height of each template row (pixels)

AllowScrolling = true/false (whether gallery scrolls)
Default       = Which record is pre-selected when the app opens

Highlighting the Selected Row

A common UX requirement is to highlight the currently selected row so users know what they have tapped. Set the Fill property of any control inside the gallery template:

Fill = If( ThisItem.IsSelected, RGBA(0, 120, 212, 0.1), RGBA(0,0,0,0) )

IsSelected is a special property Power Apps sets automatically on each template row.
True for the selected row, false for all others.
The formula gives a light blue tint to the selected row and transparent fill to the rest.

Building a Search + Filter Combination

Scenario: Search bar + Status dropdown filter on a browse screen.

SearchBox (Text Input)
StatusFilter (Dropdown, Items: ["All", "Open", "In Progress", "Closed"])

Gallery Items formula:
Filter(
    Search( 'Service Requests', SearchBox.Text, "Title", "Description" ),
    StatusFilter.Selected.Value = "All" Or Status = StatusFilter.Selected.Value
)

Reading this formula:
1. Search filters records containing the typed text in Title or Description
2. The outer Filter further narrows by selected status (or shows all if "All" is selected)
3. As either control changes, the gallery updates in real time

The Form Control: Viewing and Editing Records

The Form control is specifically designed for single-record operations — viewing one record in detail, creating a new record, or editing an existing one. Power Apps has two versions: Display Form (read-only) and Edit Form (editable). Both connect to a data source and auto-generate fields for each column.

Connecting a Form to a Record

FORM CONNECTION PATTERN

Step 1: Set the form's DataSource property to your table:
  Form1.DataSource = 'Service Requests'

Step 2: Set the form's Item property to the record to display:
  Form1.Item = Gallery1.Selected
  (Shows the record the user tapped in the gallery)

  For new records: Form1.Item = Defaults('Service Requests')
  (Loads an empty form ready for data entry)

Step 3: Set Mode for Edit Form:
  EditForm1.Mode = FormMode.Edit    // editing existing record
  EditForm1.Mode = FormMode.New     // creating new record
  EditForm1.Mode = FormMode.View    // read-only even in Edit Form

Form Field Cards

Each field in a form is a "card" — a container that includes a label (the field name), an input control (text box, dropdown, date picker, etc.), and an error display. Cards are generated automatically when you connect the form to a data source. You can show, hide, resize, move, and reorder cards without affecting data integrity.

FORM FIELD CARD ANATOMY

┌─── Card: Priority ───────────────────────────────────┐
│  Priority *                    (Label — field name)  │
│  ┌────────────────────────────────────────────────┐  │
│  │ High                                        ▼  │  │  (Dropdown input)
│  └────────────────────────────────────────────────┘  │
│  ⚠ Please select a priority level                   │ (Error label — shows if invalid) 
└──────────────────────────────────────────────────────┘

The * indicates this field is required (set in Dataverse column settings)

Saving and Resetting Forms

SAVE (submit the form to the data source):
SubmitForm( EditForm1 )

This triggers:
1. Validation — checks all required fields and data types
2. If valid: saves to the data source (Patch happens internally)
3. OnSuccess runs (navigate away, show success message)
4. If invalid: shows error messages on each invalid card

RESET (clear the form back to blank or to original values):
ResetForm( EditForm1 )

NEW (switch to new-record mode):
NewForm( EditForm1 )

EDIT (switch to edit mode for the current item):
EditForm( EditForm1 )

OnSuccess and OnFailure Events

Edit Form has two important event properties: OnSuccess (runs after a successful save) and OnFailure (runs when validation fails or the data source rejects the save).

EditForm1.OnSuccess:
Notify("Request submitted successfully!", NotificationType.Success);
Navigate( BrowseScreen, ScreenTransition.Slide )

EditForm1.OnFailure:
Notify("Save failed. Please check all required fields.", NotificationType.Error)

Unlocking Cards for Full Customization

By default, form field cards are locked — you cannot change most of their internal properties. Unlock a card by selecting it and clicking the Lock icon in the top-right corner of the Properties panel (or right-clicking → Unlock). Once unlocked, you can edit the internal controls — the text input, the dropdown, the date picker — and apply custom formulas to them.

Custom Validation Example

Scenario: Show an error if someone enters a past date in the "Due Date" field.

After unlocking the Due Date card, set the error label's Visible property to:
DatePicker1.SelectedDate < Today()

Set the error label's Text property to:
"Due date cannot be in the past."

Now the error appears immediately as the user picks an invalid date — 
before they even click Save. Power Apps handles this client-side validation
in real time, with no back-and-forth to the server.

The Combo Box: Advanced Dropdown

The standard Dropdown control shows a fixed list. The Combo Box control lets users both select from a list and type to search within it — ideal for large lists where scrolling through every option is impractical.

COMBO BOX vs. DROPDOWN

Dropdown:
┌─────────────────────────────┐
│ Select Department        ▼  │  ← tap to open list of 5–10 options
└─────────────────────────────┘

Combo Box:
┌─────────────────────────────┐
│ Type to search...           │  ← user can TYPE to filter 500 options
└─────────────────────────────┘
│ Engineering                 │  ← matching options appear as you type
│ English Literature          │
│ Enterprise Architecture     │
└─────────────────────────────┘

Combo Box Items: Office365Users.SearchUser({ searchTerm: ComboBox1.SearchText }).value
→ Searches your entire Microsoft 365 directory as the user types

The People Picker Pattern

A very common requirement in business apps is letting users assign a record to another person — a "People Picker." Build it with a Combo Box connected to the Office 365 Users connector.

People Picker Setup:

ComboBox_Assignee.Items: 
  Office365Users.SearchUser({ searchTerm: ComboBox_Assignee.SearchText }).value

ComboBox_Assignee.DisplayFields: ["DisplayName"]
ComboBox_Assignee.SearchFields: ["DisplayName", "Mail"]

Then save the selected person with Patch:
Patch( 'Service Requests',
    Defaults('Service Requests'),
    {
        Title: TitleInput.Text,
        AssignedToEmail: ComboBox_Assignee.Selected.Mail,
        AssignedToName: ComboBox_Assignee.Selected.DisplayName
    }
)

The Camera Control: Taking Photos in the Field

For field inspection apps, incident reporting apps, or any scenario where users need to capture photos, the Camera control turns the device camera into a direct app input.

CAMERA WORKFLOW

Screen has:
  Camera1 (shows live camera preview)
  Button "Capture Photo"
  Image1 (shows the captured photo)

Button OnSelect:
  Set( CapturedPhoto, Camera1.Photo )   // Save photo to variable

Image1.Image = CapturedPhoto           // Display the captured photo

Then save to Dataverse (Image column):
Patch( 'Inspections',
    Defaults('Inspections'),
    { SitePhoto: CapturedPhoto }
)

The Timer Control: Automated Actions

The Timer control counts seconds and fires an event when it completes. Use it for auto-refreshing data, auto-saving drafts, or showing time-limited notifications.

Auto-refresh gallery every 60 seconds:

Timer1.Duration = 60000       // 60,000 milliseconds = 60 seconds
Timer1.Repeat   = true        // Keep repeating
Timer1.AutoStart = true       // Start automatically when screen opens
Timer1.OnTimerEnd = Refresh( 'Service Requests' )   // Refresh data

The gallery updates silently in the background while the user works.

Accessibility in Power Apps Controls

Power Apps supports accessibility properties on every control — important for apps used by employees with visual or motor impairments, and required by many government and enterprise policies.

ACCESSIBILITY PROPERTIES

AccessibleLabel: "Priority dropdown — select request priority"
→ Screen readers announce this text when the control gets focus

TabIndex: 1, 2, 3, ...
→ Controls the order that Tab key navigation follows

Live: "polite" or "assertive"
→ For screen readers: "polite" waits for a pause, "assertive" interrupts
→ Use "assertive" on error messages, "polite" on status updates

Role: 
→ Tells screen readers what kind of element this is
→ Button, Heading, List, Status, etc.

Component Library: Reusable Controls

When you build multiple apps, you find yourself recreating the same pieces repeatedly — a custom header bar, a branded button style, a status badge that shows color-coded text. Power Apps Components let you build these elements once and reuse them across apps.

COMPONENT CONCEPT

Without Components:           With Components:
App 1: Header (copy-paste)    ComponentLibrary
App 2: Header (copy-paste)    └── Header Component (one definition)
App 3: Header (copy-paste)         ↑ used by App 1, 2, and 3

When you update the Component, all apps using it can be updated at once.
Component supports:
  - Input properties (parameters you pass in)
  - Output properties (values the component sends back)
  - Custom behaviors (formulas that run on events)

Key Points

  • The Gallery template repeats for every record. Use ThisItem to reference the current row's fields inside the template. Use IsSelected to highlight the tapped row.
  • Combine Search and Filter in the gallery's Items property to build real-time search with dropdown filters — both update the gallery simultaneously.
  • Form controls connect to a data source (DataSource property) and a specific record (Item property). Use SubmitForm to save, ResetForm to clear, NewForm for new records, and EditForm to enter edit mode.
  • Unlock form field cards to customize internal controls and apply custom client-side validation.
  • The Combo Box lets users type to search long lists — essential for user/employee picker scenarios with the Office 365 Users connector.
  • The Camera control captures photos directly from the device camera and saves them to Image columns in Dataverse.
  • The Timer control auto-refreshes galleries and triggers timed actions without any user interaction.
  • Build Component Libraries for reusable UI elements — maintain them once, update everywhere.
Previous lessons
Back to courses
Next lessons

Leave a Comment