✦ BeginnerCanvas AppsDataversePower Apps11 min readFebruary 2025

How to Create a Canvas App in Power Apps: A Step-by-Step Guide

Learn how to build your first Canvas App in Power Apps from scratch. This comprehensive guide walks you through every step—from creating a blank app to understanding controls, properties, and formulas that bring your app to life.

Rob Lees

Founder & Principal Consultant

Overview

Canvas Apps provide complete design freedom to build custom business applications without writing traditional code. This guide covers the fundamentals of Canvas App creation, from navigation and layout to properties, formulas, and controls.

Prerequisites

Power Apps licence (Office 365 E3/E5, standalone, or trial)
Access to a Power Apps environment (not Default)
Basic understanding of Microsoft 365
Familiarity with Excel-style formulas is helpful but not required

Creating Your First Canvas App

Canvas Apps are built on a blank canvas where you control every pixel. Unlike Model-Driven Apps which generate UI from data structure, Canvas Apps let you design exactly what users see and how they interact with your application.

There are two entry points for creating a Canvas App:

From a data source – Power Apps generates a three-screen app automatically based on your data (galleries, forms, detail screens)
From a blank canvas – You start with an empty screen and build everything from scratch

This guide focuses on building from a blank canvas, which gives you complete control and helps you understand how Canvas Apps actually work under the hood.

💡 Before You Start

Make sure you're working in a dedicated Development or Sandbox environment—never build directly in Production or the Default environment. This protects live systems and gives you a safe space to experiment.

Creating a Blank Canvas App

Navigate to make.powerapps.com and ensure you've selected the correct environment from the environment picker in the top-right corner.

Click + Create from the left navigation menu
Select Blank app from the available templates
Choose Blank canvas app (not Model-Driven)
Give your app a descriptive name like "Asset Tracker" or "Leave Request App"
Select the format: Tablet or Phone
Click Create to launch the Canvas App studio

The studio will open within a few seconds, presenting you with a blank screen and the Power Apps authoring interface.

Navigating the Canvas App Studio

The Canvas App studio is divided into several key areas that you'll use constantly during development:

Interface Element	Location	Purpose
Command bar	Top of screen	Save, publish, settings, and preview controls
Tree view	Left panel	Hierarchical view of all screens and controls
Canvas	Centre area	Visual design surface where you build your UI
Properties pane	Right panel	Control settings, styling, and behaviour configuration
Formula bar	Above canvas	Where you write formulas for selected control properties

The Tree View on the left shows your app's structure hierarchically. You'll see screens, and within each screen, all the controls you've added. This is the quickest way to select controls that might be hidden behind other elements on the canvas.

The Formula Bar works similarly to Excel—you select a control, choose a property (like Text, Visible, or OnSelect), then write a formula that determines the behaviour of that property.

Using the Properties Pane

The Properties pane on the right side of the studio is where you configure control behaviour without writing formulas. It provides a visual interface for the most common settings.

Key sections in the Properties pane:

Properties – Basic settings like control name, size, and position
Advanced – Access to all properties including formula-based ones
Data – Connect controls to data sources
Design – Visual styling (colours, fonts, borders)

For rapid development, use the Properties pane to set visual styling and basic behaviour. Switch to the Formula Bar when you need conditional logic, calculations, or complex interactions.

💡 Pro Tip

The Properties pane only displays properties that can be configured visually. Some advanced properties (like OnSelect actions or complex visibility rules) must be set using formulas in the Formula Bar.

Canvas App Formulas Explained

Canvas Apps use an Excel-like formula language called Power Fx. If you've used Excel formulas, you'll recognise the syntax immediately.

Common formula patterns:

Formula Type	Example	Use Case
Text concatenation	`"Hello " & User().FullName`	Personalised greetings and dynamic labels
Conditional display	`If(Toggle1.Value, true, false)`	Show/hide controls based on user input
Navigation	`Navigate(Screen2, ScreenTransition.Fade)`	Move between screens with transitions
Data filtering	`Filter(Assets, Status = "Active")`	Display subsets of data in galleries
Variable assignment	`Set(varUserRole, "Manager")`	Store values for use across the app

Formulas are always written in the context of a specific property. For example, setting the Text property of a label to User().FullName displays the current user's name. Setting the OnSelect property of a button to Navigate(Screen2) makes that button navigate to Screen2 when clicked.

Key differences from Excel:

Use semicolons (;) to separate multiple statements within one formula
Reference controls by name: TextInput1.Text instead of cell references like A1
Actions like Navigate(), Patch(), and Remove() modify app state—they don't return values

Working with Canvas App Controls

Controls are the building blocks of your Canvas App. Every button, text input, label, and image is a control that you configure with properties and formulas.

Adding a control to your screen:

Click + Insert from the left toolbar
Browse or search for the control type you need
Click the control to add it to the canvas
Drag and resize it to position it on your screen

Most commonly used controls:

Label – Display static or dynamic text
Text input – Capture user-entered text
Button – Trigger actions when clicked
Gallery – Display lists of data from a data source
Form – Create or edit records in a data source
Dropdown – Let users select from predefined options
Date picker – Capture date values with a calendar interface
Image – Display uploaded images or URLs
Icon – Add visual elements and clickable symbols

Each control has dozens of properties. The most important ones are:

Visible – Controls whether the element appears on screen
DisplayMode – Sets whether users can interact (Edit) or only view (View)
OnSelect – Defines what happens when a user clicks the control (buttons only)
Default – Sets the initial value for inputs and dropdowns

Managing Screens in Canvas Apps

Most Canvas Apps use multiple screens to separate different functions—a welcome screen, a form for data entry, a gallery to browse records, and detail screens to view individual items.

Adding a new screen:

Click New screen in the Tree View (left panel)
Choose a template (Blank, Scrollable, Form, etc.)
Rename the screen to something descriptive like HomeScreen or NewRequestScreen

Navigating between screens:

Use the Navigate() function in a button's OnSelect property:

Navigate(RequestDetailScreen, ScreenTransition.Cover)

Available screen transitions:

ScreenTransition.Cover – New screen slides in from right
ScreenTransition.Fade – Smooth fade between screens
ScreenTransition.None – Instant switch with no animation
ScreenTransition.UnCover – Current screen slides out to reveal next

⚠️ Performance Consideration

Too many screens can slow down app load times. If you find yourself creating 15+ screens, consider using components to reuse UI elements or rethink your app structure to use dynamic galleries and forms instead of dedicated screens for each record.

Designing on the Canvas

The canvas is your visual workspace where you design what users will see. It's a pixel-perfect design surface—what you see in the studio is exactly what users will see when they run the app.

Canvas design techniques:

Align controls precisely – Use the alignment tools in the top toolbar (Align Left, Align Top, Distribute Horizontally)
Snap to grid – Enable grid snapping from Settings → Display to ensure consistent spacing
Layer controls – Use "Reorder" in the Tree View to control which elements appear in front
Group related controls – Right-click multiple selected controls and choose "Group" to move them together

The canvas automatically scales to the format you chose when creating the app (Tablet or Phone). Design for your target device—a tablet layout won't display well on mobile without significant rework.

Working with Galleries

Galleries are the most powerful control in Canvas Apps. They display repeating data from a data source—think of them as templated lists where each item follows the same visual structure.

Types of galleries:

Blank vertical – Empty template you customise completely
Blank horizontal – Side-scrolling version of blank vertical
Title, subtitle, and body – Pre-built template with three text fields

Configuring a gallery:

Add a gallery to your screen from Insert → Gallery
Set the Items property to your data source (e.g., a SharePoint list, Dataverse table, or collection)
Click "Edit" (pencil icon) on the gallery to enter template edit mode
Customise the first item—this becomes the template for all items
Reference fields using ThisItem.FieldName syntax

Example: Displaying a list of assets from Dataverse

// Gallery Items property
Assets

// Title label Text property inside gallery template
ThisItem.AssetName

// Subtitle label Text property
ThisItem.Location & " - " & ThisItem.Status

Galleries automatically repeat your template for each record in the data source. Changes to the template apply to all items instantly.

Building Forms for Data Entry

Forms provide a structured way to create or edit records in a data source. They automatically generate input fields based on the columns in your connected data source.

Form modes:

Mode	Purpose	Typical Use
`FormMode.New`	Create a new record	Add new asset form
`FormMode.Edit`	Modify an existing record	Update asset details form
`FormMode.View`	Display record in read-only mode	Asset detail screen

Setting up a basic form:

Add a form control to your screen (Insert → Forms → Edit Form)
Set the DataSource property to your data source
Choose which fields to display using "Edit fields" in the Properties pane
Set the Item property to the specific record you're editing (often Gallery1.Selected)
Add a submit button with SubmitForm(Form1) in its OnSelect property

Example: Creating a new asset record

// Form mode property
FormMode.New

// Submit button OnSelect
SubmitForm(AssetForm); Navigate(HomeScreen)

Using Variables to Store Data

Variables let you store temporary data in your app's memory. They're essential for tracking user selections, storing calculation results, and controlling app behaviour.

Types of variables in Canvas Apps:

Variable Type	Function	Scope	Use Case
Global	`Set(varName, value)`	All screens	User role, app settings
Context	`UpdateContext({varName: value})`	Current screen only	Temporary selections, form state
Collection	`Collect(colName, {data})`	All screens	Lists of items, cached data

Variable naming conventions:

Global variables: varUserRole, varSelectedDate
Context variables: locIsEditing, locFormMode
Collections: colActiveAssets, colFilteredRequests

Example: Tracking user role on app start

// App OnStart property
Set(varUserRole, 
    If(User().Email = "manager@company.com", 
       "Manager", 
       "User"
    )
)

💡 Pro Tip

Prefix your variables consistently (var for global, loc for context, col for collections). This makes it immediately obvious what scope a variable has when you're debugging formulas weeks after writing them.

Testing and Debugging Canvas Apps

Testing your Canvas App before publishing is critical. The preview mode lets you interact with the app exactly as end users will.

Running the app in preview mode:

Click the Play button (▶) in the top-right corner
Interact with your app as a user would
Click the X in the top-right to return to edit mode

Common issues to check during testing:

Do all buttons navigate to the correct screens?
Do forms save data to the data source correctly?
Are galleries displaying the expected records?
Do conditional visibility rules work as intended?
Are error messages displayed when validation fails?

Using the Monitor tool for debugging:

The Monitor shows every action your app takes in real-time—data calls, navigation events, formula calculations, and errors.

Click Advanced tools → Monitor from the top menu
Click Play published app to run the app with monitoring enabled
Watch the Monitor panel as you interact with the app
Look for red error messages or unexpected data responses

The Monitor is invaluable for tracking down why a gallery isn't displaying data, why a form won't submit, or why a navigation action isn't firing.

Saving and Publishing Your App

Canvas Apps autosave every two minutes, but you should manually save after completing significant changes.

Save vs. Publish:

Save – Creates a new version in your development environment. Only you can see these changes.
Publish – Makes the app available to users you've shared it with. This is the version they'll see when they open the app.

Publishing your app:

Click File → Save to ensure all changes are saved
Click Publish from the File menu
Add version notes describing what changed (e.g., "Added asset search functionality")
Click Publish this version

Once published, users with whom you've shared the app can access the new version immediately.

⚠️ Version Control

Power Apps stores the last 20 versions of your app. If you publish a breaking change, you can restore a previous version from File → See all versions. Always test thoroughly before publishing to Production.

Building on the Fundamentals

You've now created your first Canvas App and understand the core concepts of screens, controls, formulas, and properties. From here, focus on these essential next steps:

Connect to real data sources – Link your app to SharePoint lists, Dataverse tables, or SQL databases
Master Power Fx formulas – Learn advanced functions like Filter(), Patch(), and LookUp()
Implement proper error handling – Use IfError() and validation rules to handle bad data gracefully
Apply consistent styling – Create a theme and use it across all controls for a professional appearance
Optimise performance – Understand delegation limits and query optimisation for large datasets

The official Microsoft Power Apps documentation provides deeper guidance on advanced topics like components, responsive design, and accessibility.