Build Your First Canvas App in Power Apps

Picture this: your marketing team tracks lead information in a SharePoint list, but they're constantly switching between their phones and computers to update records. Your sales manager wants a simple mobile app where reps can quickly add new leads, update contact details, and mark follow-up actions—all while standing in a client's lobby.

Building a custom mobile app used to require months of development and significant budget. With Microsoft Power Apps, you can create that lead tracking app in an afternoon, deploy it instantly to your team's devices, and modify it whenever requirements change. No coding required.

In this lesson, you'll build a complete canvas app from scratch using realistic business data. You'll create screens for viewing, adding, and editing records, connect to a live data source, and publish your app so others can use it immediately.

What you'll learn:

• How canvas apps differ from other Power Apps types and when to use them
• Create responsive screens with controls, forms, and navigation
• Connect your app to SharePoint as a data source
• Implement create, read, update operations (CRUD) with realistic business logic
• Test your app and publish it for team use
• Handle common user experience patterns like search and filtering

Prerequisites

To follow along with this lesson, you'll need:

• A Microsoft 365 account with Power Apps access (available in most business plans)
• Basic familiarity with SharePoint lists (we'll create one together if you don't have one)
• About 90 minutes of focused time

You don't need any programming experience. Power Apps uses formulas similar to Excel, and we'll explain every formula we use.

Understanding Canvas Apps vs. Other Power Apps Types

Before we start building, let's clarify what makes canvas apps unique. Microsoft Power Apps offers three main types of applications:

Canvas apps give you complete control over the user interface. You design every screen, place every button, and customize every interaction. Think of canvas apps like creating a PowerPoint presentation—you have a blank canvas and total creative freedom. This makes them perfect for mobile-first experiences, custom workflows, or when you need precise control over how users interact with your data.

Model-driven apps automatically generate screens based on your data structure. They're ideal for complex business processes with lots of related data, like CRM systems. The interface follows Microsoft's standard patterns, which reduces customization but ensures consistency.

Portal apps create external-facing websites where people outside your organization can interact with your data.

For our lead tracking scenario, a canvas app is perfect because we want a mobile-friendly interface that sales reps can use quickly on any device.

Setting Up Your Data Source

Every Power Apps application needs data. We'll use SharePoint, which integrates seamlessly with Power Apps and provides robust data management features your business users already understand.

Creating the Sales Leads SharePoint List

First, let's create a SharePoint list to store our sales lead information. Navigate to your SharePoint site (if you don't have one, create a new team site from your Microsoft 365 portal).

1. Click New → List → Blank list
2. Name it "Sales Leads"
3. Add these columns beyond the default Title field:

Column Name	Type	Settings
Company	Single line of text	Required
Contact_Email	Single line of text	-
Phone	Single line of text	-
Industry	Choice	Options: Technology, Healthcare, Finance, Manufacturing, Other
Lead_Source	Choice	Options: Website, Referral, Trade Show, Cold Call, Social Media
Estimated_Value	Currency	Default: $0
Follow_Up_Date	Date and time	-
Status	Choice	Options: New, Contacted, Qualified, Proposal Sent, Closed Won, Closed Lost
Notes	Multiple lines of text	-

Pro tip: Use underscores in column names instead of spaces. This makes them easier to reference in Power Apps formulas later.

Add a few sample records so we have data to work with:

Title: John Smith - ABC Corp
Company: ABC Corporation  
Contact_Email: john.smith@abccorp.com
Phone: (555) 123-4567
Industry: Technology
Lead_Source: Website
Estimated_Value: $25,000
Status: New
Notes: Interested in our enterprise solution. Mentioned budget approval needed.

Title: Sarah Johnson - MedTech Solutions
Company: MedTech Solutions
Contact_Email: sarah.j@medtech.com  
Phone: (555) 987-6543
Industry: Healthcare
Lead_Source: Trade Show
Estimated_Value: $45,000
Status: Contacted
Follow_Up_Date: [tomorrow's date]
Notes: Met at Healthcare Innovation Summit. Needs demo scheduled.

Add 2-3 more records with different statuses and values. This sample data will help you see how the app behaves with realistic information.

Creating Your First Canvas App

Now let's build the app. Navigate to make.powerapps.com and sign in with your Microsoft 365 account.

Starting from Data

Power Apps offers several ways to create canvas apps. We'll use "Start from data" because it provides a solid foundation that we can customize.

1. Click Create in the left navigation
2. Select Canvas app from data
3. Choose SharePoint as your data source
4. Connect to your SharePoint site and select the "Sales Leads" list
5. Choose Phone layout (this creates a mobile-optimized app, but works great on tablets and desktops too)
6. Click Create

Power Apps analyzes your data structure and generates three screens automatically:

• Browse screen: Shows all records in a scrollable list
• Detail screen: Displays full information for a selected record
• Edit screen: Allows creating new records or modifying existing ones

This gives us a functional app in about 30 seconds, but the real power comes from customizing it for your specific needs.

Understanding the Generated App Structure

Before we customize anything, let's explore what Power Apps created. Your app should open in the studio with three screens visible in the left panel:

BrowseScreen1

This screen uses a Gallery control to display your SharePoint data. Click on the gallery (the tall rectangular area showing your lead records) and look at the properties panel on the right.

The Items property shows: SortByColumns(Search([@'Sales Leads'], TextSearchBox1.Text, "Title"), "Title", If(SortDescending1, Descending, Ascending))

This formula does three things:

1. Search() filters records based on what users type in the search box
2. SortByColumns() orders results by the Title field
3. The If() statement handles ascending vs. descending sort order

DetailScreen1

This screen shows complete information for a selected record. The key property here is Item, which references BrowseGallery1.Selected—whatever record the user tapped in the browse screen.

EditScreen1

This screen can both create new records and edit existing ones. Look at the Item property of the form control—it switches between creating a blank record and editing the selected record based on how the user navigated here.

Customizing the Browse Screen

The generated browse screen works, but we can make it much more useful for sales teams. Let's add visual indicators for lead priority and improve the information displayed.

Enhancing the Gallery Display

Click on the gallery in BrowseScreen1, then click on the first item to select the template (you'll see "Template" appear in the selection dropdown).

The current template shows just the Title field. Let's add more relevant information:

1. Add Company Information: Click the subtitle label (currently showing "Created") and change its Text property to: ThisItem.Company

2. Add Status with Color Coding: Click the body text area and change its Text property to: ThisItem.Status & " • $" & Text(ThisItem.Estimated_Value, "#,##0")

This displays both the status and estimated value in a readable format.

3. Add Visual Status Indicators: Select the body label and modify its Color property:

Switch(
    ThisItem.Status,
    "New", Color.Orange,
    "Contacted", Color.Blue, 
    "Qualified", Color.Green,
    "Proposal Sent", Color.Purple,
    "Closed Won", Color.DarkGreen,
    "Closed Lost", Color.Red,
    Color.Black
)

This color-codes each record based on its status, making it easy for sales reps to quickly identify where each lead stands in their pipeline.

Adding a Follow-Up Alert

Sales reps need to know which leads require immediate attention. Let's add a visual indicator for overdue follow-ups.

1. Insert a new Icon control into the gallery template
2. Set the Icon property to: Icon.Warning
3. Position it in the upper-right corner of each gallery item
4. Set the Visible property to:

And(
    Not(IsBlank(ThisItem.Follow_Up_Date)),
    ThisItem.Follow_Up_Date < Today(),
    ThisItem.Status <> "Closed Won",
    ThisItem.Status <> "Closed Lost"
)

This shows a warning icon only for records that have a follow-up date in the past and aren't already closed.

5. Set the Color property to: Color.Red

Now your browse screen gives sales reps immediate visual feedback about lead status and overdue actions.

Improving the Detail Screen

The detail screen should provide comprehensive information while remaining scannable. Let's reorganize the layout and add calculated fields that help sales reps make decisions.

Adding Business Logic

Navigate to DetailScreen1. You'll see a form control displaying all the fields from your SharePoint list. Let's add some calculated information that helps sales reps prioritize their work.

1. Add a Priority Indicator: Insert a Text label control above the form
2. Set its Text property to:

"Priority: " & 
Switch(
    And(DataCardValue8.Text = "Qualified", DataCardValue7.Value > 30000), "HIGH",
    And(DataCardValue8.Text = "New", DataCardValue7.Value > 50000), "HIGH", 
    And(Not(IsBlank(DataCardValue9.SelectedDate)), DataCardValue9.SelectedDate < Today()), "URGENT",
    DataCardValue7.Value > 75000, "HIGH",
    "MEDIUM"
)

Note: The DataCardValue references correspond to your form fields. DataCardValue7 typically represents Estimated_Value, DataCardValue8 represents Status, and DataCardValue9 represents Follow_Up_Date. You can verify this by selecting each field and checking its name in the property dropdown.

This formula assigns priority based on business rules:

• Qualified leads over $30,000 are high priority
• New leads over $50,000 are high priority
• Any lead with an overdue follow-up is urgent
• Any lead over $75,000 is high priority
• Everything else is medium priority

3. Color-code the Priority: Set the Color property of your priority label to:

Switch(
    Left(Self.Text, 5),
    "Priority: HIGH", Color.Red,
    "Priority: URGENT", Color.DarkRed,  
    Color.Orange
)

Adding Days Since Last Contact

Sales managers often want to know how long it's been since someone touched a lead. Add another label with this formula:

Text property:

"Last updated: " & Text(DateDiff(BrowseGallery1.Selected.Modified, Today(), Days)) & " days ago"

This shows how many days have passed since the record was last modified, helping sales reps identify stale leads.

Enhancing the Edit Screen

The edit screen is where users create new leads or update existing ones. Let's add validation and improve the user experience.

Adding Input Validation

Navigate to EditScreen1. The form control here handles both new record creation and editing existing records. Let's add validation to ensure data quality.

1. Email Validation: Find the Contact_Email field in the form, select its data card, and modify the Valid property:

Or(
    IsBlank(DataCardValue4.Text),
    IsMatch(DataCardValue4.Text, Email)
)

2. Phone Number Formatting: Find the Phone field and set its Format property to: TextFormat.Number

3. Required Field Validation: For critical fields like Company, modify the Required property to: true

Adding Smart Defaults

When sales reps create new leads, we can save them time by providing intelligent defaults:

1. Default Status: Find the Status field and set its Default property to: "New"

2. Default Follow-Up Date: For the Follow_Up_Date field, set the Default property to: DateAdd(Today(), 3, Days)

This automatically sets follow-up dates three days in the future for new leads.

Adding Search and Filter Functionality

The generated search box works, but let's add filtering by status and lead source to help sales reps focus their work.

Enhanced Search Capabilities

Go back to BrowseScreen1. Above the existing search box, let's add dropdown filters.

1. Add Status Filter: Insert a Dropdown control

   • Items: ["All Status", "New", "Contacted", "Qualified", "Proposal Sent", "Closed Won", "Closed Lost"]
   • Default: "All Status"

2. Add Lead Source Filter: Insert another Dropdown control

   • Items: ["All Sources", "Website", "Referral", "Trade Show", "Cold Call", "Social Media"]
   • Default: "All Sources"

3. Update Gallery Filter Logic: Modify the gallery's Items property to incorporate the new filters:

SortByColumns(
    Filter(
        Search([@'Sales Leads'], TextSearchBox1.Text, "Title", "Company"),
        Or(Dropdown1.Selected.Value = "All Status", Status = Dropdown1.Selected.Value),
        Or(Dropdown2.Selected.Value = "All Sources", Lead_Source = Dropdown2.Selected.Value)
    ),
    "Title", 
    If(SortDescending1, Descending, Ascending)
)

This formula now:

• Searches both Title and Company fields
• Filters by status (unless "All Status" is selected)
• Filters by lead source (unless "All Sources" is selected)
• Maintains the original sorting functionality

Testing Your App

Before publishing, thoroughly test your app to ensure it works as expected. Power Apps Studio includes a preview mode that simulates the actual user experience.

Preview Mode Testing

Click the Play button (▶️) in the top-right corner to enter preview mode. Test these scenarios:

1. Browse Records: Verify all your sample leads appear correctly with proper color coding and priority indicators

2. Search Functionality: Type partial company names and contact names to ensure search works across multiple fields

3. Filter Combinations: Try different combinations of status and source filters

4. Record Details: Tap on different leads to view their detail screens. Confirm calculated fields like priority and days since last contact display correctly

5. Create New Record: Use the + button to add a new lead. Fill out all fields and save. Verify it appears in your browse screen and in SharePoint

6. Edit Existing Record: Tap a lead, then tap the edit icon. Modify some fields and save. Confirm changes persist

7. Validation Testing: Try entering invalid email addresses or leaving required fields blank. The app should prevent saving and show appropriate error messages

Mobile Responsiveness

Since we chose the phone layout, test how your app behaves on different screen sizes:

• Use the device frame selector in preview mode to test tablet and desktop layouts
• Verify text remains readable and buttons stay accessible
• Check that your priority indicators and status colors are visible across devices

Publishing and Sharing Your App

Once testing confirms everything works correctly, it's time to make your app available to your sales team.

Publishing Process

1. Save Your App: Click File → Save and give your app a meaningful name like "Sales Lead Tracker"

2. Publish: Click Publish → Publish this version

Publishing creates a live version that users can install and run. The studio keeps both published and unpublished versions, so you can continue making changes without affecting the live app.

Sharing with Your Team

1. Click Share: In the studio toolbar, click the Share button

2. Add Users: Enter email addresses for your sales team members

3. Set Permissions:

   • Co-owner: Can modify the app and share it with others
   • User: Can only run the app

4. Send Notification: Power Apps will email instructions for downloading and installing the app

Distribution Options

Your team can access the app in several ways:

• Power Apps mobile app: Download from app stores, sign in with Microsoft 365 credentials
• Web browser: Navigate to make.powerapps.com and click on the app
• Microsoft Teams: Add as a tab in relevant team channels
• SharePoint: Embed in SharePoint pages

Hands-On Exercise

Now it's your turn to extend the app with additional functionality. Here's a structured exercise that builds on everything we've covered:

Requirements

Add a "Quick Actions" screen that helps sales reps perform common tasks efficiently:

1. Create a new screen called "QuickActionsScreen"
2. Add navigation from the browse screen to this new screen
3. Display summary statistics: Total leads, leads by status, overdue follow-ups
4. Add quick action buttons:
   • "Schedule Follow-ups" (shows leads without follow-up dates)
   • "Review High Value" (shows leads over $50,000)
   • "Overdue Actions" (shows leads with past follow-up dates)

Starter Framework

Create a new screen and add these elements:

Summary Statistics Section:

• Text label showing total number of leads
• Text label showing count of leads by status
• Text label showing number of overdue follow-ups

Quick Action Buttons:

• Three button controls that filter the main gallery based on the criteria above

Solution Approach

Here are the key formulas you'll need:

Total Leads Count:

"Total Leads: " & CountRows([@'Sales Leads'])

Leads by Status:

"New: " & CountRows(Filter([@'Sales Leads'], Status = "New")) & 
" | Qualified: " & CountRows(Filter([@'Sales Leads'], Status = "Qualified"))

Overdue Follow-ups:

"Overdue: " & CountRows(Filter([@'Sales Leads'], 
    And(Not(IsBlank(Follow_Up_Date)), Follow_Up_Date < Today())
))

Navigation Back to Browse Screen: For each quick action button, use this pattern in the OnSelect property:

Set(FilterCondition, "YourConditionHere");
Navigate(BrowseScreen1, ScreenTransition.Fade)

Then modify your browse screen gallery to incorporate the FilterCondition variable.

Take 30-45 minutes to implement this exercise. Don't worry about making it perfect—focus on getting the basic functionality working.

Common Mistakes & Troubleshooting

Here are the most frequent issues new Power Apps developers encounter, along with solutions:

Mistake 1: Referencing the Wrong Data Card

The Problem: You write a formula like DataCardValue1.Text but get an error or unexpected results.

Why It Happens: Power Apps automatically generates data card names, and they don't always correspond to the fields you expect. DataCardValue1 might be the Title field in one app but the Company field in another.

The Fix: Always verify data card names by selecting the specific field in your form and checking the name in the property dropdown. Better yet, rename your data cards to match their fields (e.g., rename DataCardValue7 to "EstimatedValueCard").

Mistake 2: Filter Formulas That Don't Work

The Problem: Your gallery shows no results even though data exists in SharePoint.

Example of Broken Formula:

Filter([@'Sales Leads'], Status = "New")

Why It Happens: SharePoint choice fields store additional metadata beyond the display text. Also, single quotes in SharePoint list names require special handling.

The Fix: Use .Value for choice fields and proper syntax for list names:

Filter('Sales Leads', Status.Value = "New")

Mistake 3: Performance Issues with Large Data Sets

The Problem: Your app becomes slow or times out when loading data.

Why It Happens: The default gallery Items property loads all records and then applies search/filter operations. With thousands of records, this becomes inefficient.

The Fix: Use delegation-friendly formulas that push filtering to SharePoint:

// Good - delegated to SharePoint
Filter('Sales Leads', StartsWith(Title, TextSearchBox1.Text))

// Bad - brings all data to the app first  
Filter(Search('Sales Leads', TextSearchBox1.Text, "Title"), Status.Value = "New")

Mistake 4: Broken Navigation After Screen Changes

The Problem: After customizing screens, navigation buttons stop working or navigate to the wrong place.

Why It Happens: Navigation formulas reference specific screen and control names. When you rename screens or controls, these references break.

The Fix: Always update navigation formulas after renaming elements. Use Find and Replace (Ctrl+H) to update references across your entire app:

// Update from:
Navigate(Screen1, ScreenTransition.Fade)
// To:
Navigate(LeadDetailsScreen, ScreenTransition.Fade)

Mistake 5: Form Validation That Doesn't Prevent Saving

The Problem: You add validation formulas, but users can still save invalid data.

Why It Happens: Validation formulas must be on the individual data cards AND the form's Valid property must aggregate all validations.

The Fix: Set validation on individual data cards, then update the form's Valid property:

DataCard1.Valid And DataCard2.Valid And DataCard3.Valid

Also ensure your submit button's OnSelect includes:

If(Form1.Valid, SubmitForm(Form1))

Summary & Next Steps

Congratulations! You've built a complete business application that sales teams can use immediately. Let's recap what you've accomplished:

Canvas App Fundamentals: You understand how canvas apps differ from other Power Apps types and when to choose them. Canvas apps excel when you need mobile-optimized interfaces, custom user experiences, or specific workflows that don't fit standard patterns.

Data Integration: You connected your app to SharePoint as a data source, demonstrating the seamless integration between Microsoft 365 services. This same pattern works with hundreds of other data sources, from SQL Server to Salesforce to custom APIs.

User Experience Design: You enhanced the generated screens with business logic, visual indicators, and smart filtering. These techniques—color coding, calculated fields, conditional visibility—apply to any canvas app you'll build.

Real-World Business Logic: Your app includes priority calculation, overdue alerts, and input validation. These aren't just technical features—they solve actual business problems that sales teams face daily.

Testing and Deployment: You learned to thoroughly test your app and share it with team members, understanding the full lifecycle from development to production use.

Immediate Next Steps

Master Power Apps Formulas: Your next priority should be deepening your formula knowledge. Start with "Advanced Power Apps Formulas: Collections, Variables, and Complex Logic." Understanding formulas is crucial for building sophisticated business logic and handling complex user interactions.

Explore Data Sources Beyond SharePoint: Learn "Connect Power Apps to SQL Server and APIs" to understand how enterprise apps integrate with existing business systems. Most organizations have data scattered across multiple systems, and Power Apps shines at bringing it together in unified interfaces.

Build Multi-Screen Workflows: Study "Design Complex Navigation and User Flows in Canvas Apps" to create apps that guide users through multi-step business processes. The lead tracker you built is relatively simple—real business apps often involve complex approval workflows, multi-step data collection, and sophisticated user routing.

Your foundation in Power Apps is now solid. The concepts you've learned—connecting to data, designing responsive interfaces, implementing business logic, and managing the development lifecycle—apply to every canvas app you'll build, regardless of complexity or industry. Start building your next app tomorrow, and these skills will compound quickly.