Create Custom SharePoint Online List Form With PowerApps Using Canvas App

PowerApps is a platform that helps to build an app without any limit. In this article, we will learn how to create and customize the SharePoint Online Form to submit the request.

PowerApps is a platform created by Microsoft to extend the capabilities of developers as well as power users.
 
PowerApps is an enterprise service that lets you connect, create, and share business apps with your team in minutes, using any device. You can create a PowerApps app for an existing list in SharePoint Online.
 
Create custom SharePoint Online List form with PowerApps using Canvas App
 
PowerApps extends the capability to connect with multiple sources. In this article, we are going to leverage this feature with SharePoint Online.
 
Create an OOTB generic SharePoint List name "Leave Request" with below schema.
 
S.NO
Column Name
Data Type
1
Leave Comment
Single Line of Text
2
StartDate
Date
3
EndDate
Date
 
Let's get started.
 
Step 1 - Navigate to the PowerApps application here.
 
Log in with your O365 credentials, provided your credentials have been assigned the PowerApps license.
 
Due to network traffic, sometimes the request navigates to here. In the end, it also provides the same interface and functionality.
 
Step 2 - Create a Canvas App
 
There are two types of Apps, i.e., Canvas App or Model Apps. In a nutshell, both seem similar, but they have a very basic difference,
  • Canvas App
    It's used to create a simple visual design without complicated coding or programming tools.

  • Model App
    It's used to design complex business logic with the ability to generate data model.
Select “+Create” >> Canvas app from blank.
 
Create custom SharePoint Online List form with PowerApps using Canvas App
 
Step 3 - Canvas App Name
 
Provide the App name and select the format as Tablet. Click "Create" to proceed.
 
Create custom SharePoint Online List form with PowerApps using Canvas App
 
Step 4 - Add Data Source
 
Once a blank app is created, select View -> Data Source. Type SharePoint to select the connection.
 
Create custom SharePoint Online List form with PowerApps using Canvas App
 
Step 5 - Connect to SharePoint Online Site Collection
 
Select the desired site collection from the availble list.
 
Create custom SharePoint Online List form with PowerApps using Canvas App
 
Step 6 - Select the List Name
 
Create custom SharePoint Online List form with PowerApps using Canvas App
 
Step 7 - Add Form to Screen
  1. Select Forms 
  2. Edit Form
  3. Select the Data Source from the left-hand side; i.e., List Name
  4. Edit Form will appear on the screen with a 3-column layout with all fields in the default views. Change the column and layout with 2 and vertical respectively.
  5. Select Mode to New.
  6. All controls appear on the form with a 2-column layout.
This form is going to create a new request.
 
Create custom SharePoint Online List form with PowerApps using Canvas App
 
Step 8 - Change the form setting
 
Click the File menu.
  1. Select App Settings >> Screen Size and Orientation >>Choose custom width and height.
Click "Apply" to save the changes.
 
Create custom SharePoint Online List form with PowerApps using Canvas App
 
Step 9 - Resize the Form and Control
 
Increase the width and height of the form.
  1. Select Title Data card >> set the width in the property as 1024.
  2. Select Data Card Value >> set the width of the text box in the property as 1000.
Follow the same steps for "Leave comments". Select an attachment and remove it.
 
Create custom SharePoint Online List form with PowerApps using Canvas App
 
Step 10 - Add Form Submit Button
  1. Add button to form and rename the text  “Submit” and select the form
  2. Choose the form “On Select” from the dropdown
  3. Change the value to “SubmitForm(Form1)
Once the "Submit" button is clicked, it will save the created form.
 
Create custom SharePoint Online List form with PowerApps using Canvas App
 
Step 11 - Add new screen 
 
Select Home -> New Screen -> Blank. It will add a new blank screen into an app.
 
New screen used for navigation after successful submission of the form. 
 
Create custom SharePoint Online List form with PowerApps using Canvas App
 
Step 12 - Add Success message to screen
  1. Select newly added screen2 -> Select insert ribbon -> Select Text
  2. Click HTML Text control.
  3. Select HTML Text control
  4. Add HTML Text to control like “Request Submitted successfully”
Create custom SharePoint Online List form with PowerApps using Canvas App
 
Step 13 - Navigate form on Success
 
Once the form gets submitted, it will navigate the form to screen 2 and show the success message.
  1. Select screen1 Form
  2. Select On Success from dropdown
  3. set value “Navigate (Screen2)  
Create custom SharePoint Online List form with PowerApps using Canvas App
 
Step 14 - Execute the Form
 
Press F5 to run the form and set all the details and click submit.
 
Create custom SharePoint Online List form with PowerApps using Canvas App
 
On successfully submitting the data into the SharePoint List, the form will navigate to screen2.
 
Create custom SharePoint Online List form with PowerApps using Canvas App
 
 Finally, the record gets added to the SharePoint List.
 
Create custom SharePoint Online List form with PowerApps using Canvas App
 
How easy and quick it was to build a custom PowerApps form solution, without a single line of code.
 
I hope you have enjoyed and learned something new in this article. In the next article, I am going to integrate the entire solution with SPFx Web Part.