How to Create a Canvas App in Power Apps

Are you interested to build a Power Apps Canvas app? Follow this Power Apps tutorial to explore an overview of Power Apps Canvas App, and How to Create a Canvas App in Power Apps.

Also, We will discuss how to create different Screens in Power Apps Canvas app, how to add a data source (SharePoint) to the Canvas app, and how to submit data from Power Apps Form to SharePoint Online List.

Also, Read: How to Filter Power Apps Gallery by Person

Overview of Power Apps Canvas App

• In Power Apps, we can design and build a business app from a Canvas app by writing less code.
• We can create a Canvas app with a blank screen and design your app visually by adding different components, controls, properties, and data sources (More than 200) such as:

1. SharePoint
2. Excel
3. Dataverse
4. OneDrive
5. SQL etc.

• Power Apps Canvas app mostly begins with building a User experience and using high customization.
• We can use the Power Apps Canvas app for internal & external users as per business goals.

How to Create a Canvas App in Power Apps

Let us discuss how to create Power Apps Canvas app from Scratch as per the business scenario. Follow the below steps are:

• Open the Microsoft 365 App launcher -> Select Power Apps under the Apps section as shown below:

Here, there are three different ways where we can create Power Apps Canvas app:

1. From the Power Apps Home page
2. From + Create option
3. From Apps option

1. Create Power Apps Canvas App from Power Apps Home page

Firstly, we will see how to create Power Apps Canvas App from the Power Apps Home page. Observe the below points:

• Open the Power Apps Home page -> Click on the + Blank app as shown below:

• In Create window -> Click on the Create button under the Blank canvas app like below:

2. Create Power Apps Canvas App from + Create option

Here, we will explain how to create Power Apps Canvas App from + Create option. Follow the below steps are:

• Click on the + Create option -> Create your app by clicking the + Blank app and select Create button under the Blank canvas app like below:

3. Create Power Apps Canvas App from Apps option

Similarly, we get another way to create a Power Apps Canvas app by using the Apps option.

• Click on the Apps option -> Select + New app drop-down -> Click on the Canvas option as shown below:

• Once select the Canvas, it will ask for the App name (Furniture Types) and select the Format (Tablet or Phone).
• Next, select Create button like below:

These are the three different ways to create a Canvas app from Power Apps.

Check out: Power Apps Button Control [How to Use]

Power Apps Canvas App Example

Let’s take a simple scenario. Here, I have taken a SharePoint Online List named Order Forms with different columns such as:

1. Customer ID = This is a Default Single line of text, I just renamed it as a Customer ID.
2. Furniture ID = Lookup column
3. Order Date = Date and Time column
4. Delivery Date = Date and Time column
5. Price = Currency column

Here I want to submit a new furniture order via the Power Apps form. The user will enter a new record via a form and click on the Submit button. Once he/she will submit, then the new record will create in the SharePoint list (Order Forms).

For this purpose, I have created three different Power Apps screens such as:

1. Welcome Screen
2. Form Screen
3. Success Screen

• When the user opens the app, a welcome screen will appear (Welcome to Order the Furniture). Once the user will click on the Navigate button, it will redirect to the second screen i.e. Form Screen.
• The user will enter a new record via Power Apps Form and Click on the Submit button. Once he/she submits the record, it will navigate to the Success screen (Third screen).
• Finally, the new record will submit in the SharePoint Online list (Order Forms) as well.

Refer to the image below.

Now, we will discuss step-by-step how to achieve it:

Welcome Screen

• In the Canvas app, there will be a Default new screen. I just renamed this screen name to Welcome Screen.
• In this Welcome screen, Go to + Insert tab -> Select Text label control.

• Click on the Text label -> Write the text in the Text property as shown below:

Text = "Welcome to Order Furniture"

• Then, Add a Navigate arrow icon (>) and set its OnSelect property to the code below:

OnSelect = Navigate('Form Screen')

Where,

1. Navigate = This function can be used to redirect to other screens
2. Form Screen = Name of the Second screen

This is how to create a Welcome Screen in Power Apps Canvas app.

Form Screen

Let’s see how to Create a Form Screen in the Power Apps Canvas app, Follow the below steps:

• Go to the + New screen -> Select Blank screen -> I renamed it a Form Screen.
• In this Form screen, add a Text label control -> Write the text in the Text property as shown below:

Text = "Furniture Order Form"

• Then, click on the +Inset tab -> add an Edit form to the Form Screen as shown below:

• Now, go to the Add data option -> Search data source (SharePoint) -> Select a specific SharePoint site -> Choose a list (Order Forms) under the SharePoint site -> Click on the Connect button.

• Now we will connect this SharePoint list to the Power Apps Edit Form. Select the Edit Form and set its Data source property to the SharePoint list.

Data source = Order Forms

• Next, we can see the Edit Form will appear with all the SharePoint fields like Title (I just renamed it to Customer ID), Furniture ID, Price, etc.
• Here, I just deleted the Attachments field from the Edit fields as per my requirement. To delete the field, Go to Edit fields -> Click … of the Attachment Data card -> Remove.

• Also, if you want to design the Power Apps edit form more attractive, then you can use the below properties under the Properties pane:
  • Columns
  • Layout
  • Default mode
  • Font size
  • Font
  • Font color

• Insert a Button control on the bottom -> Rename the Button as Submit using the Text property.
• Select the Submit button and Set its OnSelect property like below:

Onselect = SubmitForm(Form1);ResetForm(Form1);Navigate('Success Screen')

Where,

1. SubmitForm = We can use this function to save data from Edit Form to the data source
2. Form1 = Name of the Edit Form
3. ResetForm = Reset Form can reset the content of a Form to its initial values
4. Navigate = This function can be used to redirect to other screens
5. Success Screen = Name of the third screen

This is how to create a Form Screen in Power Apps Canvas app.

Success Screen

Similarly, we will create a third screen i.e. Success Screen in the Power Apps Canvas app. To do so, follow the below instructions:

• Go to + New screen -> Templates -> Select Success screen -> Rename the Screen as Success screen like below:

• Here, change the Background color and Rename the Text label as “This Order was submitted successfully “ in the Text property as shown below:

This is how to create a Success Screen in Power Apps Canvas app.

Now our Power Apps app is ready to use. Just Save and Publish the app. Also, we can test the app by using the Preview button.

See the below image that shows how to publish the application by using Publish this version button:

This is how to Publish a Canvas app from Power Apps.

Have a look: How to Show Hide Power Apps Label Control On Button Click

Power Apps Submit data to SharePoint Online List

Now we will see how to Submit data to SharePoint Online List. Play the app (Apps -> Order Details (…) -> Play icon) as shown below:

• Now, the user will get a Welcome Screen (Welcome to Order the Furniture). Once the user will click on the Navigate button, it will redirect to the second screen(Form Screen).

• Here, the user will enter a new record via Power Apps Form and Click the Submit button. Then it will navigate to the Success screen (Third screen) like below:

• Finally, the new record will submit in the SharePoint Online list (Order Forms).

Refer to the image below:

This is how Power Apps Submit data to SharePoint Online List.

Moreover, you may like some more Power Apps and SharePoint tutorials:

• Power Apps Modern Button Control
• Power Apps CRUD Operations
• Power Apps Modern Date Picker Control

Conclusion

From this Power Apps tutorial, we learned an overview of Power Apps Canvas App, and how to create Power Apps Canvas app from Scratch.

And also, covered how to create different Screens in Power Apps Canvas app, how to add a data source (SharePoint), and How to submit data from Power Apps form to a SharePoint Online List.