How to Create a Canvas app from SharePoint List in PowerApps

In this Power Apps tutorial, We will discuss how to create a Canvas app from the SharePoint list in PowerApps.

We will also see how to customize PowerApps New, Edit and Display form.

Create a SharePoint List

Here, I have created a SharePoint Online list and we will see how to create a Canvas App for the SharePoint Online list using Powerapps.

The below screenshot represents a SharePoint Online List (Hospital Registration Details).

create a powerapps app for sharepoint online list

This SharePoint Online List has these below columns with different data types.

create powerapps for sharepoint online list

Create a Canvas app from SharePoint List in PowerApps

Follow the below steps to create a Canvas app from SharePoint list using PowerApps.

Step-1: (Create Canvas app from blank)

Open the Power Apps page through the Browser. Sign in your PowerApps using Microsoft account.

In the Power Apps page, Select the Canvas app from blank under Make your own app as shown below.

Create Canvas app from SharePoint List in PowerApps

Step-2: (Specify Name for App)

Provide a name for your new app (Patient Registration Details), Select any format as Tablet or Phone and then click on Create.

If any dialogue box (Welcome to Power Apps Studio) will open then select Skip.

Create Canvas app from SharePoint List in Power Apps

Step-3: (Connect to Data Source)

Select connect to data link option in the middle of the screen.

Create a Canvas app from SharePoint List in Power Apps

The Data sources will appear on the left side of the page once you clicking on the link. Expand the Connectors and select the connection for your cloud-storage account if it shows in that Data sources.

Otherwise if it not appears, then you can easily add a new connection using +Add a connection.

Select SharePoint under the Connectors section and add your connection as shown below.

Create a Canvas app in Power Apps from SharePoint List

Step-4: (Connect to a SharePoint site)

In the Connect to a SharePoint site box, enter the SharePoint URL for the location of your list. Once you entered the Site URL, click on Connect.

Also, you can directly select the SharePoint site URL under the Recent sites section as like below screenshot.

Create a Canvas app in PowerApps from SharePoint List

Step-5: (Choose a list)

In the Choose a list section, select the checkbox for Hospital Registration Details and then click on to Connect.

Create Canvas app in PowerApps from SharePoint List

Now we will see how to create a Display form, Edit form of Patient Details using Power Apps.

A display form will help you to view all the details of a patient whereas an edit form will help to edit or modify any field of a patient using Power Apps.

Also, an edit form will help you to create a new record of a patient. Once your modification is done, you can save the edit form.

Requirement:

Before going to create the Display and Edit Form, Make sure to create four different screens. On the first screen (Patient Registration Details Screen), You can see the Title of the Patient only.

When you will click on Reload icon, then it will refresh the records. Similarly, when you will Add icon, then a new registration form will open.

When you will click on the next arrow icon (>) of a specific patient, then it will navigate to the next screen.

On the second screen (Patient Details Screen), there will be a Display form that will contain all the details of the patient. If you want to change anything in that display form, then you can click on Edit icon otherwise click to Back or Trash icon.

On the third screen (Patient New Registration Form), It contains an Edit form, when you will click on the add icon in the first screen (Patient Registration Details Screen), then it will navigate to this Edit form.

On the fourth screen (Patient Edit Details Form), It contains an Edit form, when you will click on the edit icon in the second screen (Patient Details Screen), then it will navigate to this Edit form.

Below screenshot represents all four screens as:

  • Registration Details (List Screen)
  • Patient Details (Blank Screen with Display Form)
  • Patient New Registration Form (Blank Screen with Edit Form)
  • Patient Edit Details Form (Blank screen with Edit Form)
create a canvas app from SharePoint Online list in Powerapps

Create a List Screen in PowerApps (Registration Details)

Click on New screen present under the Home/Insert tab. You can see a number of screens are available inside the new screen as Blank, Scrollable, List, etc. Here select a List screen as shown below.

Create Canvas app in Power Apps from SharePoint List

Under the Properties section, select the Data source to your SharePoint list (Hospital Registration Details).

Create a Canvas app in Power Apps using SharePoint List

At the top of the new screen, the screen title will appear as App. You can rename the App Title by just double-clicking on it. As I have renamed it to Registration Details.

Similarly, you can see the Header Title properties at the right side of the page under the LABEL section. You can change the Title Properties as Font, Font Size, Font Weight, Font style, Text alignment, etc.

To change the data display format, Select the body part of your screen. Go to Properties and click on Edit option from Fields section.

choose your Data fields at which position you want to view. As in the below screenshot, I selected only the Title field. Select the Layout as Title as like below.

Create a Canvas app in PowerApps using SharePoint List

Now add the below icons in the new List screen: (Go to Insert tab -> Icons)

  • Reload: It helps to refresh the records.
  • Add: It helps to create a new record.
create a power apps app for sharepoint online list

Select the Reload icon and apply the below refresh formula in the formula bar.

OnSelect= Refresh([@'Hospital Registration Details'])
create a canvas app using sharepoint list in powerapps

Select the Add icon and apply the below formula in the formula bar.

OnSelect= NewForm(Form1);Navigate('Patient New Registration Form', None)

Here, Patient New Registration Form is a new Edit form. When the user will click on the Add icon, then this new edit form will open where he/she can enter a new record.

create a canvas app using sharepoint list in power apps

Create a Display Form in PowerApps (Patient Details)

Follow these below processes to create the Display form in the second screen (Patient Details):

Go to Home/Insert tab -> New Screen -> Select Blank as shown in the below screenshot.

Create Canvas app in PowerApps using SharePoint List

Now go to Insert tab -> Click on Forms -> Select Display.

Create Canvas app in Power Apps in SharePoint List

Select Data source as SharePoint List under the Properties section from the DISPLAY form.

Click on Edit fields and add all the fields. Select 2 in the Columns field and Vertical in the Layout field as shown below.

Create a Canvas app in PowerApps in SharePoint List

Click on FormViewer1 and write the display formula in the formula bar as like below:

Item= TemplateGalleryList1.Selected
Create Canvas app in PowerApps in SharePoint List

To add a Header on the top of the Display form, go to Insert tab -> Select Text -> Click Label/Text input as shown below.

Provide a Header Title (Patient Details Form) to the Display form by just double-clicking on it.

Create a Canvas app in Power Apps in SharePoint List

Add the below icons in the Display form: (Go to Insert tab -> Icons)

  • Back: It helps to navigate to the back screen.
  • Trash: It removes the item from the screen.
  • Edit: It helps to edit the form.
how to create a canvas app using SharePoint list in Powerapps

Select the Back icon and apply the below back formula in the formula bar. It will navigate to the first screen (Registration Details).

OnSelect= Navigate('Registration Details', None)
how to create canvas app using SharePoint list in Powerapps

In the same way, for the Trash icon, select and apply the below formula in the formula bar.

OnSelect= Remove('Hospital Registration Details', TemplateGalleryList1.selected); Back()
how to create canvas app using SharePoint list in Power apps

Select the Edit icon and apply the below edit formula in the formula bar.

OnSelect= Navigate(['@Patient Edit Details Form'], None)
how to create a canvas app using SharePoint list in Power apps

Create an Edit Form in PowerApps (Patient New Registration Form)

Follow the below instructions to create an Edit form in the third screen (Patient New Registration):

Go to Home/Insert tab -> New Screen -> Select Blank as like previous.

go to Insert tab -> Click on Forms -> Select Edit as shown below.

change display form to edit form in power apps

Select Data source as SharePoint List under the Properties section from the EDIT form.

Click on Edit fields and add all the fields. Then click on the Add button. Select 1 in the Columns field and Vertical in the Layout field as shown below.

create canvas app using sharepoint list

Click on Form1 and write the formula in the formula bar as like below:

Item= TemplateGalleryList1.Selected
create a canvas app using sharepoint online list in power apps

To add a Header on the top of the Edit form, go to Insert tab -> Select Text -> Click Text input as shown below.

Specify a Header Title (Patient New Registration Form) to the Edit form by just double-clicking on it.

create canvas app using sharepoint list in Power apps

Add the below icons in the Edit form: (Go to Insert tab -> Icons)

  • Save: This icon helps to save the edit form.
  • Cancel: This icon helps to cancel the Edit form and go back to the Display form.

Select the Save icon and apply the below formula in the formula bar.

OnSelect=SubmitForm(Form1)
create a canvas app from sharepoint list using Powerapps

Select the Cancel icon and apply the below formula in the formula bar. This formula will also help you to go back directly to the first registration screen.

OnSelect=ResetForm( Form2 ); Back()
create a canvas app from sharepoint list using Power apps

Create an Edit Form in PowerApps (Patient Edit Details Form)

If you want to edit or modify any record, then this edit form will help you.

In the same way, Go to Home/Insert tab -> New Screen -> Select Blank like previous edit form.

go to Insert tab -> Click on Forms -> Select Edit as shown below.

change display form to edit form in power apps

Select Data source as SharePoint List under the Properties section from the EDIT form.

Click on Edit fields and add all the fields. Then click on the Add button. Select 3 in the Columns field and Vertical in the Layout field as shown below.

create canvas app using sharepoint list in powerapps

Click on Form2 and write the formula in the formula bar as like below:

Item= TemplateGalleryList1.Selected
create a canvas app using sharepoint online list in power apps

To add a Header on the top of the Edit form, go to Insert tab -> Select Text -> Click Text input as shown below.

Specify a Header Title (Patient Edit Details Form) to the Edit form by just double-clicking on it.

create canvas app from sharepoint list

Add the below icons in the Edit form: (Go to Insert tab -> Icons)

  • Save: This icon helps to save the edit form.
  • Cancel: This icon helps to cancel the Edit form and go back to the Display form (Patient Details Form).
create a canvas app from sharepoint online list

Select the Save icon and apply the below formula in the formula bar.

OnSelect= SubmitForm(Form2)
create a canvas app from sharepoint online list in Power apps

Select the Cancel icon and apply the below formula in the formula bar. This below formula will also help you to go back to the display form.

OnSelect= ResetForm(Form2); Back()
create a canvas app from sharepoint list in Powerapps

Preview Canvas app in PowerApps

To Preview the Power Apps, Press F5 or Run icon on the top of the page. This below screenshot represents the total performances of Display and Edit form.

Select the Add icon from Registration Details -> It will open a Patient New Registration Form -> Save the Form once the new item is added.

Select the arrow icon from Registration Details -> It will open a Patient Details Form -> Click on Edit icon -> Edit any field in the Edit form (Patient Edit Details Form) -> Save the Form otherwise Cancel the form. If you will cancel, then it will go back to the Registration Details screen.

Similarly, In the Display screen (Patient Details Form), If you want to delete the record, then simply click on the Trash icon otherwise go back to the First screen (Registration Details) by clicking on the back icon.

create powerapps from sharepoint list

Save and Publish PowerApps App

Once the PowerApps is done, you need to Save and Publish the app. Go to the File tab from the top of the page as shown below.

create a canvas app from sharepoint list using Power Apps

Provide some Version note about the updates you have made. Click on Save.

create canvas app from SharePoint list using Powerapps

Click on Publish button as like below.

create canvas app from SharePoint list using Power apps

If you want to modify the app details before publishing like App Name, Icon, Description, etc., then click on the Edit details otherwise click on Publish this version.

create a canvas app from SharePoint list using Power apps

Share the PowerApps App

You can share the Powerapps app with other users in your organisation. So that they can use this app easily. Click on Share button as like below.

create app from SharePoint list in Power apps

Provide a name or email address of the user whom you want to share the Power apps. Check to Send an email invitation to new users. Click on Share.

create a app from SharePoint list in Power apps

When you will share the app with another user, then an App Web link will generate automatically. You can open this canvas app through this web link as below screenshot.

create an app from SharePoint list in Power apps

Also, you may like the below Power Apps tutorials:

In this PowerApps tutorial, We discussed how to create a PowerApps Canvas App for a List in SharePoint Online. Also, we saw how to create a New form, Edit and Display form in PowerApps for the SharePoint Online list.

We also saw how to preview and publish the PowerApps App, so that users can use the App.

>