White Label App

Objective: Configure the Axon iOS source to feature a study from an organization with appropriate branding. Once configured, the source will be ready to be archived and submitted to the App Store for approval.

This walkthrough should take approx. 30 minutes (depending on whether you have your organization's branding assets handy)

Below is a checklist of information and images that you should have prior to beginning this process.

App Submission Checklist

What is it	How is it presented	Comments
Principal Color	HEX string
Secondary Color	HEX string
Tutorial Page 1 copy (optional)	String (about 150 chars)
Tutorial Page 2 copy (optional)	String (about 150 chars)
Tutorial Page 3 copy (optional)	String (about 150 chars)
Tutorial Page 1 image (optional) - Required if corresponding Tutorial page exists	iPhone Screenshot 750x1334 px
Tutorial Page 2 image (optional) - Required if corresponding Tutorial page exists	iPhone Screenshot 750x1334 px
Tutorial Page 3 image (optional) - Required if corresponding Tutorial page exists	iPhone Screenshot 750x1334 px
App Icon	Follow iOS guidelines
Research Organization Logo Color	Vector or High Res Image	To be used on white background
Research Organization Logo White	Vector or High Res Image	To be used on secondary / primary colors
Study Logo Color	Vector or High Res Image	To be used on white background
Study Logo White	Vector or High Res Image	To be used on secondary / primary colors
Executable Name AKA Bundle ID	Short String	As it should appear on the phone home screen

Request the Template Project

The best way to get started is to request the template Flask app that's been formatted for white label purposes. Contact[email protected] for access to the white label app template source project.

Open the Axon.xcworkspace file in the main folder

There are two targets: Axon and Flask

Ensure that you've selected the Flask target from the build dropdown

Modify Org and Keys

Next, navigate to the info.plist file and expand the Medable dictionary to reveal four values that you need to set to point the app to your org.

Organization - find this by going to Settings > Organization > Name (field)
BaseURL: this should match up with the environment type you're working on.
ClientKey: find this by going to Cortex > Settings > Apps > API Key (column)
StudyID: find this by going to your researcher portal and clicking on Axon > Studies > Click Study Name. You can take the ID from the URL. See below for more info.

You can get #1 and #2 by simply looking at the URL of your researcher portal. For example, if I login to https://app.medable.com/example to see my researcher portal, I know off the bat that my baseURL is api.medable.com and my Organization is example.

The client key (or API key) is copy pasted from the Cortex App section of my researcher portal.

You're going to need your study ID. Find this by opening your study on the Researcher Portal, then pulling the id from the URL. It should be the text right after ".../study/", like below.

Change App Name

Open Info.plist and set the Bundle display name to whatever text you want to display under the icon on the user's iPhone.

Customize Launch Screen

Finally, if you open LaunchScreen.storyboard, you'll see the screen that gets shown immediately when a user launches the app. To the developer’s discretion, customize the launch screen to use either a gradient with the provided colors or a solid color, then overlay the client’s white logo on top. If this doesn’t work, then a white background with the color logo of the client should suffice.

Entitlements

The entitlements that we should include in flask is HealthKit, Push Notifications, and Background Mode. You may want to add others, if your app needs it.

Test the App

Connect to the study and smoke test the app to ensure that it works as expected
Make sure to check for Axon logos and making sure the app doesn’t have any other axon assets in place.