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:

This slideshow requires JavaScript.

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

This slideshow requires JavaScript.

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.

This slideshow requires JavaScript.

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:

This slideshow requires JavaScript.

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.

This slideshow requires JavaScript.

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!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Chris Webb's BI Blog

Microsoft Analysis Services, MDX, DAX, Power Pivot, Power Query and Power BI

davecra.wordpress.com/

Microsoft Office 365 Development, and more...

PowerShell.Amsterdam

Automate, Accelerate, Accurate

johnvisiomvp

Life with Visio and other Microsoft Toys!

Title (Required)

Windows Server Essentials Tips & Tricks

Nilsandrey's Weblog

Just another WordPress.com weblog

Things that Should be Easy

Every so often (too often in the IT industry) I encounter things that should have been very easy to do but turned out to be far too complicated. My favorite topics include SharePoint, .Net development, and software architecture, especially distributed systems.

Visio Guy

Shapes, Stencils, Drawings Templates, Tutorials, Tips & Developer Info for Microsoft Visio

Hannes's Virtual Earth

Tips & Tricks around Mapping and Cloud Computing

Pluralsight blog

be smart, be clear, be visual ...

%d bloggers like this: