In Focus

How To Open A PowerApps Native App From SharePoint ListView

In this article, we will see how to link a PowerApps native app to a SharePoint list view.

Scenario

PowerApps is the only recommended solution if you want to customize SharePoint list forms. If you have a situation with the below requirements, how will you achieve it?

  1. Need to open UI/Forms from an application other than SharePoint, with some information to be sent as parameters
  2. Need to open UI/Forms from SharePoint default list view, click on an item, or edit item or new item
  3. Need to open UI/Forms from mobile as well as desktop devices

How can you achieve this with just one native PowerApps app? This will help to develop your UI customization only once. Let’s see this in today’s article.

Solution

Using customized forms might resolve the second requirement but the first and third won’t be fulfilled with this.

We can create a native PowerApps app to fulfill all the above three requirements. Let’s see how.

Create an app in PowerApps from this PowerApps web studio. You decide your app UI architecture and add screen forms accordingly. Let's assume that you built up an app which we will use in the next steps.

Generate URL of the App to link it from other application

From here >> Go to Apps >> Go to App Details >> You will find Web link >> Copy that URL

How To Open PowerApps Native App From SharePoint ListViewHow to open PowerApps native app from SharePoint listview

Decide what parameters/information you want to send from other applications to your App. In my scenario, I had to provide a link to the PowerApps app in the CRM application. I had to send SaleID as a parameter. My App was used to create/manage some approval process for a Sales record.

So, with parameter name and value this is how the URL looks:

https://web.powerapps.com/webplayer/app?appId=/providers/Microsoft.PowerApps/apps/<app_id>&SaleID=1234

How to open a native app from the SharePoint list view?

This is a tricky part. I have used customized forms to navigate to Native PowerApps. So whenever the user clicks on a list item or tries to edit the item from SharePoint list view >> we will redirect the user to PowerApps native app.

We need to customize the list forms in SharePoint. Handle the events of OnView, OnEdit to open PowerApps app.

We will use the Launch function. Specify the same URL as above.

Go to SharePoint List >> select Customize Forms option. It will create a form with default controls. Select the "SharePointIntegration" control as shown below.
 
How To Open PowerApps Native App From SharePoint ListViewHow to open PowerApps native app from SharePoint listview
 
There are predefined events on this control >> OnView, OnEdit etc. >> we will write Launch function with our native App URL >> So that whenever a user opens or edits items we will redirect the user to our native App. Check the below screen:
 
How To Open PowerApps Native App From SharePoint ListViewHow to open PowerApps native app from SharePoint listview
 
Similarly, we will handle the OnEdit event too. You can use RequestHide() function hide the forms on allitems.aspx page.
 
How To Open PowerApps Native App From SharePoint ListViewHow to open PowerApps native app from SharePoint listview
 

How does this app work on mobile devices?

In my scenario, I had to inform business users about the request over email so that they can open it, review it and act on it. In today's world, everyone uses mobile devices more than desktop. We can send the same URL as above in the mail body. So, when a user clicks on the link, it will prompt for the first time to choose an app (browser or PowerApps) >> and the user should open the request with the PowerApps app.

I hope this helps in some way.