Create a canvas app from Excel in PowerApps (Step by Step tutorial)

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

We will also check, how to add a new screen in the PowerApps App, as well as how to Display form and Edit form in PowerApps.

To create a Canvas app using the PowerApps, We have to follow these two steps as:

  • Create and Format an Excel file as Table and Upload it into OneDrive for Business
  • Create a Canvas app from Excel in PowerApps

Also check:

Create and Format Excel as Table and Upload it into OneDrive for Business

First, we need to create an Excel file using some sample records as below.

create a canvas app from excel data using power apps

Open the excel file, Go to the Home tab and click on Format as Table option. Select any table format as shown below.

create a canvas app from excel data in power apps

Below are the table formatted Excel Data. Also, change your Table name.

create a canvas app from excel data in powerapps

Save your Excel file under the name (EmployeeWorkStatus.xlsx) and close it.

Upload your Excel file into any Cloud-Storage account like OneDrive, OneDrive for Business, etc.

create canvas app from excel data in power apps

Create a Canvas app from Excel in PowerApps

Follow the below steps to create a Canvas app from Excel Data using PowerApps.

Step-1: (Create Canvas app from blank)

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

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

create a canvas app from excel data using powerapps

Step-2: (Specify Name for App)

Provide a name for your new app (EmployeeExcelApp), 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 excel data using powerapps

Step-3: (Connect to Data Source)

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

create canvas app from excel data using 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 OneDrive for Business under the Connection section and add your connection.

create app from excel spreadsheet

Step-4: (Choose an Excel file)

In the Choose an Excel file box, type or paste the first letter of EmployeeWorkStatus to filter the list. Once you get your uploaded file, select it.

create canvas app from excel spreadsheet

In the Choose a table section, select the checkbox for Employee_Work_Status and then click on to Connect. Now you can close your data pane by using a cross icon.

create a canvas app from excel spreadsheet

Read Power Apps Slider Control

Create a New Screen in PowerApps

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 app from excel spreadsheet using power apps

The new List screen will appear as like below screenshot.

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 Employee Records.

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.

create a canvas app from excel spreadsheet using power apps

In the same way, if you want to change the properties of the Body or GALLERY part, then just select the body and change the Gallery properties under the GALLERY section.

Here, I have changed the Layout from Image, title, and subtitle to Title, subtitle, and body by clicking on the down arrow option.

create canvas app from excel spreadsheet using power apps

Now in the Formula bar, Replace TempateGalleryList2 with Employee_Work_Status. You can see the excel records with your formatted layout.

create a canvas app from excel spreadsheet using powerapps

Edit Field Data in PowerApps Screen

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

create a canvas app from excel spreadsheet in powerapps

Now you can choose your Data fields at which position you want to view. As in the below screenshot, I selected the WorkingTime field in Body2, Weekend field in Subtitle4 and EmployeeName in Title6.

create canvas app from excel spreadsheet in powerapps

Now the excel records are appearing in the screen as like the below screenshot.

create a canvas app from excel spreadsheet in power apps

Now we will see how to create a Display form, Edit form of Employee using PowerApps.

A display form will help you to view all the details of an Employee whereas an edit form will help to edit or modify any field of an employee using PowerApps.

Also, you can save the edit form once your modification is done.

Requirement:

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

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

On the second screen (Employee Details Screen), there will be a Display form that will contain all the details of an employee. 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 (Employee Edit Screen), It contains an Edit form, when an employee clicks on the edit icon in the second screen, then it will navigate to Edit form.

Below screenshot represents all three screens as:

  • Employee Details Screen (List Screen)
  • Employee Display Screen (Blank Screen)
  • Employee Edit Screen (Blank Screen)
powerapps edit form item

Create a List Screen using PowerApps

Here you will learn how to create a Display form using PowerApps. This below screenshot represents the first screen (Employee Details Screen).

Follow the below process to create the first screen (Employee Details Screen):

Go to Home/Insert tab -> New Screen -> List -> click on Connect to data -> Select OneDrive for Business -> Choose Excel file -> Select Table name -> Click on Connect.

Select the body part of the screen -> Go to Properties tab under the GALLERY section in left navigation -> Select Layout as Title as shown below.

create edit form in powerapps

To navigate the second screen, write the formula in the formula bar by selecting the next arrow icon (>).

OnSelect= Navigate([@'Employee Display Screen'], None)
power apps edit form item

Create a Display Form in PowerApps

Similarly, follow the below processes to create the Display form in the second screen (Employee Display Screen):

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

create edit form in powerapps using canvas app

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

create an edit form in powerapps using canvas app

Select Data source under the Properties section from the DISPLAY form.

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

display form item in power apps

Click on FormViewer1 and write the display formula in the formula bar.

Item= TemplateGalleryList1.Selected
display form item in powerapps

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

display form item using power apps

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

display form item using powerapps

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

  • Edit: It helps to edit the form.
  • Back: It helps to navigate to the back screen.
  • Trash: It removes the item from the screen.
display form item powerapps

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

OnSelect= Navigate('Employee Edit Screen', None)
powerapps display form

Select the Back icon and apply the below back formula in the formula bar.

OnSelect= Back()
power apps display form

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

OnSelect= Remove(Employee_Work_Status, TemplateGalleryList1,Selected); Back()
power apps display form using canvas app

Now to Preview the Display screen, Press F5 or Run icon on the top of the page.

powerapps display form items

Select the next arrow icon (>) of any employee from the screen.

create a display form in powerapps

In the second screen, you can see that specific employee’s details. Also, you can edit, go to back and delete that specific employee details from the screen as shown below.

create a display form using powerapps

Create an Edit Form using PowerApps

Follow the below instructions to create an Edit form in the third screen (Employee Edit Screen):

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

power apps change display form to 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 under the Properties section from the EDIT form.

change display form to edit form in powerapps

Click on Edit fields and add all the fields. Then click on the Add button.

change display form to edit form using powerapps

Select 2 in the Columns field and Vertical in the Layout field as shown below.

change display form to edit form in powerapps.png

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 (Employee Edit Form) to the Edit form by just double-clicking on it.

powerapps edit form item property

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)
powerapps edit form item properties

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

OnSelect=ResetForm(Form1); Back()
powerapps edit form items property

Preview the 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 arrow icon of an employee -> click on Edit icon -> Edit any field in the Edit form -> Save the Form otherwise Cancel the form. If you will cancel, then it will go back to the previous details form.

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

Edit form in Power apps

Save and Publish the PowerApps

Once the Power Apps 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 excel using Power Apps

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

create a canvas app from excel using PowerApps

Click on Publish button as like below.

create a canvas app from excel in PowerApps

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

create a canvas app from excel in Power Apps

Modify the app with Name, Icon or Description and Save it.

create canvas app from excel in Power Apps

Again Publish the app by using Publish this version button as shown below.

create canvas app from excel in PowerApps

Share the PowerApps

Also, you can share the new app with other team members in your Organization. So that other people can use this app easily. Click on Share.

how to create canvas app from excel in PowerApps

Enter a name, 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.

how to create canvas app from excel in Power Apps

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

how to create canvas app from excel using Power Apps

Also, you may like the below Power Apps tutorials:

In this Power Apps tutorial, We discussed how to create a Canvas app from Excel in PowerApps.

Also, we saw how to create a New Screen, a List Screen in PowerApps. We learned to create a Display Form, Edit Form from Excel data in Power Apps.

  • Excellent guide! Unfortunately the forms under Dispaly is deprecated, seems we need to use the vertical container now… can you update the guide? thanks

  • >