Create a Canvas App from a SharePoint List

Microsoft provides different data source connectors to build apps in Power Apps. Here, In this Power Apps tutorial, I will explain how to create a canvas app from a SharePoint list using Microsoft Power Apps.

Also, I will show you how to get, by default, an app with three screens by using a SharePoint list, and we will see the benefits of three different screens using a SharePoint list as a data source in Power Apps. Finally, I will show you how to save and run an app from Power Apps.

Suppose I have created a Power Apps Canvas app from a SharePoint Online list, and inside this, by default, we will get three screens. Such as:

1. BrowseScreen: We can get all items from a SharePoint Online list in the browse screen.
2. DetailScreen: If You want to get all the information about the specific item in the list, select the detail screen.
3. EditScreen: We can create an item or update information about an existing list item using this screen.

Create a Canvas App from a SharePoint List

Here, we will see how to create a Power Apps Canvass app from a SharePoint Online list. To achieve it, follow the below steps.

• Open the Power Apps with your respective Microsoft credential. Then, click on the + Create button, and select SharePoint (Start from a SharePoint list to create a three-screen app) like below.

• Now, select SharePoint (Data source) under the Connection page. Then, by default, it will connect directly to the cloud services instead of using the on-premises data gateway option. Next, click on the Create button.

• Next, select your respective SharePoint Online site, choose a list, and click on the Connect button as shown below.

• Once, connected to the SharePoint list will take a few minutes and open your app with three screens such as 1) BrowseScreen, 2) DetailsScreen, and 3) EditScreen.

This is how to create or build a Power Apps Canvas app from the SharePoint list.

Browse Screen

When you open the browse screen in the Canvas app, it shows all items you created in your SharePoint Online list. And also, we will get the following controls such as:

• Reload icon: We can refresh a SharePoint Online list from Power apps by using the below OnSelect property.

OnSelect = Refresh([@'Employee Onboarding'])

• Sort icon: You can sort the order of the SharePoint list items using the OnSelect property with a context variable like the one below.

OnSelect = UpdateContext({SortDescending1: !SortDescending1})

• Add icon: By default, you will get + Add icon with an OnSelect property.

OnSelect = NewForm(EditForm1);Navigate(EditScreen, ScreenTransition.None)

• If you want to add a new record from Power Apps to a SharePoint list then, click on the + Add icon. Then, it will redirect to the Edit screen, provide the data, and submit it to a SharePoint list.

• Search box: This option allows us to filter a SharePoint Online list of items.
• Next arrow: Once the next arrow icon is clicked, it will navigate to the second screen (Detail screen).

Detail Screen

From the Detail screen, we will get all the information about the specific SharePoint list item. And, you can get the following controls. Such as:

• Trash icon: When we want to delete a specific record, click on the trash icon to delete the list item. And follow the below OnSelect property as well.

OnSelect = Remove([@'Employee Onboarding'], BrowseGallery1.Selected); If (IsEmpty(Errors([@'Employee Onboarding'], BrowseGallery1.Selected)), Back())

• Edit icon: Once, click on the edit icon with its OnSelect property, it will navigate to the third screen (Edit screen). Where you can update the respective list item.

OnSelect = EditForm(EditForm1);Navigate(EditScreen, ScreenTransition.None)

Back arrow: Once you will click on the back arrow, It will redirect to the browse screen.

Edit Screen

Similarly, opening the edit screen will display the edit form to update the respective SharePoint Online list item. Also, we will get the following controls such as:

• Accept icon: Once your record is updated, click on the accept icon (With the OnSelect property) to update a SharePoint list item.

OnSelect = SubmitForm(EditForm1)

• Cancel icon: If you want to reset the form, click on this cancel icon to remove the record. And, follow the below OnSelect property code.

OnSelect = ResetForm(EditForm1);Back()

These are the benefits of three different screens using a SharePoint list as a data source in Power Apps.

How to save and run an app from Power Apps

• Once, your Power Apps app is ready to use. Just Save (Provide the app name), and you can test the app by using the Preview button.

• Then, click on the Publish icon, and select the Publish this version button as shown below.

• Whenever you have to publish an app, it will appear under the Apps section on the Power Apps page.

• If you want to run the Power Apps app, click on the ellipses (…) option to get more commands. And select the Play option like below.

• Once, play or run an app, it will display the browse screen to get all list items from a SharePoint list. Then, click on the next arrow to redirect to the details screens, where you will get all the information about your specific record.
• In the last, you can select the edit icon; then it will redirect to the edit screen where you can update the particular SharePoint list item.

This is how to save, publish, and run an app from Power Apps.

Conclusion

From this Microsoft Power Apps tutorial, I have explained to you all about creating a canvas app from a SharePoint Online list. Then, We learned the benefits of three different screens using a SharePoint list as a data source in Power Apps. Last, I explained how to save, preview, and publish an app from Power Apps.

You may like the following Power Apps tutorials:

• Power Apps Modern Button Control
• Different Types of Apps in Microsoft Power Apps
• How to Create a Canvas App in Power Apps