Your First Canvas App

Analogy categoryAnalogies

The fastest way to build a first canvas app is the 'Start with data' flow: from Power Apps Studio, pick a data source such as a SharePoint list or Dataverse table, and Studio auto-generates a three-screen app — a Browse screen (a gallery of records), a Detail screen (a read-only form for one record), and an Edit screen (an editable form for creating or updating a record) — all fully wired with working navigation and Patch/Submit logic already in place. This generated app is a genuinely useful starting point rather than a throwaway demo: every formula it produces is standard Power Fx you can inspect, modify, and extend exactly like the ones you'd write by hand.

🏏

Cricket analogy: Studio's auto-generated three-screen app is like a pre-set fielding formation a captain can start a match with, then adjust field positions, meaning the formulas, once play, meaning real usage, reveals what needs tuning.

Screens, Controls, and the Gallery Pattern

The Browse screen's core control is a Gallery, which repeats a template of controls (an image, two or three labels) once per record in its Items property's result set; selecting a gallery item typically runs a formula like Navigate(DetailScreen, ScreenTransition.Cover, {SelectedRecord: ThisItem}) that both switches screens and passes the tapped record forward as context. Within the gallery template, ThisItem refers to the current record being rendered, so a label's Text property set to ThisItem.Title or ThisItem.'Due Date' automatically shows the correct value for each row without writing a loop — Power Fx evaluates the template once per record behind the scenes.

🏏

Cricket analogy: A Gallery repeating a template per record is like a live scorecard app repeating the same row layout, meaning batter name, runs, and balls faced, once per player, automatically populated from the innings data without manually typing each row.

Editing and Saving Records

The Edit screen uses an Edit Form control (or manual TextInput controls with a Patch formula) bound to the same data source; its DataSource and Item properties determine which record it's editing, and a Submit button calls SubmitForm(EditForm1) for auto-generated forms or a manual Patch(DataSource, Defaults(DataSource), {...}) for a new record versus Patch(DataSource, EditRecord, {...}) for updating an existing one. Validation happens through the OnSuccess and OnFailure properties of the form (or by wrapping Patch in an If checking IsBlank on required fields before saving), and Notify() is the standard way to surface a success or error message to the user afterward.

🏏

Cricket analogy: Distinguishing Patch for a new record versus an existing one is like the difference between adding a brand-new player to a squad list versus updating an existing player's current match statistics — same underlying table, different intent.

power-fx

// Edit screen: manual Patch pattern for new vs. existing record
If(
    IsBlank(EditRecord),
    // Create a new record
    Patch(
        Tasks,
        Defaults(Tasks),
        {
            Title: TextInputTitle.Text,
            DueDate: DatePickerDue.SelectedDate,
            Status: { Value: "Not Started" }
        }
    ),
    // Update an existing record
    Patch(
        Tasks,
        EditRecord,
        {
            Title: TextInputTitle.Text,
            DueDate: DatePickerDue.SelectedDate
        }
    )
);
Notify("Task saved", NotificationType.Success);
Navigate(BrowseScreen, ScreenTransition.CoverRight)

Forgetting to check IsBlank on required TextInput controls before calling Patch is a common first-app bug — the record will save with empty fields rather than showing a validation error, since Power Fx does not enforce required fields automatically outside of Dataverse business rules.

'Start with data' auto-generates a working Browse/Detail/Edit three-screen app from a chosen data source.
The Browse screen's Gallery control repeats a template once per record using ThisItem to bind values.
Selecting a gallery item typically uses Navigate() to move to the Detail screen while passing the selected record.
The Edit screen uses SubmitForm() for Edit Form controls or manual Patch() formulas for custom layouts.
Patch() with Defaults() creates a new record; Patch() with an existing record reference updates it.
OnSuccess/OnFailure or manual IsBlank checks handle validation and give the user feedback via Notify().
The generated app's formulas are standard Power Fx, fully inspectable and modifiable like hand-written ones.