Creating Canvas Applications For SharePoint List Data Operations

Posted on by

In this article we will learn how we can create Canvas application in PowerApps to perform CRUD operation in few simple steps.

Open the PowerApps portal following any one of the steps given below,

Via Office 365 Portal.

Login to https://www.portal.office.com, expand the top left tile, and you will see the menu for PowerApps.

Another way is, hit https://make.powerapps.com/ URL into the browser and you will see the following PowerApps portal window.

Then click on SharePoint from “Start from data”

 

Then You can select your connection from the connections. You will have your default SharePoint connection over there by default. And select your SharePoint site from the right pane. In case it is not showing into the Recent Sites, then you can search your site from the search box.

In case if you don’t have your SharePoint connection ready then you can create your new connection by clicking on “New connection” link from the left navigation. Once you click that link you will see list of all connections available to the PowerApps, now just scroll down and locate SharePoint connector.

Then select “Connect directly (cloud service)” to connect to SharePoint Online. If in case you need to connect SharePoint On Premises, then you will need a On Premises Connector and then you have to select “Connect using on-premises data gateway” option.

Click on “Create” after selecting the “Connect directly (cloud services) option and it will add that connection to your connection navigation pane. Here you can see that now I have 2 active connection for SharePoint.

Now click on the SharePoint Site from the “Connect to SharePoint site” pane. Now it will display a list of all SharePoint Online list available to that given SharePoint site. Click on the list you want to add into your PowerApps canvas application. In my case, I am adding Employee Registration list to the canvas.

Select the list and click on Connect button from the bottom right corner of the page.

Now it will start loading and it will build an app with Create List Item, Edit List Item, View List Item and Delete List item functionality.

Let’s Play this app

Click on the Play button from the top right corner or simply hit F5 button from the keyboard to make this application run on the browser window.

Adding a new list item

Click on the + plus icon from the top right of the app and it will open a create item form.

Enter the data that you want to add and then hit check icon from the top right corner to save the data to SharePoint list. If in case you want to cancel the form filled, simply hit X button from the top left corner of the app. Once you will save the data it will navigate back to the main screen and now you will see your newly created data.

By default it sorts our data such as last inserted data appears on the top. Now let’s understand the screen functionality quickly.

  1. Your SharePoint list name will be your PowerApps form title.
  2. Refresh the data into the app. in some case if anyone have added the data into SharePoint list directly, then clicking this refresh button will refresh the SharePoint list data source and bring that data into the app and display in the list view.
  3. Sorts the data ascending/descending order. It works like a toggle button. If your data are displaying in ascending order, clicking this will make it display as descending order and if data is in descending order, then clicking this button will make data to display in ascending order.
  4. From here you can create a new item to the SharePoint list. We just saw that before
  5. From here you can search data into the list. that will search on the Title column by default. You do not need to press anything to display the search result. The search result will display as soon as you type.
  6. Clicking this icon will open Item View form.

Viewing item

Click on the > icon or any where in a row to view the item detail.

Here I have clicked on Employee-2. You will have following screen.

  1. This will navigate you to the previous screen
  2. You can delete the item by clicking on this trash icon
  3. If you need to edit the item detail then click on this pencil icon
  4. Displays the item detail view.

Editing the item

If you need to edit the item, first open the item into View mode and then click the pencil icon from the top right corner of the screen. You will see your data pre-filled into the form.

Edit the data and click on Check icon from the top right corner of the screen. It will update the data and redirect you back to the previous screen and you will see your updated data.

Deleting the item

To delete the item, first of all open the list item in View mode. Then click on Trash icon from the top right corner of the screen. As soon as you click that icon your data will be deleted.

CAUTION: Do not click trash icon if you are not sure to delete the item. Because it will not show any confirmation box before deleting. It will delete instantly as soon as you click on the icon.

After deleting the item it will redirect you to the main screen again.

you can see that Employee-2 Edited item is deleted.

Save the form

To save the PowerApps changes, just click on File and you will have following screen

Just enter the name for your app and hit Save button from the bottom right corner of the screen. The app will be saved.

You can now share the app with your colleague or you can see previous versions of the apps. This kind of apps doesn’t need to be published.

Opening the app again

If you come some other day and you want to edit the app again, so open the PowerApps portal again and click on Apps menu from the left navigation menu. And you will see your app is available over there.

If you just want to play the app, then click on the app name and it will open a new window in which you can play with your app.

In case if you want to edit the app then click on ellipses next to the app name and click on Edit link.

This will open a new window with this app open in edit mode. And then you can do your editing over their such as changing background color, etc and save it again.

Summary

In this article we have learned how we can create the apps from default data source. We have also seen that how we can perform Create, Edit, View and Delete operation on the SharePoint list item using default app template created by PowerApps.

If you have any query or comments or suggestions, please feel free to write in comment section.

(Visited 360 times, 1 visits today)