Note: This is a step-by-step guide, so it can equally be used by People with beginner or advanced Power Apps knowledge.
You have got a SharePoint List containing data you want to edit and so you want to build a custom form, but soon you figure out that your plans simply exceed the limits of the SharePoint standard form.The good news:
There´s already a strong (and in some way powerful) binding between SharePoint and PowerApps. As you probably already know what I mean: I am of course talking about the PowerApps custom forms for SharePoint.But - The bad news:
The downsides of using PowerApps custom forms are well known. To name a few:
- The PowerApps Forms are always bound directly to the list. The solution is not listed in your app-overview as a standalone app, which makes it hard to export your solution like you are well capable of with Canvas Apps.
- You might experience some problems with the format, like too much whitespace. In our solutions with PowerApps Forms in tablet-design we were struggeling sometimes with this problems. Changing the screen-size in the App settings could solve some problems, but sometimes it seems that there´s randomly added some whitespace again
Our Solution - Binding Canvas Apps to SharePoint
It seems that we could solve most of the listed drawbacks of the PowerApps Forms by combining the advantages of PowerApps Forms (enter new and edit data directly from SharePoint Lists) and Canvas Apps (stable format/possible to export solution).
So In the End we will just use the PowerApps Forms to hand over the selected SharePoint ID when editing the List.
So that´s what we did and we´ll of course explain to you how we did it in the following paragraphs.
What we´ll do
- Create/use a PowerApps Canvas App that You want to bind to the SharePoint list and respectively want to use the New/Edit buttons in SharePoint to hand over the params for the selected SharePoint Item (ID)
- Use/Create a SharePoint list with just a few example colums
- We will then use the Powerapps Customize Form tool wich is integrated in all ShrePoint lists (modern experience) already and change the settings for the SharePoint Integration. This enables us to launch a new Canvas App by using the SharePoint standard buttons
- Configure the Canvas App to get the SharePoint list item and use the ID in an example form
1. Create a random Canvas App
- Go to PowerApps.com or just select the App in your Office365 Portal
- If you don´t already have an App in mind that you want to use, go to Create and choose Canvas app from blank. Type in a Name and save it to the Cloud
- Now we just need to get the Web-Link for this App for the next steps. Go To the Apps tab, search for your App and click on the three dots behind the App name. Then choose Details. Now You can simply Copy the Web-Link and save it somewhere for later.
2. SharePoint Set up
- Now we just create a simple SharePoint list. As mentioned, we don´t need a lot of columns, so we´ll just use a list that contains the title column and edit the view to see the standard ID-Column.
- Go to Customize Forms, which opens the PowerApps Forms editor.
- You will get to the Screen with the Standard PowerApps Form that you can customize. But as we just want to pass through the ID-parameters, we don´t need this anymore. To keep your Screen clean, you can delete everything in the Screen. I put in a label that says "redirecting", but you can also drop it because the screen will only be visible for an instant. In the end, we just need the few things that are shown below.
- Click on the SharePoint Integration in the controls menu and choose the property OnNew above. With this property we can configure what happens when user click the New Button in the SharePoint List.
- Use the Launch function, now paste in the Web-Link from your Canvas App that you already saved earlier (in Point 1). As suffix, use the parameters &ID=0. In our scenario we use this to specify new items. The Request Hide Action in the end closes the PowerApps Form window again (to ensure the users are not confused).
Note: Semicolons and Quotes migth differ for some regions
- Click on the SharePoint Integration again and choose the property OnEdit above. With this property we can configure what happens when users click the Edit Button in the SharePoint List.
- Again, Use the Launch Function, now paste in the Web-Link from your Canvas App that you already saved earlier. As suffix, use the parameters &ID=SharePointIntegration.SelectedListItemID
This is where the Magic happens. This will pass through our SharePoint ID.
4. Use the SharePoint ID in a Form in a Canvas App
- Go back to your Canvas App. In the App-OnStart Property (above all the Screens in the left menu bar) we will fetch the corresponding SharePoint ID (or 0 for new items) and Create A global Variable "VarStartID" for it. Type in OnStart:
Basically that´s it. We passed the SharePoint ID (and a zero for every new item). You Can For example put in a label and set the text-Property to the Variable VarStartID
- Now we will Create a Form in our App just for example purposes that works with our new solution. So we first need to choose our SharePoint List as a datasource to our App (View>DataSource>Shareoin>select your sharePoint Site> Select the list (from Point 2). Then Create an Edit Form (insert> edit Form). For the DataSource Property in the Form Type, select your SharePoint List (Name). Now Add the preferred Fields to your Form.
- For the Item Property of the Form, we will make sure that we will use our Variable VarStartID that we created in the OnStart Property of our App.
For the DefaultMode Property of our Form, we will now make sure that it is in New Form when our Variable VarStartID equals 0 and in Edit Mode when it is bigger than 0.
Formula: If(Value( VarStartID)>1; FormMode.Edit;FormMode.New)
- That's it : )
Go to the SharePoint List, Select a random Entry and click on Edit => your Canvas App Should open and show the Form in Edit Mode for the selected SharePoint Entry with the correct Value for Your selected SharePoint Column