Use the wrap wizard to build your mobile app

Use the wrap feature to package one or more canvas app(s) as a single native mobile app package using the step-by-step wizard.

The wrap feature in Power Apps lets you create native mobile versions of your canvas apps as custom-branded Android and iOS mobile apps. You can distribute such wrapped native mobile apps to the end users through Microsoft Intune, Microsoft app center, Google Play or Apple Business Manager or other native distribution methods.

Wrap feature allows you to create mobile apps for iOS, Android or Google Play Store:

• iOS (IPA package)
• Android (APK package)
• Google Play Store (AAB package)

The wrap feature wraps your canvas apps in a native mobile app shell that you can digitally sign and distribute. When you update your app and republish it, the app is automatically updated.

Prerequisites

You need access to:

• Azure portal to register your app.
• App center to add new organization and apps.
• This feature requires the apps to be part of a managed or unmanaged solution. If your apps aren't part of a solution already, add them to an existing or a new solution. More information: Create a canvas app from within a solution. 

If you're creating a mobile app package for Android platform and you plan to code sign it manually, ensure you generate keys, and then generate signature hash before you start. You need the generated signature hash to configure the Redirect URI.

Add canvas app to solution

Wrap for Power Apps requires the apps to be part of a solution. If your canvas apps aren't part of a solution already, add them to an existing or a new solution. Go to Solutions section, select a solution and press Edit button.

Choose + Add existing option from the top menu and select App > Canvas app in the dropdown list.

Select Outside Dataverse tab and choose your app from the list. Press Add button to add this app to a solution.

More information: Add an app to a solution

Create native mobile apps for iOS and Android using the wizard

1. Sign in to Power Apps.

2. Select Apps, from the left navigation pane.

3. Select the app that you want to wrap, and then select Wrap on the command bar.

   

Step 1: Select apps

1. On the Select the app(s) to wrap screen, select your primary and secondary app.

   • Primary app: Select the app your end users see when the mobile app is launched.

   • Secondary app(s): Optional other apps that you can bundle the same build for mobile app package along with the Primary app.

     

     Note

     You can use the same Primary app in multiple wrap projects.

2. Select Next.

Step 2: Target platform

1. On the Choose mobile platform to target screen, enter a Bundle ID of our choice.

   Note

   The Bundle ID is a unique identifier that you create for your app. A bundle ID must contain one period (.) and no spaces.

2. Under Target platforms(s), select all the mobile platforms that your end users use on their mobile devices.

3. Set the Sign my app toggle to ON to automatically code sign your mobile app, then select the Azure Key Vault URI from the list and click Next. If you don't have any entries in Azure Key Vault URI list, you need to create Azure Key Vault first. More information: Set up Azure Key Vault for automated code signing.

   

You can also code sign your mobile app package manually instead of using automatic code signing available in wrap wizard. For more information on how to code sign your app manually, see:

• Code sign for iOS
• Code sign for Android
• Code sign for Google Play Store

4. Select Next.

Step 3: Configure branding

1. On the Configure Branding Step, set the following look and feel options for your app:

   • App icons: Upload icons to use for your app. All five icons need to be selected for your wrapped mobile app.

   • Splash screen image: Image that's used on the splash screen of your mobile app, while it loads. Default image used when not provided.

   • Welcome screen image: Image that's used on the welcome (sign in) screen of your mobile app, while it loads. Default image used when not provided.

   • Background fill color: Hexadecimal color code used for the background of the welcome screen.

   • Button fill color: Hexadecimal color code used to fill the button color.

   • Status bar text theme: Color for the status bar text at the top of the app.

     Note

     All the images must be in .png format.

2. Select Next.

Step 4: Register app

On the Register your app screen, register your application in Azure to establish a trust relationship between your app and the Microsoft identity platform. Your app must be registered in Azure Active Directory so that your app users can sign in.

New app registration

Select New app registration to create a new registration for your app automatically.

You can also create a new app registration manually. More information: Registering your app on Azure portal manually.

The wrap wizard configures all the required API permissions for your app automatically. You can also configure the API permissions manually if your need to stoubeshoot this step. More information: Configure the API permissions for your app manually.

Step 5: Manage output

On the Manage output screen, create or select an existing app center location to send your mobile app once the build is complete. To automatically create a new location in wrap wizard, select New location on top of the screen, and then select Android or iOS.

• Android: Choose an existing location or create a new location.

• iOS: Choose an existing location or create a new location.

You can also choose to create your app center location manually at App Center. More information: Create an app center location for your mobile app manually.

Step 6: Wrap up

On the Wrap up screen, review the app details and then select Build. After a successful build, you'll see your mobile app in the app center location that you have selected in the previous step.

Test and distribute mobile app package

For testing and distribution, see App center test and Distribute.

Set up Azure Key Vault for automated code signing

You need to have Azure Key Vault set up to automatically sign your Android or iOS mobile app package in Step 2 of wrap wizard.

Prerequisites

• You need to have a Apple account enrolled in Apple developer Program or Apple enterprise developer program.
• Create a distribution certificate or ad-hoc Provisioning Profile or enterprise provisioning profile.
• Azure Active Directory subscription to create Key Vault.
• Admin access for your tenant.

Follow these steps to create Azure Key Vault and configure KeyVault URI:

1. Sign in to your tenent as an admin and create an Azure service principal for 1P AAD application: 4e1f8dc5-5a42-45ce-a096-700fa485ba20 (WrapKeyVaultAccessApp) by running the following script:
   Connect-AzureAD -TenantId <your tenant ID> New-AzureADServicePrincipal -AppId 4e1f8dc5-5a42-45ce-a096-700fa485ba20 -DisplayName "Wrap KeyVault Access App"

2. Add a role to the service principal listed above in the subscription where the Key Vault is going to exist. For detailed steps, see Assign a user as an administrator of an Azure subscription. Note: In step 3, you may choose Contributor, as only a minimal role is required to access the Key vault.

3. Create or access existing key vault: Create a key vault using the Azure portal

4. Add access policies for the key vault.

   

5. Follow one of the these options, depending on your device:

   • For Android, create the .pfx file upload it to the keyvault certificate section. More information: Generate keys

     

     Note

     The name of the certificate must be present in the tag step. The password also needs match the password you entered during the store pass parameter used to create the .pfx file in step 2.

   • For iOS:

     1. Install the .cer into Keychain Access app by double clicking it. More information: Create the distribution certificate
        Then export the file as a .p12 file by right clicking your certificate file and the select Export and select the file format .p12.

        Note

        The .p12 password that you set in step 4 is required when uploading it to the keyvault in the next step.

     2. Create the provisioning profile and run the following command to encode it to base64:

        • Mac: base64 -i example.mobileprovision
        • Windows: certutil -encode data.txt tmp.b64

     3. Get the outputted base64 string from previous step and upload to Keyvault secret. Then, get the .p12 file and upload it to Keyvault Certificate.

        

6. Once iOS or Android certificates are created and uploaded, add three tags with the name as the bundle id, and the value corresponding to the name of the uploaded certificate(s).

   

Register your app on Azure portal manually (optional)

You can automatically create your app registration in the wrap wizard as mentioned in step 4. Or, you can manually create a new registration for your app on Azure portal. More information: Quickstart: Register an application with the Microsoft identity platform.

Note

Both single tenant and multitenant customers can use wrap to create native mobile apps based on their Power Apps canvas apps.

Whether you're a single or multitenant maker, you must select any of the options containing Any Azure AD directory - Multitenant when choosing the supported account type for your app to enable it for wrap. Choose one of the following account types:

• Accounts in any organizational directory (Any Azure AD directory - Multitenant)
• Accounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts such as Skype or Xbox.

Important

• Wrap only supports Multitenant account types currently. Single tenant account type is not yet supported. More information on the account types: Account types in Microsoft identity platform.
• You must create a separate Redirect URI for each platform (iOS, Android) that you want to target.

Configure the API permissions for your app manually (optional)

When you complete step 4 the wrap wizard will automatically configure all the required API permissions for your app.

If you get errors in wrap wizard, you can manually configure API permissions. More information: Add and configure

The following API permissions are required when manually configure API permissions:

• Microsoft APIs
  • Dynamics CRM
• APIs my organization uses
  • Azure API Connections
  • PowerApps Service
  • Power BI (only required if your canvas app(s) use Power BI data)
  • Microsoft Mobile Application Management (only required if you want to use Microsoft Intune for mobile app distribution)

Note

If you don't find the permissions under APIs my organization uses, run the following PowerShell commands as appropriate, and try again:

• Missing Azure API Connections permission:

  Connect-AzureAD -TenantId <your tenant ID>
  New-AzureADServicePrincipal -AppId fe053c5f-3692-4f14-aef2-ee34fc081cae -DisplayName "Azure API Connections"
  

• Missing PowerApps Service permission:

  Connect-AzureAD -TenantId <your tenant ID>
  New-AzureADServicePrincipal -AppId 475226c6-020e-4fb2-8a90-7a972cbfc1d4 -DisplayName "PowerApps Service"
  

For detailed steps, refer to Request the permissions in the app registration portal.

Create an app center location for your mobile app manually (optional)

You have an option to automatically create a new app center location to store your mobile app as mentioned in step 5 in wrap wizard, but you can also manually create it directly in app center. More information: App center location

Tip

For more information about app center, go to Visual Studio app center documentation.

1. Go to app center.

2. Sign in with your work or school account.

3. If you don't have any existing organization, select Add new > Add new organization to create a new organization.

4. Select the organization from the list on the left-pane.

5. Select Apps > Add app.

6. Enter app name.

7. Select app release type.

8. Select Custom OS for iOS apps, or Android OS for Android apps.

   Note

   You must create separate app center containers for each platform.

9. For Android OS, select Platform as React Native.

   Note

   Platform must be React Native for all apps in app center.

   

10. Select Add new app.

11. Copy the app's app center URL that you need later when your configure the wrap project inside Power Apps.

    For example, https://appcenter.ms/orgs/Contoso-sales/apps/Sample-canvas-app-for-Android-OS/

    

Sign your mobile app package manually (optional)

You can automatically sign your mobile app package during wrap process in Step 2, but you can also do so manually after the mobile app package is build. Code signing process is different for Android and iOS devices.

• Code signing for iOS
• Code signing for Android
• Code signing for Google Play Store

See also

• Wrap overview
• Code sign for iOS
• Code sign for Android
• Code sign for Google Play Store
• Frequently asked questions for wrap