How to Create Canvas App in Power Apps from SharePoint Online List

How to Create Canvas App in Power Apps from SharePoint Online List

No comments

Loading

In this “Create Canvas App in Power Apps” article, we will learn about how to create a Canvas app in Power Apps from SharePoint Online list or Microsoft List data. In my previous article, I have shown how to create a model-driven app in Power Apps; you can refer to this article.

Power Apps provides a powerful way to create custom applications with a low-code/no-code approach. One of the most popular use cases for Canvas Apps in Power Apps is integrating with SharePoint Online Lists or Microsoft Lists to create data-driven applications. In this guide, we will walk you through the step-by-step process of building a Canvas App using SharePoint Online List data, covering the essentials you need to know to get started.

Whether you’re looking to automate business processes, create mobile-friendly forms, or display data in a customized layout, this article will help you learn how to create a Canvas App in Power Apps connected to SharePoint Online or Microsoft Lists.

Table of Contents

What is a Canvas App in Power Apps?

A Canvas App in Power Apps is a highly customizable app where you have full control over the design and layout of the user interface (UI). You can drag and drop elements, connect to multiple data sources, and create powerful business solutions without needing advanced coding skills. Unlike Model-Driven Apps, Canvas Apps give you the freedom to design each screen to meet your specific needs.

Why Use a Canvas App with SharePoint or Microsoft Lists?

Connecting Power Apps to SharePoint Online or Microsoft Lists allows you to:

  • Easily manage SharePoint data in a customized user interface.
  • Create mobile-friendly applications for field workers or employees on the go.
  • Automate workflows and enhance business processes by turning SharePoint data into interactive apps.
  • Integrate and display data from Microsoft Lists, which are built on SharePoint.

Step-by-Step Guide: Creating a Canvas App in Power Apps from SharePoint Online List

There are two ways to create a Canvas app in Power Apps from the SharePoint Online list; I will explain each of them.

Approach 1: Create Canvas App from Power Apps Maker Tool Start With Data (Connect External Data)

Step 1: Log into Power Apps

To get started, log into Power Apps using your Microsoft 365 credentials:

  • Go to Power Apps.
  • Click Sign in and enter your Microsoft 365 account details.

Once logged in, follow these steps:

  1. From the Power Apps homepage, click on the Apps option in the left navigation panel.
  2. Select Start with data (Create new tables, select existing tables, or connect to external data sources) to create a new Canvas App from a data source.

Note:

Other options are as below:

  • Start with Copilot
  • Start with a page design
  • Start with an app template
Create Power App with the start with data - SharePoint Online list
Create Power App with the start with data – SharePoint Online list

Once we click on the “Start with data” link, we will get the below screen:

Create canvas app with start with data - Connect external data
Create canvas app with start with data – Connect external data

There are three options in this screen, these are as below:

  • Create new tables: It works with blank tables or start from SharePoint Lists, Excel workbooks, or .CSV files.
  • Select existing tables: It creates your app from tables already have in Dataverse.
  • Connect external data: It allows your app to access data stored externally but leave the data right where it is.

Click on the “Connect external data” menu.

There are three data sources to connect with; these are as below:

  • From SharePoint
  • From Excel
  • From SQL
Create an app from SharePoint in Power Apps
Create an app from SharePoint in Power Apps

Select “From SharePoint,” then enter your site URL; even you can select your site from the recent sites list.

Then, select your list.

Create canvas app from SharePoint Online list
Create canvas app from SharePoint Online list

Click on the “Create app” button. Yes, we can see my Canvas got created with my SharePoint List data.

Create canvas app from SharePoint Online list demo
Create canvas app from SharePoint Online list demo

Let’s see this app in preview mode.

Create canvas app from SharePoint Online list demo in preview mode
Create canvas app from SharePoint Online list demo in preview mode

Now, using this app, you can perform CRUD operations in the SharePoint Online list. How simple isn’t it?

Step 2: Customize the App

While Power Apps provides a pre-built app, it’s highly customizable. Here’s how you can modify the app to meet your specific needs:

  • Add new controls: Use the Insert menu to add elements like buttons, text input fields, labels, and more. You can drag and drop them anywhere on the screen.
  • Modify screen layout: You can rearrange, resize, or remove any components on the screen to make the UI more user-friendly.
  • Customize forms: Power Apps automatically adds forms for editing and creating list items, but you can customize them by adding new fields, changing layouts, or setting validation rules.

Step 3: Add Logic and Automation

One of the strengths of Canvas Apps is the ability to add business logic and automation through Power Automate and Power FX formulas.

  • Power FX formulas: You can use Power FX (a low-code formula language) to add functionality like filtering, sorting, and navigation. For example, to filter list items by a specific condition, you can use the Filter function.
  • Automate workflows: Use Power Automate to set up automation tasks, such as sending notifications or triggering workflows based on user actions within the app.

Step 4: Preview and Test the App

Before publishing your Canvas App, it’s essential to preview and test it to ensure it functions correctly. Here’s how:

  • Preview mode: Click on the Preview button (the play icon) in the top-right corner to see how the app looks and behaves.
  • Test all features: Navigate between screens, test form submissions, and ensure that the app behaves as expected.

Step 5: Save, Publish, and Share the App

Once you’re satisfied with the app, you can save and publish it for users in your organization.

  • Click File > Save to save your app.
  • Select Publish to make the app available to your users.
  • Share the app with your team by clicking Share in Power Apps and selecting the users or security groups who should have access.

Approach 2: Create Canvas App from SharePoint Online List Integration Module

Another way of creating an app from the SharePoint Online list integrate module. To do this, follow the below steps:

Login to SharePoint Online List -> Click on the three dots in the toolbar -> Go to Integrate -> Power Apps -> Click on the “Create an app.”.

Create an app from Power Apps using SharePoint Online List Integrate module
Create an app from Power Apps using SharePoint Online List Integrate module

We can see my SharePoint List has been converted to a Power App.

Create canvas app from SharePoint Online list integrate module
Create canvas app from SharePoint Online list integrate module

Let’s see this app in preview mode.

Create Canvas App in Power Apps from SharePoint Online List
Create Canvas App in Power Apps from SharePoint Online List

In this app also, we can perform the CRUD operation very quickly.

After saving, both the apps I can see from my Apps gallery are shown below:

Canvas App Created with SharePoint Online List Data
Canvas App Created with SharePoint Online List Data

Best Practices for Creating a Canvas App from SharePoint List

While creating a Canvas App from SharePoint Online List data, here are some best practices to keep in mind:

  1. Optimize for performance: Avoid loading large amounts of data at once by using delegation (Power Apps will delegate the data query to SharePoint, rather than pulling all data into the app).
  2. Leverage galleries: Use galleries to display list data in a structured format, making it easier to navigate and filter items.
  3. Use responsive design: If the app will be used on mobile devices, ensure that the layout and controls are responsive to different screen sizes.
  4. Secure your data: Make sure to configure user permissions in SharePoint correctly so that only authorized users can access or modify the data.

Next, I will show you how to share this app with other users.

How do I share the Canvas app with other users?

Select your app and click on the “Share” button from the app settings menu or by clicking the three dots as shown above.

Then, you will get the app sharing screen as shown below:

Share the Canvas app with other users and the Azure security group

Share the Canvas app with other users and the Azure security groupKey-Points:

  • You can select your Canvas app only with the Azure Security Group but not with the Microsoft 365 Group; this is the difference between a model-driven app.
  • You can select your Canvas app with the specific users as well.
  • While sharing the Canvas app, you need to grant access to the data source as well.

What is the Co-Owner Checkbox in the Canvas App Sharing Screen?

In Canvas Apps, when you share the app with users or groups, including Azure AD Security Groups, you will see an option to assign the role of Co-owner. This option allows you to give certain users or groups elevated permissions over the app, similar to an administrative role but with some limitations. Here’s a breakdown of what this Co-owner role means:

What Does the “Co-owner” Role Mean in Canvas Apps?

The Co-owner checkbox in the Canvas App sharing screen allows you to share your app with users or groups and give them the ability to:

  • Use the app like any other user.
  • Edit the app, meaning they can open the app in Power Apps Studio and make changes to the design, functionality, or data connections.
  • Share the app with other users or groups. They can extend app access to other people within your organization, just as the original owner can.

However, there are two key restrictions:

  • Cannot delete the app: Even though a Co-owner has high-level permissions, they are not allowed to delete the app. Only the app owner (the creator) has the authority to delete it.
  • Cannot change ownership: The Co-owner cannot reassign the app’s ownership to someone else. This ensures that the original creator maintains control over the app’s ultimate ownership.

Why Use the Co-owner Role?

The Co-owner role is useful in scenarios where you are collaborating with others on app development or management. By assigning someone as a Co-owner, you allow them to contribute to building or maintaining the app while retaining some control over critical actions, such as app deletion or ownership changes.

Key Permissions for “Co-owner” in Canvas Apps:

  • Can use the app: Co-owners can run the app like any regular user.
  • Can edit the app: Co-owners can modify the app’s layout, functionality, and connected data sources using Power Apps Studio.
  • Can share the app: Co-owners can extend access by sharing the app with others in the organization.
  • Cannot delete the app: Only the app owner can delete the app.
  • Cannot change ownership: The Co-owner cannot reassign ownership of the app.

Comparison with Model-Driven Apps Security Roles

In Model-Driven Apps, security roles provide more granular control over what users can do with both the app and its data, especially when using Microsoft Dataverse. In contrast, the Co-owner role in Canvas Apps is a simpler, broader permission that allows collaboration without offering fine-grained role-based control.

The Co-owner option in Canvas App sharing is a flexible way to allow multiple people to work on an app together. They can edit, use, and share the app with others, but they cannot delete it or change the app’s owner. This role provides a balance between collaboration and control, ensuring the original app creator retains key rights over the app’s lifecycle.

What are the key differences between Canvas apps and model-driven apps in Power apps?

Here are the key differences between Canvas Apps and Model-Driven Apps in Power Apps:

Aspect Canvas App Model-Driven App
Design Approach Design-driven, allowing full control over the layout and user interface Data-driven, layout automatically generated based on the data model
Customization Fully customizable interface; you can place elements (buttons, text, etc.) anywhere on the screen Limited customization; UI generated based on data and relationships
Data Sources Can connect to multiple data sources (e.g., SharePoint, SQL, Excel) Primarily uses Microsoft Dataverse as the data source
Development Time Takes more time due to manual layout design and custom logic Faster development due to pre-built forms, views, and components
User Interface Drag-and-drop interface design; every screen is manually designed Pre-defined components like views, forms, and dashboards are auto-generated
Complexity Best suited for simple, task-specific apps or custom designs Ideal for complex applications with structured data relationships and workflows
Security Security is based on permissions from the connected data source (e.g., SharePoint, SQL), supports only Azure AD Security Groups Managed through Microsoft Dataverse roles; supports Microsoft 365 Groups and Azure AD Security Groups
App Sharing and Assigning Security Roles Can assign Co-owner role, allowing users to edit, share, and use the app, but without the ability to delete or change ownership. No option to assign specific security roles during sharing. During app sharing, you can assign security roles directly, managing user permissions through Microsoft Dataverse. Users can have specific roles (e.g., Read-only, Edit, Admin) tied to their access.
Responsiveness Requires manual adjustments for responsiveness across devices Automatically responsive; adjusts to different screen sizes (mobile, tablet, desktop)
Use Case Ideal for apps with unique UI requirements, task-based apps, and mobile forms Suited for applications that need sophisticated workflows, automation, and data structure (e.g., CRM systems)
Skill Level Required Requires more UI design skills and logic building (low-code approach) Easier for business users since much of the app is auto-generated (minimal coding required)

While sharing the model-driven app with the Azure security group and Microsoft 365 group, we can assign the security roles from the app sharing screen, but I don’t see this option in Canvas app sharing. What is the reason?

In Model-Driven Apps, when you share the app with users or groups (including Azure AD Security Groups and Microsoft 365 Groups), you have the ability to assign specific security roles directly from the app sharing screen. This allows you to control user permissions and access levels—such as whether they can view, edit, or administer the app—within the same sharing interface.

Why Can You Assign Security Roles in Model-Driven Apps?

Model-Driven Apps are built on Microsoft Dataverse, which has a robust role-based security model. Dataverse allows you to assign different security roles to users, defining what they can access and what actions they can perform within the app. These roles manage access to forms, views, data tables, and other resources in the app. When sharing a Model-Driven App, Power Apps gives you an integrated option to choose and assign security roles, ensuring that the app’s underlying data and components are properly secured based on user responsibilities.

What Happens in Canvas Apps?

In contrast, when sharing a Canvas App, you don’t have the option to assign security roles from the sharing screen. This is because Canvas Apps do not use the Dataverse’s role-based security model. Instead, security in Canvas Apps is primarily managed by the data source you connect to (e.g., SharePoint, SQL, Excel). As a result, you can’t assign granular security roles to users directly from Power Apps. Permissions for users are controlled by the data source itself, and if you’re using a source like SharePoint Online, you’ll need to manage user permissions directly within SharePoint (or whatever external system holds your data).

Key Differences in App Sharing and Security Roles:

  • Model-Driven Apps: Security roles can be assigned during the app-sharing process. These roles determine what users can do with the app and its data, allowing for detailed control over access to different parts of the app.
  • Canvas Apps: When sharing the app, you can only specify who can use the app, but not what they can do within the app. Any security or permissions are managed at the data source level (like SharePoint or SQL), and no specific security roles can be assigned during the app-sharing process.

Key-Points:

  • Model-Driven Apps: You can assign security roles from the sharing screen because Dataverse enables role-based security.
  • Canvas Apps: No role assignment is available from the sharing screen; security is handled at the data source level, and permissions must be managed there.

This means Model-Driven Apps offer more granular control over user access, while Canvas Apps rely on external systems for managing permissions.

This article will definitely help you if you are preparing for the Power Apps interview and the Power Automate interview.

YouTube Video Demo: SharePoint List & Canvas App

Conclusion: Canvas App in Power Apps

Thus, in this article, we have learnt about how to create a canvas app in Power Apps from SharePoint Online List Data, both using the start with the data approach and integrating SharePoint List with the Power Apps approach with the live demo.

Creating a Canvas App in Power Apps using SharePoint Online List or Microsoft Lists data is a powerful way to streamline business processes and provide easy access to critical information. With a few simple steps, you can turn your SharePoint data into a mobile-friendly, interactive app, perfect for automating tasks and improving productivity across your organization.

By following this guide, you’ll be able to quickly set up a Canvas App in Power Apps, customize it to meet your needs, and share it with your team for immediate use.

Frequently Asked Questions (FAQ)

1. Can I use Power Apps to create a mobile app?

Yes, both Canvas Apps and Model-Driven Apps created in Power Apps are automatically responsive and can be accessed on mobile devices. Canvas Apps allow you to fully customize the layout for a mobile-first design, while Model-Driven Apps adapt automatically to mobile screens. You can use the Power Apps mobile app to run these apps on iOS and Android devices.

2. Do I need a Power Apps license to use apps shared with me?

Yes, to use Canvas Apps or Model-Driven Apps shared with you, you must have a Power Apps license. If your organization has an appropriate Microsoft 365 plan, you may already have a license included. For more complex apps using Microsoft Dataverse (in Model-Driven Apps), you may need a higher-tier license, depending on the app’s features and data usage.

3. Can I integrate Power Apps with other Microsoft tools?

Absolutely! Power Apps integrates seamlessly with various Microsoft tools like SharePoint, Microsoft Teams, Outlook, Excel, OneDrive, and Power BI. For example, you can embed a Power App directly into a SharePoint page or a Teams channel to enhance collaboration and data management. Additionally, Power Apps can be used to create custom forms for SharePoint or automate tasks using Power Automate.

4. What is delegation in Power Apps, and why is it important?

Delegation in Power Apps refers to the process of delegating data processing to the data source, rather than having Power Apps retrieve all data and process it locally. This is important because, without delegation, Power Apps can only handle a limited number of records (500 by default, but adjustable to 2,000). Delegation ensures that your app can efficiently handle large datasets, especially when connecting to sources like SharePoint, SQL Server, or Dataverse.

5. How do I update my Canvas App after it’s been shared?

After sharing a Canvas App, you can continue to update and modify it. Once you make changes in the Power Apps Studio, you must save and publish the app again for the updates to take effect. Users who already have access to the app will automatically receive the updated version the next time they open it. If the app is shared with Co-owners, they can also make edits and publish changes.

6. Can I migrate a Canvas App to a Model-Driven App?

No, Canvas Apps and Model-Driven Apps are fundamentally different types of apps in Power Apps. Canvas Apps are highly customizable and allow full control over the UI, while Model-Driven Apps are based on a data model with an auto-generated interface. However, you can recreate the functionality of a Canvas App in a Model-Driven App by connecting the same data source and designing the appropriate data model, but direct migration isn’t supported.

7. What is Microsoft Dataverse, and why is it important for Model-Driven Apps?

Microsoft Dataverse is a cloud-based storage system that allows you to securely store and manage data used in Model-Driven Apps. It provides a structured way to define relationships between tables, enforce business rules, and ensure data integrity. Dataverse is essential for Model-Driven Apps because it allows these apps to build sophisticated workflows, manage security roles, and handle large datasets seamlessly.

8. Can I use external data sources in a Model-Driven App?

While Microsoft Dataverse is the primary data source for Model-Driven Apps, you can connect to external data sources using virtual tables or by integrating data into Dataverse. Power Apps allows connectivity to various external services such as SQL Server, Dynamics 365, and even custom APIs, but the app structure and interface will still depend on Dataverse data models.

 

About Post Author

Do you have a better solution or question on this topic? Please leave a comment