Check Device Type of Power Apps

In check device type of Power Apps post I would like to show alternative way to see if User is using browser or mobile Power Apps client.

Content:

  • Power Apps Signals approach
  • Power Automate Headers approach
    • x-ms-user-agent property
    • Accessing data
  • Example: Not to download PDF file
    • Update of Flow
    • Update of Power Apps
  • Summary

Power Apps Signals approach

So far I saw the versions of checking that information based on the signals. Principal is very easy in browser not all signals have value:

Device Type of Power Apps

Where in mobile it looks like this:

Device Type of Power Apps
Check device type of Power Apps

To know which device User is using in Power Apps I was checking the value of Altitude and Acceleration.


Power Automate Headers approach

When I was preparing session for Global Con 1 at Twitter Hiro @mofumofu_dance shared idea to use different approach (cannot find original tweet about that:().

To use the proposed method you need to add Power Automate Flow to your App. Each time Flow is called it is not only about Input parameters aka Ask in Power Apps. However, Trigger when executed contains also Outputs including Headers information:

Headers contains quite a lot interesting information

To access Headers from Flow Designer I just check execution of the Flow called from Power Apps and in the trigger click Show raw outputs:


X-ms-user-agent property

I’m interested only in property x-ms-user-agent for Browsers this property (in my case) looks like this:

"x-ms-user-agent": "PowerApps/3.20084.9 (Web AuthoringTool; AppName=<NonCloudApp>)"

For mobile phone and tablet with Android:

 "x-ms-user-agent": "PowerApps/3.20085.13 (android Player; AppName=f474d5d9-7777-4444-4444-022b69e3e90b)"

The key difference is Web AuthoringTool vs android Player

NOTE
I don’t have the option to check iPhone header if somebody will send me the information I will gladly update this article and give credit to author.


Accessing data

Firstly if I would check the Dynamic Content wouldn’t see Headers to access the information I need to use Variable or Compose and insert in it:

triggerOutputs()['headers']

That will give me access to all Headers data but I’m interested only in single property so will change that to:

triggerOutputs()['headers']?['x-ms-user-agent']

Now by adding a condition which will check the value of x-ms-user-agent I can make the decision. What will happen in Flow or I can return this info to Power Apps.


Example: Not to download PDF file

To show example how this can be used I will fill the gap from my previous blog post Download PDF from Power Apps (cannot sleep because of that).

Shortly speaking I described how to download PDF file directly from Power Apps. Yet there are the cases when User is using mobile phone, tablet and download is not required or even creating issues.

Knowing device type I could control how the Flow will react:

  • For Browsers, I want to show link to PDF file
  • For Mobile, I want to give feedback to User and send PDF via email

First scenario is covered here, so I will add only missing bits.


Update of Flow

For the starter I need capture headers x-ms-user-agent value in the variable. Then I’m adding condition and return data to Power Apps.

Therefore, User will not wait for the file to be generated and send via email (yup, thinking about UX^^) feedback will be faster:

I’m checking in condition if variable value contains Web.

For the Respond action I’m adding two properties (not one):

  • vType – storing information about type of device
  • linkURL- storing value with sharable link

NOTE
Schema / properties of Respond need to match if now I would only add vType and later on try to add only linkURL Flow would fail. Just add null value from expression and that will do the work.

Next bit to adjust is to create File in correct moment:

I again added condition and Create PDF file only for browser.

NOTE
Respond action for Web with linkURL looks like this. Please remember that schema/properties in both Respond actions need to match.

For the cases when User is using mobile client I added only send email action as content of the file has been already created in Convert file action. Don’t need to add action to create file (and later on to handle deletion…) to send it via email.

HINT
Convert File is keeping File content and can be use for sending emails attachments or to create file in SharePoint not necessarily in OneDrive.

Device Type of Power Apps

HINT
This is only demonstration and Attachment Name should be also dynamic value which can be taken from User as input or some auto generated name.

These are all changes which I did to make the Flow working. Now I will move to update of Power Apps.


Update of Power Apps

Then the only change in the Power Apps is to what will display in the HtmlText control:

Device Type of Power Apps

I’m adding If statement to display either a link or some feedback info.

Finally, solution run from mobile should work like this:


Summary

In conclusion using Check device type of Power Apps I could control execution of Flow and provide proper feedback to User in Power Apps.

Check device type of Power Apps via Flow headers is for me alternative way to check if User is on mobile or working with browser. Hope this method will be useful for you. Above all now I can sleep well when the missing bit in Download PDF from Power Apps is filled.

Find more great content here!

About the Author:

As the community movement in the Microsoft is getting bigger and bigger and Sharing is carrying for me start to be mindset, decided to go out of my personal comfort zone and start to share solutions or ideas about some challenges which came across various projects. Hoping that it will save some struggle for the people and they will have extra time to create something nice which can be also shared.

Reference:

Ziolkowski, D. (2020). Check device type of Power Apps. Available at: https://365corner.pl/2020/09/15/check-device-type-of-power-apps/ [Accessed: 4th March 2021].

Find more great Power Platform content here.

Share this on...

Rate this Post:

Share: