Controls, Responsive Design, and Copilot

What are controls?

Common controls you need to know

Here are the controls that appear most often on the PL-900 exam:

Control	What it does	Example use
Gallery	Displays a scrollable list of records	Show all campaigns, properties, or tasks
Edit Form	Displays fields for creating or editing a record	New campaign form, tenant details
Display Form	Shows record data in read-only mode	View campaign details without editing
Button	Triggers an action when tapped	Submit, navigate, save, delete
Text Input	Lets users type text	Search box, name field, comments
Dropdown	Shows a list of options to pick from	Select a category, status, or department
Date Picker	Lets users select a date	Due date, start date, event date
Label	Displays read-only text	Headers, instructions, calculated values
Image	Shows a picture	Company logo, product photo, user avatar
Toggle	On/off switch	Enable notifications, mark as complete
Icon	Clickable icon for actions	Edit pencil, delete trash can, navigation arrows
Data Table	Shows data in a simple grid	Quick tabular display without gallery formatting

ℹ️ Gallery vs Data Table

Both show lists of data, but they are very different:

• Gallery — fully customisable. You design each row’s layout with labels, images, icons, and buttons. Supports templates and conditional formatting. The go-to control for most list displays.
• Data Table — simple grid view, like a spreadsheet. Less customisation but quicker to set up. Good for internal tools where aesthetics matter less.

Exam tip: If a question asks about displaying a list with custom layout, the answer is Gallery. If it mentions simple tabular data, think Data Table.

Power Fx in context

Here is how formulas connect to controls in Priya’s campaign tracker:

Control	Property	Formula	What it does
Gallery	Items	Filter(Campaigns, Status = "Active")	Shows only active campaigns
Button	OnSelect	Navigate(NewCampaignScreen)	Opens the new campaign form
Label	Text	"Total: " & CountRows(Campaigns)	Shows the total campaign count
Text Input	OnChange	Set(searchTerm, Self.Text)	Stores the typed text in a variable
Form	Item	Gallery1.Selected	Displays the record selected in the gallery
Button	OnSelect	SubmitForm(EditForm1)	Saves the form data to the data source

💡 What is Self in Power Fx?

Self refers to the control the formula is written on. If you write Self.Text on a text input’s OnChange property, it means “the text currently typed in this text input.”

This is useful because you don’t need to remember the control’s name. Self always points to the control you are editing.

Responsive design with containers

The old way vs the new way

Containers make responsive design much easier

Feature	Classic Layout (Old)	Container Layout (New)
How you position controls	Set exact X, Y coordinates	Controls flow inside containers
Different screen sizes	You manually reposition everything	Containers auto-adjust layout
Alignment	Eyeball it or do math	Set alignment rules — centre, stretch, start, end
Adding new controls	Manually make room by moving others	Container makes room automatically
Think of it as	Absolute positioning (like old websites)	Flexbox (like modern web design)

How containers work

A container is a control that holds other controls inside it. You set rules for how children are arranged:

• Direction — horizontal (side by side) or vertical (stacked)
• Alignment — centre, start, end, stretch
• Gap — space between child controls
• Wrap — whether items wrap to the next line when space runs out

Carlos Reyes at Greenleaf Health built an employee directory app. On a phone, the profile photo stacks above the details. On a tablet, they sit side by side. Same app, same controls — the container just rearranges them based on screen width.

ℹ️ Responsive design exam tip

The exam tests whether you know that containers are the modern way to build responsive Power Apps. Key points:

• Containers replace the old fixed-position layout
• They support horizontal and vertical arrangements
• Child controls resize and reflow automatically
• You set properties like alignment, gap, and padding instead of X/Y coordinates

If a question asks about building apps that work on both phones and tablets, the answer involves containers.

Copilot control: AI in your apps

The Copilot control is a chat-based AI component you can add to any canvas app. It gives your app users a conversational AI assistant powered by the data in your app.

What the Copilot control can do:

Capability	Example
Answer questions about app data	”How many campaigns are active this month?”
Filter and find records	”Show me all overdue maintenance requests”
Summarise information	”Summarise the status of the Johnson property”
Natural language interaction	Users type questions instead of clicking filters

Priya added the Copilot control to her campaign tracker. Now her team can type questions like “Which campaigns are over budget?” and get instant answers without navigating through screens.

💡 Copilot control vs Copilot Studio

These are related but different:

• Copilot control in Power Apps — a single UI component you drop into a canvas app. It answers questions about the data in that app.
• Copilot Studio — a platform for building full chatbot agents with custom topics, plugins, and multi-channel deployment.

Think of the Copilot control as a quick-add AI assistant for one app. Copilot Studio is for building standalone AI agents.

🎬 Video walkthrough

🎬 Video coming soon

Controls, Containers, and Copilot — PL-900 Domain 3

Controls, Containers, and Copilot — PL-900 Domain 3

~11 min

Flashcards

Question

What is a Gallery control in Power Apps?

Click or press Enter to reveal answer

Answer

A scrollable list that displays multiple records from a data source. Each row can be customised with labels, images, icons, and buttons. The most common control for displaying lists.

Click to flip back

💡 Show hint

Question

What is the modern way to build responsive canvas apps?

Click or press Enter to reveal answer

Answer

Use containers. Containers hold controls and automatically arrange them based on rules (direction, alignment, gap, wrap). They replace the old fixed X/Y positioning method.

Click to flip back

💡 Show hint

Question

What does the Copilot control do in a canvas app?

Click or press Enter to reveal answer

Answer

It adds a chat-based AI assistant to your app. Users can ask natural language questions about the app's data, like 'Show me overdue items' or 'How many tasks are complete?'

Click to flip back

💡 Show hint

Question

What Power Fx formula would you use to show only active campaigns in a Gallery?

Click or press Enter to reveal answer

Answer

Set the Gallery's Items property to: Filter(Campaigns, Status = 'Active')

Click to flip back

💡 Show hint

Knowledge Check

Knowledge Check

Carlos wants his app to automatically rearrange controls when switching from a phone to a tablet. What should he use?

ACreate two separate apps — one for phone and one for tabletBUse containers with responsive layout settingsCSet controls to fixed X/Y positions that work on all devicesDUse a Gallery control to display all content

Check Answer

Knowledge Check

What does the Copilot control add to a canvas app?

AAutomatic code generation for Power Fx formulasBA chat-based AI assistant that answers questions about the app's dataCAutomated testing of app functionalityDA drag-and-drop AI model builder

Check Answer

Knowledge Check

Which control should Priya use to display a scrollable list of campaigns where each row shows the campaign name, status badge, and budget amount?

AData Table — it is the best for structured dataBForm — it handles multiple fields per recordCGallery — it supports custom row layouts with multiple controlsDDropdown — it shows a list of options

Check Answer

---

Next up: Sharing canvas apps — how to get your app into the hands of users, with the right permissions.