Building Canvas Apps in Power Apps

Canvas apps empower users to design custom business applications with pixel-perfect control over user interfaces. It is a key tool for modern business solutions with

Drag-and-drop simplicity,
Deep integration with Microsoft and third-party services,
Low-code development using Power Fx.

Understanding the PowerApps Studio

PowerApps Studio is the integrated development environment (IDE) in which canvas apps are created and managed. It provides a rich visual designer that allows you to drag and drop controls like labels, buttons, galleries, and forms.

PowerApps Studio is used for customizing UI layouts with themes, alignment, colors, spacing and configuring behavior using Power Fx formulas. It allows you to preview and test the app in real time.

Key Areas of PowerApps Studio:

The key areas of Power apps Studio are:

Tree View: displays the app structure including screens, controls, and data sources.
Properties Pane: adjusts properties like size, color, text, and actions.
Formula Bar: allows writing formulas using Power Fx for dynamic logic.
Screens Pane: manages multiple screens representing app pages or workflows.

Creating Screens and Adding Controls

Canvas apps begin with creating screens which are the basic containers for UI content. To create screens, navigate to Insert > New Screen and choose from screen templates like Blank, Scrollable, or Form-based.

PowerApps offers a wide range of controls such as:

Labels: display static or dynamic text.
Buttons: trigger actions like navigation or data submission.
Text Inputs: allow users to enter data.
Dropdowns, Sliders, Checkboxes: provide interactivity.

To add and arrange controls, use Insert from the top menu. Customize the controls using the Properties Pane or by applying Power Fx formulas.

Working with Data Sources

Canvas apps can work with data sources by connecting with over 300 data sources using built-in connectors.

Common Data Sources:

Microsoft Dataverse
SharePoint
SQL Server
Excel
OneDrive
Azure Services
Third-party APIs (e.g., Salesforce, Dropbox)

Connecting a Data Source:
To connect to a data source, Go to Data in the left pane. Click Add Data and choose the source. Authenticate and select tables or entities.

Once connected, use the data in controls like forms and galleries. Use functions like Filter(), Sort(), and LookUp() to manipulate data.

Using Forms, Galleries, and Collections

Forms:
Forms simplify data entry and viewing:

Edit Form: For data input and updating.
Display Form: For read-only data view.

Bind a form to a data source and set the Item property to show/edit a specific record.

Galleries:
Galleries display lists of data.

Vertical, Horizontal, Flexible Height: Layout options for showing records.

Populate with a data source and customize item templates. Use ThisItem to access fields of a specific record.

Collections:
Collections are used to store and manipulate data as temporary, in-memory tables.

ClearCollect(MyCollection, [ {Name: "John", Age: 30}, {Name: "Jane", Age: 25} ])

Use collections when you need to:

Store user-generated data
Cache API data
Group/transform datasets before display

Power Fx (Formulas and Expressions)

Power Fx is the formula language which is tailored for app logic and data manipulation. It is behind canvas apps and similar to Excel formulas.

Common Use Cases:

Navigation:
Navigate(Screen2)
Data filtering:
Filter(Employees, Department = "HR")
Conditional visibility:
If(Toggle1.Value, true, false)
User input handling:
Set(UserName, TextInput1.Text)

Power Fx supports functions for:

Text manipulation (Left, Mid, Upper)
Math (Sum, Round, Abs)
Logical operators (If, Switch, And, Or)
Collection management (Collect, Patch, Remove)

Request more information

Building Canvas Apps in Power Apps