Category: Canvas Apps

Master Canvas Power Apps – #Canvas Apps Learn Series

Hi Folks,

This is a blog post series on Canvas Apps where you can learn and grow from Zero – Hero in Canvas Power Apps…and boost your knowledge on Canvas Apps.

  1. Introduction to Canvas Apps – What they are, why they matter, and real-world use cases.
  2. Setting Up Your First Canvas App – Step-by-step guide for beginners.
  3. Understanding Screens and Navigation – How to structure an app with multiple screens.
  4. Working with Data Sources – Connecting to SharePoint, Dataverse, Excel, and other sources.
  5. Forms and Galleries – Displaying and capturing data effectively.
  6. Mastering Power Fx – Key formulas and best practices.
  7. User Experience and UI Design – Creating a responsive and user-friendly interface.
  8. Using Components for Reusability – Making apps scalable and maintainable.
  9. Working with Media and Attachments – Adding images, videos, and file uploads.
  10. Performance Optimization Tips – Best practices to make apps faster.
  11. Offline Capabilities in Canvas Apps – How to work with apps when offline.
  12. Integrating Power Automate with Canvas Apps – Automating processes.
  13. AI and Copilot Features in Canvas Apps – Adding intelligence to apps.
  14. Advanced Security and Role-Based Access – Controlling user access and permissions.
  15. Publishing and Managing Your Canvas Apps – Deployment, versioning, and governance.

Firstly, let’s start with some simple introduction for this post…

What Are Canvas Apps?

Canvas Apps are a powerful low-code development tool within Microsoft Power Platform that allows users to build custom business applications with a drag-and-drop interface. Unlike model-driven apps, which rely on structured data models, Canvas Apps provide full control over the user interface, enabling developers and business users to design highly customized applications tailored to specific business needs.

Canvas Apps can be used to create simple applications for internal business processes or sophisticated applications with multiple screens, data interactions, and integrations with other Microsoft and third-party services. Users can design these apps using Power Apps Studio, a web-based development environment that provides a range of components, such as buttons, galleries, forms, and media controls, to create intuitive and responsive applications.

Why Are Canvas Apps Important?

Canvas Apps bring significant value to businesses and developers by providing:

  1. Low-Code Development – Build applications with minimal coding, making app development accessible to both developers and non-developers. Power Fx, a formula-based language, enables business logic implementation with ease.
  2. Customization & Flexibility – Unlike model-driven apps that follow a predefined data structure, Canvas Apps allow users to freely design screens, layouts, and controls, ensuring the app meets unique business requirements.
  3. Seamless Data Integration – Connect to over 800+ data sources, including SharePoint, Dataverse, Excel, SQL Server, and third-party APIs, ensuring seamless access to enterprise data.
  4. Cross-Platform Compatibility – Run apps on web browsers, mobile devices (iOS & Android), and embedded within Microsoft Teams, SharePoint, and Dynamics 365.
  5. Integration with Power Platform – Enhance apps with Power Automate for automation workflows, Power BI for data visualization, and AI Builder for AI-driven insights and intelligent automation.
  6. Rapid Prototyping & Deployment – With the drag-and-drop interface and prebuilt templates, businesses can quickly prototype and deploy applications without long development cycles.
  7. Security & Compliance – Apps built using Canvas Apps inherit Microsoft’s security infrastructure, allowing role-based access control (RBAC) and compliance with enterprise security standards.

Real-World Use Cases

Canvas Apps can be leveraged across industries to improve efficiency and streamline operations. Some common real-world use cases include:

  • Expense Management App – Employees can submit expenses with receipts, managers can approve them, and finance teams can generate reports.
  • Inventory Management System – Track stock levels, reorder inventory, and generate reports in real-time.
  • Incident Reporting App – Employees can report workplace incidents with photos, location, and real-time status updates.
  • Customer Feedback App – Collect customer feedback through mobile-friendly forms and analyze responses with Power BI.
  • Field Service Management – Field workers can access work orders, update job statuses, and capture customer signatures through mobile devices.
  • HR Onboarding App – Manage the onboarding process for new employees with guided forms, policy documents, and task checklists.

Getting Started with Canvas Apps

To start building a Canvas App, follow these steps:

  1. Sign in to Power Apps (https://make.powerapps.com)
  2. Click on ‘Create’ and select ‘Canvas App from Blank’
  3. Choose a layout (Tablet or Mobile) based on your app’s intended use
  4. Design your app using Power Apps Studio:
    • Add Screens: Home screen, forms, galleries, etc.
    • Insert Controls: Buttons, text inputs, dropdowns, and images
    • Connect Data Sources: Link to Dataverse, SharePoint, SQL, etc.
    • Apply Business Logic: Use Power Fx formulas to create dynamic interactions
    • Test the App: Use Preview mode to validate functionality
  5. Publish and Share Your App: Deploy the app and control access using Microsoft Entra ID (Azure AD)

Best Practices for Building Canvas Apps

  1. Plan Your App Structure – Define screens, navigation, and key functionalities before starting.
  2. Optimize Performance – Reduce unnecessary data calls and use delegation-friendly queries.
  3. Use Components for Reusability – Create custom components for commonly used UI elements.
  4. Ensure Responsive Design – Design layouts that work across multiple device sizes.
  5. Leverage Power Automate for Automation – Automate approvals, notifications, and data processing.

What’s Next?

In the next post, we’ll walk through setting up your first Canvas App from scratch, covering app layout, adding controls, and connecting to a data source.

Stay tuned! Don’t forget to follow along…

Cheers,

PMDY

My top 3 favorite features released at Build 2024 for Canvas Apps…

Hi Folks,

This sounds good for those who are Pro Dev and also those working on Fusion teams (Pro + Low Code), as well. Just note, all these features are in preview or experimental features and are available in US Preview Region now as they were just released in the Microsoft Build 2024 last week. Public preview of these features is expected to be released in June 2024, so you can then try out in your region as well. If you want to check these out now, spin up a trial in US Preview region.

These are the top new features

  1. View the Code behind the Canvas Apps
  2. Use Copilot to generate comments and expressions for your Canvas Apps
  3. Integrate Canvas Apps with GitHub

Feature #1: View the Code behind the Canvas Apps

Now you can view the code behind your Canvas Apps, besides the screen where the components reside, click on the ellipses as below

You should be able to see the YAML source code for your Canvas App, the code is currently read only, you can click on Copy code option in the above screen at the bottom of page.

Make the necessary changes to the YAML code, create a new blank screen and you can then copy the YAML code to recreate the previous screen for which you copied the YAML code into a new screen if you wish you.

Here I will copy the code for the container inside, then I will create a new Blank screen

Once blank screen is added, expand it so that it occupies the entire size of the App, then click on Paste as below

Give it a minute, your new screen is now ready with container inside as below e.g here it was Screen3, just rename this accordingly.

How easy it was…. make sure you copy it to relevant item, meaning if you copied the code of container, you could only copy it to another container and not a screen.

Feature #2: Use Copilot to generate comments and expressions for your Canvas Apps

Do you want to generate comments for the expressions you wrote. Or have you forgot the logic which you have written for Canvas Apps long time back, don’t worry, use this approach.

Let’s say, I am choosing OnSelect Property, I have the below formula

Let’s ask Copilot what this mean, click on the Copilot icon available as below

Choose to explain the formula

So now you click on Copy option available and paste it above your command, this serves as a comment for your expression, you can try for any complex expression you wrote in your App. This improves the readability of your app and also makers can use existing knowledge to quickly get up to speed, minimize errors, and build—fast next time you were working on the same App

Now you can generate Power Fx using Copilot, you can start typing in natural language what you need in comments and as soon you stop typing, it shows as generating as below…you could use either // and /* */, comments can remain in the formula bar as documentation, just like with traditional code.

It generates the Power Fx command for your input as below and then you need to click on Tab key on your keyboard, it will show something like below

And finally, you can see the output as below.

You can apply these two tips for complex formulas as well.

Feature 3: Integrate Canvas Apps with GitHub

Did you ever notice that if the canvas app was opened by one user, when another user tries to open the same Canvas app, you would see a warning message and you need to explicitly click on override to take it forward, meaning at any point of time, only one person could be able to work on the Canvas App.

Now we can use first class Devops with the GitHub Integration feature enabled, many people can work on the same canvas app at the same time and also commit the code for Canvas Apps to Git, let’s see this.

Prerequisites:

  1. You need to have a GitHub Repo created, creating branches is optional, we can use main branch otherwise.
  2. Enable the experimental feature as below

Then you should see

Next thing is you need to configure Git version control as below, you can either use GitHub or Azure DevOps for this, I want to create a new Directory for storing my canvas app like GitHub Test which is not yet in my GitHub Account.

You need to your GitHub Account settings to create a new token as below.

For the personal access token, give repo level scope and click generate token.

Copy the personal access token in the connect to a Git Repository window, once authenticated, you should see a message like below.

Click Yes, you should see something like below

Within a minute, you should the below screen w

So, you should the code files being created in your GitHub Account as below

Now, your team can make the changes in the GitHub, since GitHub allows multiple people to work on it, latest commit will be reflected whenever you try to open the Canvas App from the maker portal. This helps developers build and deploy to source control without leaving the maker portal. Whenever you try to open this app, it will ask your Git Account credentials.

Do note that these features are currently available in US Preview region as they are just released last week in Build and would be released to other regions in near future, possibly in June 2024.

Hope you learned something new coming up next month or sooner…

That’s it for today…

Cheers,

PMDY