In this article, we are going to Connect SharePoint list webpart and the custom PowerApps made from the same list.
- Create a SharePoint list and add some data in it. Here we have created a list called, Financial.
- Go to Integrate >> Power Apps >> Customize forms.You can easily customize the form for a list created using Microsoft Lists, or a SharePoint document library by opening Power Apps in a browser.
- This will open the PowerApps window, from here you can easily customize form for a SharePoint list or document library.
- You can see the SharePoint Integration is established.
- Now you can customize this screen. I have kept the Edit form.
- The Item property of the Edit form will be something like this. In the later stage of the article you will understand why we have taken the parameter (Id) to select the item.
- We are going to use the Query String parameter to detect the item. If parameter is blank, we will get the selected item otherwise it will display the record having ID passed in Query string parameter.
If(
IsBlank(Param("Id")),
SharePointIntegration.Selected,
LookUp(
Financial,
ID = Value(Param("Id"))
)
)
- Save and publish the form.
- Get the App ID:
- We will require the app Id. You will not find this app listed in usual app Gallery because this app is customized directly from SharePoint.
- Click on the ellipsis >> Settings.
- Click on Support >> Edit
- Click on Authoring version (i) symbol.
- Go to Details tab and get the App ID.
- Page with List view web part and Power App:
- Go back to SharePoint and create a page with two sections.
- On the left side, put the list view web part that you had created earlier and on the right side put the embed webpart.
- In the embed web part, we will give URL of the PowerApps that we had customized.
- Click on Add embed code. Embed window will open. Click on Ellipsis >> Connect to source.
- It will list all the sources available on the page. Select the list view web part source of yours.
- Give URL in below format.
- Here the GUID is the GUID of the app.
- ID is the internal name of the column.
<iframe src="https://apps.powerapps.com/play/fd3f3ef3-3c2d-47c4-9230-1f9146e6740c?ID=[$ID]" width="444px" height="790px"></iframe>
- Make sure you give width and height.
- Save and publish the page.
- Output: You can see on left side we have selected an item in the list view web part and on the right side it has fetched that records and displayed in power app Edit form.
