Opening PowerApp using SharePoint Column Formatting

**Important Update**

New functionality was added to PowerApps to allow guest access to apps via Azure AD. To accommodate for this, PowerApps now appends your Tenant ID to the URL of your app (see screenshot below for an example):

For this method to work you’ll need to change the way your URL is formatted. You’ll take the Web Link for you app that includes the Tenant ID and add an & after to pass in your custom parameter. Here’s an example: https://web.powerapps.com/app/12343ef?tenandId=133mytenant&ID=3

If you use SharePoint and are familiar with PowerApps then you probably know about the ability to select the “Customize Forms” option to customize your SharePoint List with PowerApps.   This can be a good option to customize your forms but if you go to the documentation about it you’ll notice there are some limitations to the functionality:

If the Customize forms option isn’t available or doesn’t work correctly for your list, it might contain data types that PowerApps doesn’t support. Also, you can’t move your form to a different list or environment.

Because of these limitations, I generally prefer to create a separate Canvas app and connect it to my SharePoint data instead. 

But if you go with this approach, how do allow users in SharePoint to open the PowerApp to edit the item instead of the default SharePoint list form?  

Column Formatting to the Rescue!

We can use SharePoint Column Formatting to transform one of your fields to a hyperlink which opens the PowerApp with the ID of the item selected passed through via a parameter. To see more examples of column formatting, including screenshots of how to get to the settings, see my blog on “Show Map in Rich Text Field”.

 The code needed to make a column in your list a hyperlink to open a PowerApp is below:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",

  "elmType": "a",

  "txtContent": "@currentField",

  "attributes": {
    "target": "_blank",
    "href": "='PutURLOfYourPowerAppHere?ID='+[$ID]"

  }
}

The only thing that you’ll need to change in the code above is to put in the URL of the PowerApp you want to open where it says “PutURLOfYourPowerAppHere”.  You can get the URL of your app by clicking the “…” next to the app and selecting “Details”.  

The Web link is the value you want to copy and paste into the code snippet.

PowerApps Set Up

Now that you know how to make SharePoint pass in the ID of the selected item and open a PowerApp, you need to do some work from the PowerApps side of the house to let our app accept that parameter and to automatically open the Details Screen of that item.  The App that I have is a simple 3 Screen app with a Browse, Detail and Edit Screen.

The first step is to go to the OnStart Property of your PowerApp by click App and selecting OnStart from the properties dropdown.  You need to check for our ID Parameter that we are passing in with our column formatting.  If that Parameter is there, you’ll need to write it to a variable then we want to navigate to the Detail Screen to see the details for that item.  If it isn’t there then the app should just behave as normal allowing the user to select an item from the gallery.  The formula you need to make this happen is below:

If(!IsBlank(Param("ID")),Set(varID, Param("ID"));Navigate(DetailScreen1,ScreenTransition.Fade))

The last thing you need to do is go to the Details Screen to tell it which item to show.  You need to go to your Form Control in the screen and select the Item property from the properties dropdown.  You’ll want to check if that ID parameter is defined and if so lookup for that record in the SharePoint list.  If it’s not defined then use the selected item from the gallery.  That formula is below:

If(!IsBlank(Param("ID")),LookUp('Equipment Inspections',ID = varID),BrowseGallery1.Selected)

That’s all that you need to do to launch a PowerApp from SharePoint.  I’ve also created a video that walks you through these steps: