Thursday 27 April 2023

Open model-driven app forms and views from canvas apps in Power Apps mobile

In the last WTF episode I shared how to build URLs to open forms and views in model-driven apps using environment variables.

Now I did say that I would next cover Power Apps Cards towards the end of the WTF episode but I came across a bug 😓 which I reported and the fix is going to be rolled out (maybe by the time this blog post is published). I had to pivot and brought this episode forward.

This time round, I’ll share how to open model-driven app forms and views from a canvas app in a model-driven app within Power Apps mobile. Switching from canvas apps to model-driven apps in Power Apps mobile is so simple. This is achieved by using deep links inside buttons in canvas apps using Environment Variables. There can be use cases where you want to direct users from a canvas app, to the data in a model-driven app form or view.

The technique is similar to what I shared in the last WTF episode except this time, the Environment Variables are being referenced in PowerFx, rather than cloud flow expressions.

Breaking down deep links for model-driven app forms or views in Power Apps mobile

As per the Microsoft Learn documentation, the following is what the deep link should start with.
ms-apps://<org-url>_<app-id>?tenantId=<tenant-id>&isShortcut=true&appType=AppModule&openApp=true&restartApp=true&forceOfflineDataSync=true
The base query parameters are similar to what I shared in the last episode with minor differences. All of these base query parameters can be created as Environment Variables in a solution.

1. The first query parameter is targeted-app.


To load any model-driven app, the query parameter value is ms-apps as outlined in the Microsoft Learn documentation. Create an environment variable with ms-apps as the current value.


2. The second query parameter is org-url. 


This is the Dataverse environment URL without the https, colon and forward slashes (://)
Create an environment variable with the Dataverse environment URL as the current value.


3. The third query parameter is the appid.


In a solution create an environment variable for the app-id query parameter value.


You can find the appids of your model-driven apps by using the GET request I showed you in the previous WTF episode and copy the appmoduleid value and paste it into the environment variable.


The fourth query parameter is the tenant id of the environment where your model-driven app lives in.


In a solution create an environment variable for the tenant id. The tenant id can be found by navigating to make.powerapps.com, click on settings on the top right and select session details. Copy the tenant id and paste the copied tenant id into the environment variable.


Putting it all together with the form or view query parameters - it’s the same as what I covered in the last WTF episode. For a form it’s the following where the pagetype is entityrecord and the query parameters of the Challenges table logical name and ID of the challenge are included.


For a view it’s the following where the pagetype is entitylist and the query parameters of the Challenges table logical name, view id and viewtype are included.


Building deep links in Power Apps studio

Next, let’s understand how to build the deep links for the Power Apps mobile app in Power Apps studio. First, make sure you have the Dataverse tables of Environment Variable Definition and Environment Variables Values added as data sources.


To keep it simple for this episode, I’m using two screens and the design is very basic. The first screen is a gallery that displays all active challenges from Dataverse.


The second screen displays some data from the Challenge selected in the gallery. 


There are two buttons in this screen which is the same as the two hyperlink I showed you in the last WTF episode.
  • The first button, Edit Challenges, will open the form for the selected Challenge.
  • The second button, View Active Challenges, will open the view for the Active Challenges system view in the model-driven app. 

Several expressions and functions used in PowerFx

In the OnSelect property of the button, by default it will be false. I’ll use PowerFx to build the URL to open the form and view in the Power Apps mobile app for the model-driven app. 

There's several expressions and functions I'm going to apply in PowerFx.

String interpolation

What I’m going to do is concatenate the Environment Variables and string values to build the deep link. I’ll use string interpolation that came into support in April 2022 instead of using the concatenate function or ampersand character in PowerFx.

As per the Microsoft Learn documentation, "Prefix the text string with a dollar sign $ and enclose the formula to be embedded with curly braces { }."

This is what will be applied in PowerFx to create the address for the Launch function.

➡️ If you want to learn how to use string interpolation, check out this awesome blog post by Matthew Devaney, another Microsoft MVP in our community who covers it in detail.

Launch function

To open model-driven apps in Power Apps mobile, use the Launch function for the deep link. There’s three parts to the function, 
  • address which is mandatory
  • parameters and target is optional
I’ve found that parameters is not needed in the function as the query parameters for model-driven app forms and views are part of the address.

I also found that target is also not needed in the function as it’ll open the model-driven app in the Power Apps mobile app without providing a target. So address is the only one I’m using in PowerFx to build the URL.

LookUp function

To reference Environment Variables in PowerFx, the key thing to understand is to
  1. Retrieve the Environment Current Value
  2. Where the parent record equals the Environment Variable you're after
Underneath the hood in Dataverse, there's two tables in Dataverse.
  1. Environment Variable Values - this is where the current value of an Environment Variable lives
  2. Environment Variable Definitions - this is the "parent record"
For example, for the first parameter of targeted-app, the Environment Variable current value needs to be retrieved. To achieve this, retrieve the current value from the Environment Variable Value table that is associated to the Environment Variable Definition that equals the target-app parameter.

We can use logic in PowerFx to retrieve the current value where the Environment Variable Definition equals the target app Environment Variable.

You can watch this part of my video where I explain this in detail for your understanding.

What the PowerFx formula looks like

Open model-driven app form

For the OnSelect property of the Edit Challenges button in the canvas app, the following is what the PowerFx formula will look like for opening a model-driven app form in Power Apps mobile.
Launch(
    $"{LookUp(
        'Environment Variable Values',
        'Environment Variable Definition'.'Schema Name' = "ben_targetedappPowerApps",
        Value
    )}://{LookUp(
        'Environment Variable Values',
        'Environment Variable Definition'.'Schema Name' = "ben_DataverseEnvironmentURL",
        Value
    )}_{LookUp(
        'Environment Variable Values',
        'Environment Variable Definition'.'Schema Name' = "ben_appidInnovationChallenge",
        Value
    )}?tenantId={LookUp(
        'Environment Variable Values',
        'Environment Variable Definition'.'Schema Name' = "ben_tenantid",
        Value
    )}&isShortcut=true&appType=AppModule&openApp=true&restartApp=true&forceOfflineDataSync=true&pagetype=entityrecord&etn={LookUp(
        'Environment Variable Values',
        'Environment Variable Definition'.'Schema Name' = "ben_Challengestable",
        Value
    )}&id={gal_Home_Challenges.Selected.Challenge}"
)
The Launch function is first referenced, followed by string interpolation, which starts with the dollar sign character and double quote, followed by the functions and formulas being delineated by curly braces. To complete the string interpolation, use a double quote. Then, to complete the Launch function, use a closing bracket.

This is similar to what I covered in the last WTF episode, and in this episode the Environment Variables are being referenced in PowerFx, rather than cloud flow expressions.

The minor difference in PowerFx when referencing the ID (Dataverse GUID) of the Challenge row is to use an expression that retrieves the ID from the selected Challenge in the gallery (from the first screen in the app).

Open model-driven app view

For the OnSelect property of the View Active Challenges button in the canvas app, the following is what the PowerFx formula will look like for opening a model-driven app system view in Power Apps mobile from a button in canvas apps.
Launch(
    $"{LookUp(
        'Environment Variable Values',
        'Environment Variable Definition'.'Schema Name' = "ben_targetedappPowerApps",
        Value
    )}://{LookUp(
        'Environment Variable Values',
        'Environment Variable Definition'.'Schema Name' = "ben_DataverseEnvironmentURL",
        Value
    )}_{LookUp(
        'Environment Variable Values',
        'Environment Variable Definition'.'Schema Name' = "ben_appidInnovationChallenge",
        Value
    )}?tenantId={LookUp(
        'Environment Variable Values',
        'Environment Variable Definition'.'Schema Name' = "ben_tenantid",
        Value
    )}&isShortcut=true&appType=AppModule&openApp=true&restartApp=true&forceOfflineDataSync=true&pagetype=entitylist&etn={LookUp(
        'Environment Variable Values',
        'Environment Variable Definition'.'Schema Name' = "ben_Challengestable",
        Value
    )}&viewid={LookUp('Environment Variable Values','Environment Variable Definition'.'Schema Name' = "ben_ActiveChallengessystemview", Value)}&viewType=1039"
)
It’s mostly the same with the only difference of changing the pagetype to entitylist and referencing the viewid environment variable along with providing the viewType definition of 1039 for system view. As a reminder, I did cover this in my last WTF episode so check out that episode if you haven’t already done so.

And action!🎬 Open the form or view in model-driven apps from canvas apps in Power Apps mobile

I'll open the canvas app on my mobile phone, and select a Challenge from a gallery.

After the Challenge loads, I'll tap on the Edit Challenges button in canvas apps and it'll open the Challenge in the model-driven app in Power Apps mobile. Awesome sauce!


I'll go back to the canvas app, select a Challenge from the gallery again, and tap on the View Active Challenges button. It'll once again open the Challenge in the model-driven app in Power Apps mobile. Pretty cool 😎

Summary

In canvas apps, you can use Environment Variables in PowerFx to build deep links to open forms or views in model-driven apps within Power Apps mobile. This allows users to switch from canvas apps to model-driven apps with one tap/a single tap 🤳🏻

Hope you learnt something new 😊 and stay tuned for the next episode where I'll cover how to do the same in Power Apps Cards - pending bug being fixed 🤞🏼

0 comments:

Post a Comment