Create a canvas app in PowerApps from a SharePoint list (Helpful tutorial)

Are you new to the PowerApps canvas app? This is a complete tutorial on how to create a canvas app in PowerApps from a sharepoint list. Step by step, I will explain, how to customize the SharePoint New, Edit, and Disp form using Microsoft PowerApps.

To create a canvas app from a SharePoint list, let us create a list in the SharePoint Online site.

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 Power apps.

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

create a powerapps app for sharepoint online list
Create a canvas app from a SharePoint list

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

create powerapps for sharepoint online list
Create a canvas app from a SharePoint list

Create a Canvas app from SharePoint List in PowerApps

Follow the below steps to create a canvas app in powerapps from a sharepoint list.

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 a canvas app in powerapps from a sharepoint list
create a canvas app in powerapps from a sharepoint list

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.

canvas app from blank
canvas app from blank

Step-3: (Connect to Data Source)

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

canvas app tutorial
canvas app tutorial

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.

canvas app sharepoint
canvas app sharepoint

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 from a SharePoint list
Create a canvas app from a 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.

sharepoint canvas app
sharepoint canvas app

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
sharepoint canvas app

This is how to create a canvas app in powerapps from a sharepoint list. Now let us see how we can create various screens.

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
create canvas app from sharepoint list

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

sharepoint powerapps examples
canvas app tutorial

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
canvas app from blank

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.
powerapps canvas app
powerapps canvas app

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

OnSelect= Refresh([@'Hospital Registration Details'])
how to create canvas app in powerapps
how to create canvas app 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
how to create canvas app in powerapps

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
powerapps canvas app sharepoint list

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

Create Canvas app in Power Apps in SharePoint List
powerapps canvas app 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.

canvas app sharepoint
canvas app sharepoint

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
create canvas app from sharepoint

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.

sharepoint canvas app
sharepoint canvas app

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
sharepoint canvas app tutorial

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
create a canvas app in powerapps from a sharepoint list

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
sharepoint canvas app

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 canvas app from sharepoint

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
create canvas app from sharepoint list

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
create canvas app from sharepoint online 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
canvas app sharepoint

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
canvas app sharepoint online

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
canvas app sharepoint online

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
canvas app sharepoint online list

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
create canvas app from sharepoint list

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
sharepoint powerapps examples

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
canvas app tutorial

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
canvas app from blank example

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
powerapps canvas app

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
powerapps canvas app tutorial

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
how to create canvas app 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
how to create canvas app in powerapps example

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
Publish powerapps app

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

create canvas app from SharePoint list using Powerapps
Create a canvas app from a SharePoint list

Click on Publish button as like below.

create canvas app from SharePoint list using Power apps
create a canvas app in powerapps from a sharepoint list

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
create a canvas app in powerapps from a sharepoint online list

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
How to create a canvas app in powerapps from a sharepoint list

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
Create a canvas app from a SharePoint list

Also, you may like the below Power Apps tutorials:

In this PowerApps tutorial, we discussed how to create a canvas app in powerapps from a sharepoint list. 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 to use the App.

  • Trash not working. The word ‘TemplateGalleryList1.selected’ has a green underline. HOW should I fix?????????

  • >