Building a Custom Canvas App with Power Apps: Step-by-Step Guide (2025)

Building a Custom Canvas App with Power Apps: Step-by-Step Guide (2025)

Published on: August 6, 2025 | Author: TechCraft Dev

Power Apps Canvas Apps offer an intuitive interface for building mobile and desktop applications with drag-and-drop functionality. In this guide, you'll learn how to build a simple employee directory app connected to SharePoint. By the end of this article, you’ll have a fully functional app deployed and ready for testing.

Step 1: Set Up the Data Source

In this example, we’ll use a SharePoint list named “Employees” with the following columns:

  • Title (Employee Name)
  • Email
  • Department
  • Photo (Hyperlink or Picture)

Step 2: Create a Canvas App

  1. Go to make.powerapps.com.
  2. Click Apps > + New app > Canvas app.
  3. Name your app EmployeeDirectoryApp and choose either Phone or Tablet layout.

Step 3: Connect to SharePoint

  1. In the left pane, select Data (database icon).
  2. Click Add data > Search for “SharePoint”.
  3. Select your site and choose the “Employees” list.

Step 4: Add a Gallery to Display Data

  1. Insert a Vertical Gallery (Insert > Gallery).
  2. Set the Items property to:
    SortByColumns(Employees, "Title", Ascending)
  3. Customize the layout to display Name, Email, and Department.

Step 5: Add Search Functionality

Insert a Text Input box named txtSearch and update the gallery Items property:


Filter(
  Employees,
  StartsWith(Title, txtSearch.Text)
)

Step 6: Add a Detail Screen

  1. Insert a new screen: Insert > New screen > Detail.
  2. Use a Display Form and set its DataSource to Employees.
  3. Set the Item property to:
    Gallery1.Selected
  4. Insert navigation on gallery item click:
    OnSelect = Navigate(DetailScreen, ScreenTransition.Fade)

Step 7: Test and Publish

  1. Click Preview (Play icon) to test the app.
  2. Go to File > Save > Publish.
  3. Share it with your team via Share tab.

Bonus Tips

  • Use Coalesce to handle null values.
  • Use IsMatch for input validation.
  • Add filters like department dropdown using Distinct(Employees, Department).

Conclusion

Power Apps empowers even non-developers to build production-ready apps. With just a SharePoint list and a few formulas, you can digitize processes like employee lookup, asset tracking, or ticket management. Start small, iterate fast, and scale as needed!

Want more tutorials like this? Subscribe and stay updated with the latest in Power Platform development.


Tags: Power Apps, Canvas App, SharePoint Integration, Power Platform, Microsoft 365, No Code

Comments