Microsoft Canvas App – A Practical Guide for Power Platform Developers
Canvas Apps are one of the most flexible offerings in the Microsoft Power Platform. They allow developers to design custom user experiences using a low-code approach while still supporting complex business logic.
This blog explains what a Canvas App is, where it excels, where it struggles, real-world use cases, supported data sources, and provides a comprehensive overview of components and Power Fx functions, accompanied by brief explanations.
What is a Canvas App?
A Canvas App lets you design your app screen-by-screen with full control over layout and behavior. You place controls like labels, buttons, galleries, and forms wherever you want and define logic using Power Fx.
Canvas Apps are UI-first, making them perfect for mobile apps, custom workflows, and task-based solutions.
What Makes Canvas Apps Awesome
- Full control over UI and user experience
- Rapid development with low-code formulas
- Works well for mobile-first and custom apps
- Supports many data sources beyond Dataverse
- Easy integration with Power Automate
Where Canvas Apps Fall Short (Compared to Model-Driven Apps)
- Handling complex relational data is harder
- No built-in business process flows
- Security must be handled manually in some cases
- Performance can degrade with large datasets
Business Scenarios – When to Use Canvas Apps
- Field inspection and survey apps
- Employee self-service portals
- Approval and request management
- Inventory and asset tracking
- Custom mobile apps for sales teams
Data Sources Supported by Canvas Apps
- Dataverse
- SharePoint
- Excel (OneDrive / SharePoint)
- SQL Server (Azure & On-Prem via Gateway)
- Microsoft Lists
- Dynamics 365
- Custom APIs using Custom Connectors
Canvas App Components (Purpose + Working)
Label
Displays static or dynamic text on the screen.
Text = "Hello " & User().FullName
Text Input
Accepts user input such as names, emails, or numbers.
TextInput1.Text
Button
Triggers an action when clicked.
OnSelect = SubmitForm(Form1)
Gallery
Shows a list of records in a repeating layout.
Items = Employees
Form (Edit / Display)
Used to create, update, or view records.
DataSource = Employees
Dropdown
Allows selection of a single value from a list.
Items = Distinct(Employees, Department)
ComboBox
Advanced dropdown with multi-select and search.
SelectedItems
Date Picker
Lets users select a date.
SelectedDate
Toggle
Captures Yes/No input.
Toggle1.Value
Checkbox
Used for boolean selections.
Checkbox1.Value
Icon
Clickable icon used for actions.
OnSelect = Remove(Employees, ThisItem)
Timer
Runs logic after a set time interval.
OnTimerEnd = Refresh(Employees)
Component (Custom)
Reusable UI with encapsulated logic.
Input / Output properties
Top 25 Most Used Power Fx Functions
1. Patch
Creates or updates records in a data source.
Patch(DS, Defaults(DS), {Name:"Ajay"})
2. SubmitForm
Saves form data to the connected data source.
SubmitForm(Form1)
3. Collect
Adds records to a local collection.
Collect(colData, DS)
4. ClearCollect
Clears and reloads a collection.
ClearCollect(colData, DS)
5. Filter
Returns records that meet a condition.
Filter(DS, Status="Active")
6. LookUp
Finds the first matching record.
LookUp(DS, Email=User().Email)
7. Remove
Deletes a specific record.
Remove(DS, ThisItem)
8. RemoveIf
Deletes records based on condition.
RemoveIf(DS, Status="Inactive")
9. UpdateIf
Updates records conditionally.
UpdateIf(DS, Status="New", {Status:"Closed"})
10. If
Runs logic based on conditions.
If(IsBlank(txt.Text), Notify("Required"))
11. Switch
Executes logic based on multiple conditions.
Switch(Role, "Admin", true, false)
12. Navigate
Navigates to another screen.
Navigate(Screen2)
13. Notify
Displays in-app notifications.
Notify("Saved", NotificationType.Success)
14. Set
Creates or updates global variables.
Set(varUser, User().Email)
15. UpdateContext
Creates screen-level variables.
UpdateContext({locVisible:true})
16. Concurrent
Runs multiple actions in parallel.
Concurrent(Refresh(A), Refresh(B))
17. IsBlank
Checks if a value is blank.
IsBlank(TextInput1.Text)
18. IsEmpty
Checks if a table or collection is empty.
IsEmpty(colData)
19. CountRows
Counts records in a table.
CountRows(Gallery1.AllItems)
20. Sum
Calculates total of numeric values.
Sum(Sales, Amount)
21. Text
Formats values as readable text.
Text(Today(), "dd-mm-yyyy")
22. Value
Converts text to numeric value.
Value(TextInput1.Text)
23. Today
Returns current system date.
Today()
24. Now
Returns current date and time.
Now()
25. Refresh
Reloads latest data from source.
Refresh(DS)
Remember, every great Canvas App started with a single control on a blank screen. Experiment, explore, and don't be afraid to try new ideas.
Keep learning, keep creating, and enjoy the ride! 🌟
No comments:
Post a Comment