PowerApps Wrap App for Android

If you've been keeping up with the latest technology developments, you're likely familiar with PowerApps. PowerApps is Microsoft's low-code development platform that empowers fusion teams to quickly and securely create enterprise-grade applications. Even as an experienced developer, I've witnessed firsthand how PowerApps has effectively enabled organizations to solve business problems in significantly less time compared to building native applications.

However, one aspect of PowerApps that I find less appealing is the user experience when it comes to accessing individual apps. Currently, users have two options: they can either click on a link to open the app via a browser or use the PowerApps app.

This can be manageable for small number of apps, but if we have hundreds then searching for, accessing, and distributing the apps can become quite a challenge in such scenarios.

The wrap feature in Power Apps enables you to wrap your canvas apps as custom-branded Android and iOS apps for native distribution to mobile users. You can distribute such wrapped native mobile apps to the end users through Microsoft Intune.

Power Apps offers a convenient feature called "wrap" that allows you to package your canvas apps as custom-branded Android and iOS apps, suitable for native distribution to mobile users. With this feature, you can transform your Power Apps into standalone mobile applications that carry your unique branding. To distribute these wrapped native mobile apps to end users, you can utilize Microsoft Intune, a comprehensive mobile device management solution provided by Microsoft.

The following list explains what you'll need before you can start using wrap feature to publish one or more canvas apps as a mobile app package.

Prerequisites:

1. Install Android Studio - https://developer.android.com/studio

2. Install OpenSSL - https://slproweb.com/products/Win32OpenSSL.html

• After installation set up an environment variable

• My Computer ➡️ Properties ➡️ Advanced System Settings ➡️ Environment Variables ➡️ In the System variables section click on Path ➡️ New ➡️ Copy and paste the OpenSSL file path (ex: C:\Program Files\OpenSSL-Win64\bin) ➡️Ok.

3. Install Java - https://www.oracle.com/in/java/technologies/downloads/#jdk19-windows

• After installation set up an environment variable

• My Computer ➡️ Properties ➡️ Advanced System Settings ➡️ Environment Variables ➡️ In the System variables section click on Path ➡️ New ➡️ Copy and paste the OpenSSL file path (ex: C:\Program Files\Java\jdk-19\bin) ➡️Ok ➡️To add System variable click New ➡️Add variable name (ex: JAVA_HOME), variable path (ex: C:\Program Files\Java\jdk-19) ➡️Ok.

4. Admin Access to Azure AD and PowerApps.

Create an Azure AD App Registration:

1. Please go through the document as it is same for all apps. Select Multitenant while creating.

• You will get Azure App ID, copy, and paste it in Notepad.

2. From the left navigation pane select Authentication and click Add Platform.

In the Configuration Platform, Select Android.

3. Add Package name as - com.{companyname}.{appname}

(Ex: com.onmicrosoft.wrapapp)

4. Add Signature Hash

Follow steps to get signature hash.

• Open command prompt as an Administrator and copy the keytool path in local device (you will get this by downloading Android Studio).

Ex: cd C:\Program Files\Android\Android Studio\jbr\bin

• After this run the below mentioned command

keytool -genkey -alias <AppName> -keyalg RSA -keystore <AppName>.jks -keysize 2048 -validity 10000

Ex: keytool -genkey -alias wrapapp -keyalg RSA -keystore wrapapp.jks -keysize 2048 -validity 10000

Enter the details,

After entering details type yes and run the below command.

keytool -exportcert -alias <app name> -keystore <app name>.jks |<copy and paste OpenSSL path> sha1 -binary | <copy and paste OpenSSL path> base64

Ex: keytool -exportcert -alias wrapapp -keystore wrapapp.jks |"C:\Program Files\OpenSSL-Win64\bin\openssl" sha1 -binary | "C:\Program Files\OpenSSL-Win64\bin\openssl" base64

You will get Signature Hash, copy it, and paste it in Azure AD.

5. Click on Configure, now you will get Redirect URL and Package Name (Bundle ID), copy these in notepad.

6. Come back to Azure AD, from the left navigation pane select API Permissions.

• Select Add Permission and select Dynamic 365

• If you are using Share point as a data source for your canvas application, add SharePoint.

• Now add APIs my organization uses and search PowerApps and select PowerApps Service.

• Similarly search for Azure and select Azure API Connections

If you don’t find Azure API Connections, run the below mention commands in PowerShell run as Administrator.

a. Install-Module AzureAD

b. Import-Module AzureAD

c. Connect-AzureAD

d. New-AzureADServicePrincipal -AppId fe053c5f-3692-4f14-aef2-ee34fc081cae -DisplayName "Azure API Connections"

Now search for Azure and select Azure API Connections.

• Now Grant admin consent

Now select yes.

Allowing registered apps in your environment:

1. Run the below commands in the PowerShell run as Admin.

a. $PSVersionTable.PSVersion

b. Get-ExecutionPolicy

c. Set-ExecutionPolicy -ExecutionPolicy RemoteSigned A

d. Install-Module -Name Microsoft.PowerApps.Administration.PowerShell Y A

e. Install-Module -Name Microsoft.PowerApps.PowerShell -AllowClobber A

f. Add-PowerAppsAccount [PopUp- Login with PowerApps Credentials]

g. Add-AdminAllowedThirdPartyApps -ApplicationID <Azure registration app ID>

Ex: Add-AdminAllowedThirdPartyApps -ApplicationID 7c09cefb-b904-420e-bc02-a81a0fc19879

Create an App in App Center:

1. Navigate to App Center from here.

• Create an organization.

• Create an app and select Android and React Native

• Copy the App URL and save it in notepad.

• Click on setting from left navigation pane, scroll down to select App API Tokens.

Click on New API token and give It a name, select Full Access, select App new API Token

• This token will be shown once, so save it in a notepad.

Installing Wrap in your environment:

1. Navigate to PowerApps Admin Centre.

2. Click on Resources, select Dynamics 365 Apps

3. Search Wrap, select Wrap for PowerApps and click Install.

4. Select the Environment, that you wish to install the app. Click install.

5. The app should start to install into the environment.

Create a Wrap App:

1. Create a new solution, in which you installed wrap app.

2. Create two or more canvas application.

3. Select primary application and from the top navigation pane select Wrap.

4. Select Secondary App and select Android(.Apk).

5. Enter the Bundle ID, AAD Client ID, AAD Client Redirect URI details, as you saved in the notepad earlier.

6. Upload images and choose background fill color as per your choice.

7. Enter the Android App Centre URL and Android App Centre API Token details, as you saved in the notepad earlier.

8. Click on BUILD.

9. Wait for 15-20 minutes and you will see the result like this.

Download and sign the .apk file:

1. Navigate to App Center, you can now see a new release of app.

2. Select See all releases.

3. Click on the latest release.

4. Select Download. You will see a downloaded apk file (Unsigned) in your device.

5. Follow the below commands to sign the apk file.

• Open Android Studio

• Select ellipses on the right side and select SDK Manager.

• Now you see a Android SDK Location.

• Copy the path and paste in local device path.

• Open Command Prompt as an Admin.

• Run below mentioned command.

a. cd C:\Users\XXXXXXXXXXXXXX\AppData\Local\Android\Sdk\build-tools\30.0.3

b. apksigner.bat sign --ks "C:\Program Files\Android\Android Studio\jbr\bin\<appname when you give while generating signature hash>.jks" --ks-key-alias \<appname when you give while generating signature hash> <path to downloaded apk file>

Ex: apksigner.bat sign --ks "C:\Program Files\Android\Android Studio\jbr\bin\wrapapp.jks" --ks-key-alias wrapapp "C:\Users\XXXXXXXXXXXX\Downloads\universal.apk"

• Enter the password you created earlier (Keystore password for signer #1).

• Now you can find .apk.idsig file created in your local device.

Finally send the .apk file to the android device ➡️ Click download ➡️ Select Install

After installation you can see and open the application from the screen, and login with PowerApps credentials, then you can see the application loading and ready to use.

Great news! We've successfully wrapped our canvas app with a native Android wrapper.