Opening PowerApps from a hyperlink in Visio Online

Microsoft PowerApps are apparently the future for views of SharePoint lists, amongst other data sources, replacing, it seems, both Microsoft InfoPath and Microsoft Access web apps … and probably more. I have previously described how to open an Access form from a Visio shape hyperlink ( see Opening an MS Access form from a Visio shape), so now I need to open a specified PowerApps screen and record instead … as shown below:

The default three screen PowerApps template

A default PowerApps template consists of a BrowseScreen1, DetailScreen1 and an EditScreen1. The default startup screen is the BrowseScreen1 which can be filtered using the Search control. The following images are of a slightly modified default app, with the standard BrowseGallery entry screen

Some slight modifications

Note : The default Title column in the base SharePoint list, Personnel, was renamed as NetworkName. Interestingly, PowerApps uses the original Data Field name, Title, rather than the Display Name, NetworkName.
In this example, the BrowseGallery1 control on BrowseScreen1 items has the default formula:

SortByColumns(Filter(Personnel, StartsWith(Department, TextSearchBox1.Text)), "Department", If(SortDescending1, Descending, Ascending))

I changed this to something more useful by allowing the first characters of either the NetworkName, FirstName or LastName to be matched against:

SortByColumns(Filter(Personnel, StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending))

When the right arrow is selected, then the next screen is opened with the formula:

Navigate(DetailScreen1, ScreenTransition.None)

The DetailScreen1 screen contains a DetailForm1 control which has the DataSource as Personnel and the Item as BrowseGallery1.Selected.
The EditScreen1 screen is opened from the edit icon on the DetailScreen1 screen, and the EditForm1 control has the same DataSource and Item as DetailsForm1.

Modifying PowerApps for opening via a hyperlink with parameters

Every PowerApp is assigned a unique {appId}, and this can be used to open the app using a hyperlink like this:

https://ms.web.powerapps.com/apps/{appId}

However, I need to open a PowerApp and navigate to a specific screen for a specific record. I need to modify the normal progression of the screens so that a hyperlink from a Visio shape goes directly to the DetailScreen1 for the NetworkName  Shape Data value of the selected shape.

The hyperlink from the shape needs to be constructed like this:

https://ms.web.powerapps.com/apps/{appId}?{param}={value}

Multiple parameters can be passed, using the & character.
In my example, I decided to call my parameter, NetworkName, and need to use the value in the NetworkName Shape Data row. So, an example hyperlink looks like the following:

https://ms.web.powerapps.com/apps/6dd41309-c6ee-4e8e-9cc1-c7e163660247?NetworkName=AuburyS

I could enhance my Person master shape to use ShapeSheet formula to create the hyperlink from a base string and the value in the NetworkName Shape Data row on the shape, but the simplest way is to add a Calculated Column, PersonLink, to the Personnel List that creates the url from the base string and the value in the NetworkName column:

"https://ms.web.powerapps.com/apps/6dd41309-c6ee-4e8e-9cc1-c7e163660247?NetworkName=" & [NetworkName]

This means that the url can be available to many applications, and many other Visio shapes, without any more coding!
The PowerApps entry screen, BrowseScreen1, needs to be enhanced to respond to the NetworkName parameter, if it exists. This is done by adding a Timer control to the screen and adding a formula to the OnTimerEnd action:

If(Len(Param("NetworkName"))>0, Navigate(DetailScreen1,ScreenTransition.Fade),false)

The AutoStart property is set to true, the Duration property set to 500 (milliseconds)., and Visible property set to false.
Note that the case of the Param(…) function argument must be consistent with the parameter passed in the hyperlink.
Therefore, some enhancements are necessary so that the value of the hyperlink query parameter, if it exists, can be used to filter the DetailForm1 and EditForm1 controls to the specified record. This is done by entering the following formula in the Item property of each:

If(Len(Param("NetworkName"))>0, LookUp(Personnel, Title=Param("NetworkName")),BrowseGallery1.Selected)

To prevent the back button being used on the DetailsScreen1 screen, if the entry was via a NetworkName parameter, I updated the Disabled property of iconBackarrow1 to:

Len(Param("NetworkName"))>0

So, there are only a few enhancements required to each screen in order to accept an optional NetworkName parameter, as seen on the following:

Creating the Visio shape

This has now become a simple task. I used Data / Custom Import for the SharePoint Personnel list, as done in many of my previous articles, and deselected some of the spurious SharePoint list columns. I also modified the PersonLink and Image columns to be understood as hyperlinks. I then linked a single rectangle to a row, set my Data Graphic items, unlinked the rectangle from the row, saved the rectangle as a Master called Person, and then linked several instances of the Person master to rows in the Personnel External Data recordset.

The hyperlinks for the Image and PersonLink are created automatically, but the PersonLink hyperlink, which contains the parameterised PowerApps hyperlink, does not work in Visio desktop. However, it does work when the Visio document is viewed in Visio Online!
Q.E.D.
This is an exciting capability, and I look forward to attempting to integrate Visio Online and PowerApps within the same SharePoint Framework web page …
Thanks to the Microsoft PowerApps team for helping me understand how this can be done!