Power Apps Exchange

Please login or click SIGN UP FOR FREE to create your PowerAppsUG account to join this user group.

Use Canvas Apps like PowerApps Forms(SharePoint)

By Philipp Schlund posted Jan 28, 2020 08:17 AM

  

Note: This is a step-by-step guide, so it can equally be used by People with beginner or advanced Power Apps knowledge.

Scenario

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:

  1. 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.
  2. 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

  1. 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)
  2. Use/Create a SharePoint list with just a few example colums
  3. 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
  4. Configure the Canvas App to get the SharePoint list item and use the ID in an example form

1. Create a random Canvas App

  1. Go to PowerApps.com or just select the App in your Office365 Portal
  2. 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

  3. 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

  1. 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.
  2. Go to Customize Forms, which opens the PowerApps Forms editor.

  3. 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.

  4. 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.
  5. 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).

    Formula:  Launch("Web-Link&ID=0");;RequestHide()

    Note: Semicolons and Quotes migth differ for some regions

  6. 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. 
  7. 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

  1. 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:

    Formula: Set(VarStartID;Param("ID"))

    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

  2. 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.
  3. 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.

    Formula: If(Value(VarStartID)>0;LookUp(SharePointListName;ID=Value(VarStartID)))

  4. 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)

  5. That's it : )

Test 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
4 comments
35 views

Permalink

Comments

7 days ago

thanks for clarifying Philipp. Using Edit All is not as obvious but I will see what my users think. I need different New item and Edit item forms so I think I will need  separate New and Edit apps/forms so I can call the relevant app from the OnNew or OnEdit property of SharePoint integration.

10 days ago

Hi Pam, well I don´t know exactly what you are trying to do, but if your question is wheter you could use the above Scenario with a SharePoint Online document library instead of a List, I can tell you: Yes :) . If you are just searching for Button where you can Edit the file : it´s a bit hidden. you have to click on the 3 dots behind the File Title/Name and then go to  More and then Properties and then click Edit all. This is the "edit" Property that you can call and adjust in PowerApps. So as you can see this option is not really a nice way in terms of usability, but you could also update and edit metadata in sharePoint by using a canvas App instead of the SharePoint Form.

10 days ago

Hi Pam, well I don´t know exactly what you are trying to do, but if your question is wheter you could use the above Scenario with a SharePoint Online document library instead of a List, I can tell you: Yes :) . If you are just searching for Button where you can Edit the file : it´s a bit hidden. you have to click on the 3 dots behind the File Title/Name and then go to  More and then Properties and then click Edit all. This is the "edit" Property that you can call and adjust in PowerApps. So as you can see this option is not really a nice way in terms of usability, but you could also update and edit metadata in sharePoint by using a canvas App instead of the SharePoint Form.

10 days ago

Thanks Philipp, I found this very interesting as a beginner user. I want to use Power Apps forms for creating & editing document sets in a library. The new item form, which uses a subset of columns, runs a flow to create the new doc set and update metadata. Will your method work in this scenario. There is no Edit action in the ribbon for document sets so is it still possible to bind my edit item form to the document set content type?  Can you please explain how it would work, if it's possible?