In this article, we are going to leverage Microsoft Power Apps to perform CRUD (Create, Read, Update, and Delete) operations on SharePoint List. Power App is an easy tool that we can use to rapidly create apps and connect to a number of services but in this tutorial, we will look only in SharePoint operations.
I hope you all have a basic understanding of the Microsoft PowerApps.
Creating a Power App
- Go to Power App Portal
- Click on New App >> Canvas
- A few data service providers will appear, Select SharePoint
- In the next screen, it will ask for the SharePoint site to connect to. Enter the site URL and click on Go. It also gives a list of the recently opened site below the textbox.
- Now select the list on which you want to perform the operations. If you don’t find the list, you can scroll down, you can enter the list name here and search the list/library here.
- It will take some time to set up the app.
- Click on the button File from Ribbon and Save the App.
- Your app is already connected directly to a SharePoint list, it will show some screens like Browse, Detail, and Edit screens.
Note:
- To modify the objects in Power Apps, you just need to select the object from the Tree View section, that object will be highlighted in the middle section and the properties you can update from the rightmost section.
- Select the object: You can select the object from the Tree view section. All the screens, galleries, each object is a list in the tree view.
- Highlighted Object: when you select the object, you can see it highlighted in the Middle screen so that you are aware of exactly which object you are modifying.
- The function of the object: You can see the function of the selected object
- Properties of the object: you can change the UI of the selected object from the properties panel.
Read Operation in Power Apps
- In this section, we will go through the Browse Screen and Detail Screen. There are a number of configurations over here.
- Browse screen is where you search the data and when you click on the arrow icon of any row, it goes to the Details screen of that row item.
- Browse Screen: This is the place where all the results will be loaded.
- Select the results panel:
- ACTION - OnSelect: It shows the action that is going to be performed when you click/select any of the displayed result rows. In this scenario, it navigates to the Details screen. Notice the Screen Transition: It is nothing but the effect when you navigate from the current screen to the next screen.
- DATA – Items: This is the function to govern how the results will be displayed in the panel. As you can see there’s a sorting (SortByColumns) applied, you can set your own rendering logic using the function.
- Function for Browse Screen –
- As you can see, for results load it is a different function and when row item is selected, the action is different.
- Result load function: Filter([@CustomerDocLib], StartsWith(Title, TextSearchBox1.Text))
- Explanation: The main function over here is Filter. In this, the first parameter is a list of items and the second parameter is for logical filtering the list of items. Additionally, you can also apply to sort in this.
- Row Item Selected: Navigate(<<ScreenName>>, <<TransitionType>>)
- Explanation: Here, we are just navigating to the other screen for which we use Navigate function. The first parameter is the Screen name where you want to navigate, and the second parameter is the type of transition. It is to decide how you want your screen to look when it is switching from one screen to another.
- You can also add more labels as shown in the screenshot. Once you add the label, you can select the label and from the advanced tab, you can change the field of the label.
- Detail Screen: You can use this space to display all the additional fields and values when users click on a particular list item from the earlier screen (Browse Screen).
- You can see in the screenshot; all the fields and their values are displayed. You can change the UI and the other formatting, it’s self-explanatory.
- Function for Detail Screen – There are two things here. DataSource and Item.
- DataSource: Specify the data source from which you want to show the data
- Item: BrowseGallery.Selected
- Explanation: The item, which was selected in the Browse screen, will be displayed here.
Edit Operation in Power Apps
- From the tree view, select the Edit Screen.
- Here you can put all the columns of which you want to update the values.
- If you look at the Tick icon in the top right corner, it is a submit function.
- So instead of that tick icon, you can also put your own Submit button.
- The trick is that you click on that icon and copy the function from the bar.
- Add a button and for that button just paste the function.
- Function for Update - SubmitForm(<<FormName>>)
- Explanation: Here only one function is that which is SubmitForm and you need to give the form name, that’s it.
Delete Operation in Power Apps
- When you go in Detail screen, you can see in the top bar the Delete button is available.
- You can also customize this Delete button as specified in the above section.
- Function for Delete - Remove([<<CollectionOfData>>],RowItem)
- Explanation: Here, the function is Remove which takes mainly two arguments. One is the collection of data and the second is the row item from that collection of data that you want to delete.
Create Operation in Power Apps
- When you go in the Browse screen, you can see in the top bar Add (+) button is available.
- You can also customize this Add button
- Function for Create - NewForm(<<FormName>>,Navigate(ScreenName,ScreenTransition)
- Explanation: Here, the function is NewForm. which takes mainly two arguments. One is Form Name and the second is Navigate, which will eventually use the Edit form with blank screen/empty data. You can use the new form as well.
