How to Create a Canvas App in Power Apps From a SharePoint List?

In this Power Apps tutorial, I will explain how to create a canvas app in Power Apps from a SharePoint list.

If you are new to Power Apps, you can either sign up for a Microsoft 365 developer tenant or a free Power Apps trial and continue following this tutorial.

Create a Canvas App in Power Apps From a SharePoint List

We can build an app from a canvas in Power Apps without using any code or programming language like C#. Simply, by drag and drop controls to a canvas, we can develop a business app in Power Apps, known as the Canvas App. This app can be connected with various business data sources, including Microsoft and 3rd party data sources. Finally, you can share the canvas app with users, where they can run it in a browser or mobile and tablet devices.

Here is the SharePoint Online list I created on my SharePoint site. It has three columns like below:

Employee IDSingle Line of TextDefault Title Column (Just renamed)
Full NameSingle Line of Text
GenderChoice ColumnChoice Values: Female, Male and Others

And the SharePoint Online list looks like below:

Create canvas app in power apps

Now, let us see how to create a canvas app from the above SharePoint list.

  • Open the SharePoint Online list, then click on Integrate -> Power Apps -> Create an app from the command bar like below:
create canvas app from sharepoint list
  • Then it will ask you to provide the App’s name, then click on the Create button. It will check if the App name already exists or not. If there is no app with the same name, it will allow creation.
create canvas app in powerapps
  • Once you click the Create button, it will open the Power Apps studio, where you can customize the app if you want any customization.
  • Now, it will open the Power Apps studio, and you can see full-fledged working Apps will be created with the 3 below screens.
    • BrowseScreen: You can see that all the items in the list will appear here.
    • DetailScreen: It will display all the properties of a single item.
    • EditScreen: This screen will be used to Add or Edit an item.
  • Here, you can see what the app looks like.
How to Create canvas app in power apps
  • You can save, publish, and run this Power Apps canvas app without changing anything. From the top right corner, you can click on the Save icon to Save the Power Apps app, or you can click on the Publish icon to Publish the Power Apps app to the cloud.
publish power apps canvas app
  • Once you click on the Publish button, it will open the Publish dialog box. Here, you can provide a Description and click on the Publish this version button to publish the Power Apps canvas app to the cloud.
create canvas app from sharepoint
  • Power Apps also allows us to Edit details about the App, which you can do by clicking the Edit details button. Then, it will open the Settings dialog box, from where you can change the Name and description of the app, and it also allows you to set an icon for the app.
Publish Power Apps Canvas App
  • From the Display tab, you can change the Orientation, like you can change from Portrait to Landscape mode. You can “on” the Scale to fit option to scale the app to fit available space.
Power Apps canvas app change orientation
  • Another important setting you can do is the Lock orientation, where if you “On” this option, the app or the screen will be in the current orientation even when the device is rotated.
Lock orientation in power apps canvas app
  • In the Support tab, you will be able to see a few important options like:
    • Environment
    • Authoring version
    • Session ID, etc.
create a canvas app in powerapps from a sharepoint list

These are a few settings you can change in the Publish window.

  • Once the App is published, the app will be available on the Power Apps home page. To view and run the app, navigate to (https://make.powerapps.com/). Then click on Apps from the left navigation, which will open the Apps page where you can see all the apps.
create a canvas app power apps from sharepoint list
  • To play or run the Power Apps canvas app, select the particular app, then from the command bar click on the Play button, otherwise you can also click on the […] and then click on the Play button in the ECB menu.
how to create responsive canvas app in powerapps
  • Then the app will be opened on the browser and the Display screen will open where you can see all the list items. You can click on a single item to view details about that particular item. Also, you can click on the Plus item to add a new item to the SharePoint list from Power Apps Add new item screen.
create a canvas app from sharepoint list in power apps
  • From the Add New item screen, you can fill the details and click on the Save icon to Save the item to the SharePoint Online list. Once the item has been added it will navigate to the Display screen.
Power apps create canvas app
  • In the same way, you can click on the Delete icon to delete an item from the SharePoint list in the Details screen.
See also  How to get month name from date in Power Apps

You can also check out my video tutorial which I have uploaded to the YouTube channel for the step-by-step guide.

Conclusion

I hope you get a complete idea of how to create a canvas app in Power Apps from a SharePoint list. With a few clicks, we can easily create a canvas app from a SharePoint list and start using it.

You may also like the following tutorials:

>