Building Your First Canvas App in Power Apps (Step by Step)

A beginner-friendly, start-to-finish walkthrough that ends with a working app you can use Power Apps and share

What You’ll Build (Simple and Real)

You’ll build a “Task Tracker” Canvas App that can:
● Show a list of tasks
● Add a new task
● Edit an existing task
● Mark a task as Done
● Search tasks quickly
You will build it using a clean 3-screen structure:

1. Home/List Screen (browse + search)

2. Create/Edit Screen (form)

3. Details Screen (view + quick actions)
   This structure is used in real business apps, so you learn the right pattern from day one.

Step 1: Create a New Canvas App

1. Open Power Apps (make.powerapps.com)

2. Click Create → Canvas app from blank

3. Choose Format:
   ○ Phone (recommended for beginners)

4. Name it: Task Tracker - Canvas App

5. Click Create
    You’re now inside Power Apps Studio.

Step 2: Add a Data Source (Microsoft Lists or SharePoint List)

Recommended for Beginners: Microsoft Lists
Create a list first (in Microsoft Lists):
List Name: TaskTracker
Columns (simple and useful):
● Title (Single line of text) – task name
● Description (Multiple lines of text)
● Priority (Choice: Low, Medium, High)
● Status (Choice: New, In Progress, Done)
● DueDate (Date)
Now connect it to your app:

1. In Power Apps Studio, click Data (left panel)

2. Click Add data

3. Select SharePoint (or Microsoft Lists depending on your tenant)

4. Choose your site

5. Select the list: TaskTracker

6. Click Connect
    Your app now has a real data source.

Step 3: Create the Home/List Screen (Browse + Search)

3.1 Insert a Gallery

1. Select Screen1 → rename it to: scr Home

2. Go to Insert → Gallery → Vertical gallery

3. Resize it to fit most of the screen

3.2 Connect the Gallery to Data

Select the gallery → set Items to:
● If your list is small (easy mode):
○ TaskTracker
● If you want search + filter (recommended):
○ Use this logic in Items:
○ Search by Title and filter by Status
 Add a Text Input for Search first:

1. Insert → Text input

2. Rename it to: txtSearch

3. Put it at the top of the screen
   Now set Gallery Items to:
   Search(TaskTracker, txtSearch.Text, "Title")

3.3 Show Useful Fields in the Gallery

Inside the gallery, display:
● Title
● Priority
● Status
● DueDate
Click gallery → Edit fields → choose these fields.
Now your home screen displays tasks.

Step 4: Add Buttons for Navigation (New + View)

4.1 “New Task” Button

1. Insert → Button

2. Text: New Task

3. Rename: btnNew
   Set OnSelect:
   NewForm(frmTask);
   Navigate(scrForm, ScreenTransition.Fade)

4.2 Tap Gallery Item to View Details

Select the gallery → set OnSelect:
Navigate(scrDetails, ScreenTransition.Fade)

 This will navigate, but we still need to pass the selected record (next step).

Step 5: Create a Details Screen (View + Quick Actions)

1. Insert → New screen → choose Blank

2. Rename to: scrDetails

5.1 Add a Display Form

1. Insert → Forms → Display form

2. Rename it: frmDetails

3. Set DataSource: TaskTracker

4. Set Item:
   Gallery1.Selected

(Replace Gallery1 with your gallery name if different)

5.2 Add “Edit” Button

Insert a button → Text: Edit
Set OnSelect:
EditForm(frmTask);
Navigate(scrForm, ScreenTransition.Fade)

5.3 Add “Mark as Done” Button

Insert a button → Text: Mark Done
Set OnSelect:
Patch(
TaskTracker,
Gallery1.Selected,
{Status: "Done"}
);
Notify("Task marked as Done", NotificationType.Success)

 Now you can update tasks quickly.

Step 6: Create the Create/Edit Screen (Form Screen)

1. Insert → New screen → choose Form (if available) or blank

2. Rename to: scrForm

6.1 Add an Edit Form

1. Insert → Forms → Edit form

2. Rename: frmTask

3. Set DataSource: TaskTracker

4. Set Item to:
   Gallery1.Selected

6.2 Add Fields

Click the form → Edit fields → add:
● Title
● Description
● Priority
● Status
● DueDate
 Now you can create/edit tasks.

Step 7: Add Save + Cancel Buttons

7.1 Save

Insert button → Text: Save
Set OnSelect:
SubmitForm(frmTask);
Notify("Saved successfully", NotificationType.Success);
Back()

7.2 Cancel

Insert button → Text: Cancel
Set OnSelect:
ResetForm(frmTask);
Back()

 Now your form behaves like a real app.

Step 8: Fix Navigation With Proper Record Passing (Best Practice)

Instead of directly using Gallery1.Selected everywhere, use a variable.
On gallery item select (Home screen gallery OnSelect):
Set(varTask, ThisItem);
Navigate(scrDetails, ScreenTransition.Fade)

Then update Details form Item:
varTask

And Form screen Item:
varTask

 This makes your app more stable and professional.

Step 9: Test Your App (Preview Mode)

1. Click ▶ Play

2. Create a task

3. Search tasks

4. Open details

5. Edit and mark done
   If anything doesn’t work, it’s usually:
   ● Wrong control name (Gallery1 vs your gallery name)
   ● Wrong list column name
   ● Form mode (NewForm/EditForm) missing

Step 10: Save, Publish, and Share

1. Click File → Save

2. Click Publish

3. Click Share → add users or groups
   Your first Canvas App is now live.

Beginner Upgrade Ideas (Add These After Your First Win)

● Add a dropdown filter by Status
● Add color indicators for Priority
● Add validation: Title cannot be blank
● Add a dashboard screen with counts
● Add attachments to tasks

FAQ (Beginner Questions You’ll Face)

1) Why is my form not saving?
Usually the DataSource isn’t connected or required fields are blank.

2) Why does the gallery not show new tasks?
Try refreshing:
Refresh(TaskTracker)

3) Should I use SharePoint list or Dataverse?
Start with SharePoint/Microsoft Lists for learning. Use Dataverse for enterprise-grade apps.

4) What does Patch do vs SubmitForm?
● SubmitForm() saves a form.
● Patch() updates specific fields quickly.

5) What is varTask used for?
It stores the selected record so navigation and editing work reliably.