How to create a Canvas App from scratch using SharePoint

This blog is PART 3 of the blog Series Create a Canvas App from Scratch using SharePoint. In this blog, we will discuss how to create list with items in SharePoint and use it to create an app in Power Apps.

Go through the other blog of the series:

Create A canvas app from scratch using Excel from OneDrive for business

Create a canvas app from scratch using Common Data Service (CDS)

Create a List in SharePoint

  • Firstly, we will go to the SharePoint site where we need to create a list. For the blog purpose, I have created site with PowerApps name in SharePoint.
  • On the Site contents page, click on New dropdown icon and select List.
  • It will open a form Create list, enter Employee Details in Name, and records of employees in Description and click on Create. Thus, we created a List with the name of “Employee Details” for the blog purpose.
  • In the Employee Details List, rename title to Employee ID from Add column dropdown add columns like First Name, Last Name, Country, City etc.
  • From Add column dropdown add columns like First Name, Last Name, Country, City etc. by filling the pop-up form of Create a column with all the information required and respective datatypes for the column.
  • Add items in the Employee Details List by selecting New, and fill the details to make records as per your requirement. Click Save to add items in the List.

Create a Canvas App from SharePoint List in Power Apps

Once we have created the list in the SharePoint, we can follow the below steps to create a Canvas App.

Let’s get started:

Step1: Login to Power Apps

Navigate to Power Apps home site from here using Microsoft Office 365 credentials. If you are new to Power Apps and want to identify your current license or start using Power Platform trial, click here.  

Step2: Create a Canvas App from blank

There are three ways to make an app within Power Apps: Canvas App from blank, Model driven App from blank and Portal from blank.

From the navigation bar on right hand side click on Create and select Canvas App for blank.

Step3: Specify name for the App

Provide the name for your new app “Employee Management App”. Choose the format as Tablet.

Step 4: Connect to data source

Once your blank app is created, go to View from top navigation bar and select Data sources. In the Searchbox enter SharePoint to see it from more than hundreds of connectors.

It will give you two option: Connect directly (Cloud services) and Connect using on-premises gateway. Select Connect directly.

Select the site from the list given or you can directly enter the URL for the location of your list

Step 5: Add Screens and create a complete app in canvas

Add new screen from Home or Insert tab, select List from different options. Rename it to Employee Data Screen.

On the left under Properties in the Layout, select Title, Subtitle and body

Under the tree view, change the title in the Text from App Name to Employee Data

Under Properties tab, change the Font size to 32 and rename the label to lblEmployeeData

Add the below icons to Employee Data Screen from the Insert Tab:

Add: It will help to create new records of employees.

Reload: It will help to refresh the records.

Sort: It will help to sort the records in ascending or descending order as per your preference.

To Sort items in the Gallery, follow the steps:

  • click icon and set OnSelect property to: UpdateContext({SortDescending1: !SortDescending1})
  • Now Select Gallery and set item property to: SortByColumns(‘Employee Details’,”FirstName”, If(SortDescending1,Ascending,Descending))

Select the reload icon and set the OnSelect property to: Refresh([@’Employee Details’])

Add New Screen, Select Blank and from Insert tab add Forms by selecting Edit option. Rename the screen to Employee Registration Screen

Set the form name to frmEmployeeRegistration­­­­. Customize the form from the Properties like change the column from 3 to 2 and change the size. Add the data source.

To Add the header in the Employee Registration Screen, add rectangle and from the properties tab set the position of X and Y to 0, change the size to 1024 and height to 64. Then add label from Insert tab and set the Text to “Employee Registration Form”. Also add Button from the Insert tab and set the text property to Submit.

Customize the submit button and set the OnSelect property to: SubmitForm(frmEmployeeRegistration);NewForm(frmEmployeeRegistration);

After the form is submitted, we will show the message on the success screen. To do so, will add a new screen from Home/Insert tab.

On the Success Screen, add Back icon from the Insert tab to navigate to the employee records and set its OnSelect property to: Navigate(‘EmployeeData Screen’)

Add new screen from Home/Insert tab. Rename it to Employee Edit Screen. Add Form and connect to the SharePoint List under properties in Data Source like we did in Employee Registration Screen. Rename the form to: frmEmployeeEdit.

Add the header like in previous screen using rectangle and label and customize it. Specify the Text in label as Employee Edit Detail Form. Add Check Icon to submit the edited form and back icon to navigate to Employee Data Screen.

Set the Item property of form to: TemplateGalleryList2.Selected

Set the OnSelect property of Check icon to: SubmitForm(frmEmployeeEdit)

Set the OnSelect property of Back icon to: Navigate(‘Employee Data Screen’)

Finally, In the Employee Data Screen, click on Add icon and set OnSelect property to: Navigate(‘Employee Edit Screen’,ScreenTransition.None)

Step 6: Test your app

Now you can test the app. Select the ViewScreen and then open Preview by selecting the Preview icon near the upper right corner or by pressing F5. You can add few records to test whether records are being added in the SharePoint List.

Step 7: Save and Publish your app

Lastly press Ctrl-S or click on Save from the navigation menu to save the app in the cloud to run it from other devices. Then you can click on Publish to share it with others.

 

Rashmi Kaushik

Software Consultant and Power Platform SME at Cynoteck with years of experience as full stack web developer. Dynamic and detail-oriented Web Developer with a knack for conceptualizing and delivering elegant, user-friendly solutions effectively and efficiently. She also posses strong expertise in AWS cloud based technology and is a certified AWS Solutions Architect and developer.

 

Leave a Reply

Your email address will not be published. Required fields are marked *