Power Apps Canvas Apps Your First App
A canvas app is like a blank piece of paper that you turn into a working business application. You decide where every button goes, what every screen looks like, and how data flows from one screen to the next. This freedom makes canvas apps the most popular type of Power App — and the best starting point for learning how Power Apps works.
This topic walks you through building your first canvas app from scratch. By the end, you will understand screens, controls, data connections, and the Power Apps formula language well enough to build a functional app for a real use case.
The Canvas App Mental Model
Think of a canvas app the way you think of a PowerPoint presentation with superpowers. Each slide is a screen. On each screen, you place controls — buttons, text boxes, images, galleries, forms. But unlike a PowerPoint slide, each control does something: it reads data, writes data, navigates to another screen, or runs a calculation. The "superpowers" come from formulas you attach to controls — short expressions that define what happens when a user taps a button or types in a box.
The Three-Screen Pattern
Most canvas apps follow a three-screen pattern. Understanding this pattern before you build saves you from confusion about how to organize your app.
THE THREE-SCREEN PATTERN ┌─────────────────┐ tap item ┌─────────────────┐ Edit btn ┌─────────────────┐ │ SCREEN 1 │─────────────────▶│ SCREEN 2 │────────────────▶│ SCREEN 3 │ │ Browse Screen │ │ Detail Screen │ │ Edit Screen │ │ │◀─────────────────│ │◀────────────────│ │ │ Shows a list │ back btn │ Shows one item │ back btn │ Form to create │ │ of all records │ │ in full detail │ │ or edit record │ └─────────────────┘ └─────────────────┘ └─────────────────┘
Screen 1 shows all records in a list (a Gallery control). Screen 2 shows the full details of a record the user tapped. Screen 3 is a form where the user creates a new record or edits an existing one. This pattern covers 80 percent of all business apps. Power Apps can generate all three screens automatically from your data source in about 30 seconds.
Creating a Canvas App From Data
The fastest way to build your first app is to create it directly from a data source. Power Apps generates the three screens automatically, and you customize from there.
Step by Step
Open make.powerapps.com and switch to your developer environment. Click Create from the left sidebar. Click Start with data. Under "Connect to data," choose Dataverse if you want to use a Dataverse table, or choose Excel Online to connect to an Excel file on SharePoint or OneDrive. Select your table or file, click Create, and Power Apps builds a three-screen app for you in about 30 seconds.
If you do not have data yet, click Create, then Blank app, then Blank canvas app. Choose Phone layout (portrait) or Tablet layout (landscape). The phone layout is standard for most field apps. The tablet layout works better for apps used on desktops or with complex multi-column designs.
The Power Apps Studio Interface
Power Apps Studio is where you build your app. It opens in your browser and looks like a design tool. Let us map its major areas.
POWER APPS STUDIO LAYOUT ┌──────────────────────────────────────────────────────────────────────────┐ │ FILE HOME INSERT VIEW SETTINGS [Play ▶] [Save] [Pub] │ ├──────────────────────────────────────────────────────────────────────── │ │ │ │ │ │ TREE │ CANVAS (App Preview) │ PROPERTIES PANEL │ │ VIEW │ ┌──────────────────────────────┐ │ │ │ │ │ │ │ Selected control │ │ Screen1 │ │ Your app screen goes here │ │ settings appear here │ │ └Gal │ │ │ │ │ │ └Btn │ └──────────────────────────────┘ │ Font, Color, Size, │ │ Screen2 │ │ Position, Events │ │ Screen3 │ ┌──────────────────────────────┐ │ │ │ │ │ FORMULA BAR │ │ │ │ │ │ OnSelect = Navigate(Screen2)│ │ │ │ │ └──────────────────────────────┘ │ │ └──────────────────────────────────────────────────────────────────────────┘
The Tree View (left side) shows all screens and all controls on each screen in a hierarchy. The Canvas (center) shows your app preview — you click controls here to select them. The Properties Panel (right side) shows the settings for whichever control you have selected. The Formula Bar (below the menu) is where you type formulas for the selected property of the selected control.
Controls: The Building Blocks of Your Screen
Controls are the individual elements you place on a screen. Power Apps has dozens of controls. These are the ones you will use most often.
Text Controls
The Label control displays text — titles, field values, instructions. The Text Input control lets users type text. You set a label's Text property to a formula that pulls data from your source, and it shows that data automatically.
Gallery Control
The Gallery is the most important control in Power Apps. It shows a repeating list of records from a data source — like a scrollable list of customers, orders, or tasks. Each row in the gallery shows the same template, repeated for every record. You connect the gallery to a data source by setting its Items property.
GALLERY CONTROL (showing Customers) ┌─────────────────────────────────────┐ │ CUSTOMERS 🔍 │ ← Search icon triggers a filter ├─────────────────────────────────────┤ │ 👤 Priya Sharma ▶ │ ← Row 1 (one record) │ Delhi | Customer since 2022 │ ├─────────────────────────────────────┤ │ 👤 James Carter ▶ │ ← Row 2 │ Mumbai | Customer since 2021 │ ├─────────────────────────────────────┤ │ 👤 Liu Wei ▶ │ ← Row 3 │ Bengaluru | Customer since 2023 │ └─────────────────────────────────────┘ Gallery Items property = Customers (or a filtered version: Search(Customers, SearchBox.Text, "name"))
Form Control
The Form control (Edit Form and Display Form) connects to a record from your data source and shows or edits all its fields automatically. You set the Form's DataSource property to your table and its Item property to the selected record, and the form builds itself — one field card per column, in the correct data type format (text box for text, date picker for dates, toggle for yes/no).
Button Control
Buttons trigger actions. The action lives in the button's OnSelect property as a formula. Common actions include navigating to another screen, submitting a form, deleting a record, or sending an email through Power Automate.
Other Useful Controls
The Dropdown control shows a list of choices. The Date Picker lets users pick a date from a calendar. The Toggle control is an on/off switch for yes/no fields. The Image control displays photos from URLs or files. The Camera control takes photos directly from the device camera. The Timer control runs actions after a set number of seconds — useful for auto-refreshing screens.
Power Apps Formulas: Writing Your First One
Power Apps formulas look similar to Excel formulas. They use functions, operators, and references to other controls. The key difference is that Power Apps formulas run in real time — as the user types, taps, or interacts, the formula result updates instantly.
Formula Anatomy
FORMULA STRUCTURE FunctionName( argument1, argument2, argument3 ) Example: Navigate( Screen2, ScreenTransition.Fade ) │ │ │ Function Where to go Animation type Filter( Customers, City = "Delhi" ) │ │ │ Function Table Condition Concatenate( FirstName.Text, " ", LastName.Text ) │ │ │ │ Function Control1 Space Control2
The Most Important Formulas for Beginners
Navigate moves the user to a different screen. Set stores a value in a variable. Patch saves a record to a data source (create or update). Remove deletes a record. Filter returns only records that match a condition. Search finds records where a text column contains a keyword. If checks a condition and returns one value if true and another if false. Collect adds items to a local collection (a temporary list stored in the app's memory).
Example: A Button That Saves a Form
Button: "Save" OnSelect formula: SubmitForm( EditForm1 ); Navigate( BrowseScreen, ScreenTransition.Slide ) Translation: 1. Submit (save) the data in EditForm1 to the data source 2. Then navigate to BrowseScreen with a slide animation
Example: A Search Box That Filters a Gallery
Gallery Items formula: Search( Customers, SearchBox1.Text, "name", "city" ) Translation: Show all customers whose Name OR City contains whatever the user typed in SearchBox1. (As the user types, the gallery filters in real time)
Variables in Power Apps
A variable stores a single piece of information in the app's memory while the user is using it. Variables do not persist when the app closes — they reset. Use variables to track the user's current selection, a toggle state, or a temporary value calculated during the session.
Set: The Global Variable
Set( VariableName, Value ) creates or updates a global variable. It is available on every screen. For example: Set( CurrentUser, User().FullName ) saves the current user's name. Then on any screen, you reference CurrentUser in a label's Text property to show the name.
UpdateContext: The Local Variable
UpdateContext( { VariableName: Value } ) creates or updates a local variable that is available only on the current screen. Use local variables for UI states — like whether a popup is visible or whether edit mode is on.
Collections: Lists in Memory
A collection is like a mini-table stored in the app's memory. It holds multiple records while the user works. Use collections when you want users to build up a list of items before saving them all at once — like a shopping cart or a multi-item order entry screen.
SHOPPING CART EXAMPLE
User action: Tap "Add to Cart" on Product A
Formula: Collect( CartItems, { Product: "Laptop", Price: 45000, Qty: 1 } )
User action: Tap "Add to Cart" on Product B
Formula: Collect( CartItems, { Product: "Mouse", Price: 750, Qty: 2 } )
CartItems collection now contains:
┌──────────┬────────┬─────┐
│ Product │ Price │ Qty │
├──────────┼────────┼─────┤
│ Laptop │ 45000 │ 1 │
│ Mouse │ 750 │ 2 │
└──────────┴────────┴─────┘
User taps "Submit Order":
ForAll( CartItems, Patch( Orders, Defaults(Orders), { Product: Product, Price: Price, Qty: Qty } ) )
Connecting to Data Sources
Power Apps connects to data through connectors. A connector is a pre-built bridge between Power Apps and an external service. To add a data connection, click Data from the left sidebar in Power Apps Studio, then click Add data. Search for your source — Dataverse, SharePoint, Excel Online, SQL Server, and so on — and follow the authentication prompts.
Delegation: An Important Performance Concept
When your data source has thousands of rows, Power Apps needs to know how to query it efficiently. Delegation means Power Apps sends the query to the data source and gets back only the matching records — rather than downloading all records and filtering locally. Delegable functions (like Filter, Search, Sort with specific conditions) work correctly with large datasets. Non-delegable functions run locally and hit a 500-row default limit. Always design apps with delegation in mind when working with large Dataverse tables.
DELEGATION EXPLAINED ❌ Non-delegable (downloads all, filters locally): Filter( Orders, Len(Notes) > 100 ) → Gets all records (max 500), then filters → Misses records 501 onwards ✅ Delegable (server does the work): Filter( Orders, Status = "Open" ) → Server returns only Open orders → No row limit issue
Testing and Publishing Your App
Test your app by pressing F5 or clicking the Play button (▶) at the top right of the Studio. This opens a preview where all controls are interactive. Test every screen, every button, and every data operation. Press Escape when done.
To publish the app so others can use it, click Save (the floppy disk icon), then click Publish. Choose who can use the app by clicking the Share button and entering email addresses or group names. The people you share with receive an email with a link. They open the app in the Power Apps mobile app or at make.powerapps.com in their browser.
Responsive Design Tips
A canvas app built for phone layout looks cramped on a computer screen, and a tablet layout looks giant on a phone. Use these tips to make apps look good on any device: anchor controls to the edges of the screen using the X, Y, Width, and Height properties with formulas instead of fixed numbers. For example, set a button's Width to App.Width - 40 so it is always 20 pixels narrower than the screen, no matter the device size.
Key Points
- Canvas apps give you a blank screen to design any app layout you want — controls, colors, and flows are entirely yours to define.
- The three-screen pattern (Browse, Detail, Edit) covers most business app use cases.
- The Gallery control displays lists of records; the Form control displays and edits individual records.
- Formulas in Power Apps are like Excel formulas — short expressions that run in real time as users interact.
- Variables (Set and UpdateContext) store temporary values in memory; collections store temporary lists.
- Delegation is critical for performance with large datasets — use delegable functions in your Gallery Items formula.
- Publish your app and share it by email so others can open it in their browser or the Power Apps mobile app.