Enable Custom Theming On Your Native iOS App

You will learn

• ✔How to manage custom themes on SAP Mobile Services
• ✔How to apply custom themes to a native iOS application [ACCORDION-BEGIN [Step 1: ](Real world use case)]

  

  You have built a native iOS application for the ground staff service technicians of an airline company. Using the multi-tenancy capabilities of BTP and SAP Mobile Services, you are providing the software to two airline companies. The airline teams are happy with your software, but they want the application to use the brand colours of their respective organizations. You anticipate selling the software to more airlines in the future. Therefore, you don’t want to maintain multiple code-lines with custom theme for each customer. In this tutorial, you will learn how to apply custom theme to your application without needing to re-deploy your native application. Click here to learn more about custom theme support on SAP BTP SDK iOS. [DONE] [ACCORDION-END] [ACCORDION-BEGIN [Step 2: ](Create or download custom themes)] 1. Use the links mentioned in the following table to download the light and dark variants of two themes. | Name | Download Link | |—|—| | Air Line 1 Light Theme | Download | | Air Line 1 Dark Theme | Download | | Air Line 2 Light Theme | Download | | Air Line 2 Dark Theme | Download | > You can create custom themes using the UI Theme designer. Click here to learn how to create custom themes using the UI Theme Designer on SAP Cloud Portal service. [DONE] [ACCORDION-END] [ACCORDION-BEGIN [Step 3: ](Upload custom themes to SAP Mobile Services)] 1. Go to your SAP Mobile Services account. > If stuck, please review the pre-requisites of this tutorial. 2. Click Mobile Applications → Settings → App Theme Manager in the sidebar.

  

  3. Click ➕ located on the top right corner. 4. Use the following table to add a new theme. | Key | Value | |—|—| |Theme Name|airline_theme_1| |Light Theme|Upload airline_theme_1_light.zip| |Dark Theme|Upload airline_theme_1_dark.zip| 5. Click Save. 6. Click ➕ again. 7. Use the following table to add another theme. | Key | Value | |—|—| |Theme Name|airline_theme_2| |Light Theme|Upload airline_theme_2_light.zip| |Dark Theme|Upload airline_theme_2_dark.zip| 8. Click Save. 9. Enable User Selection for both themes.

  

  > The theme marked default is always available for user selection and is applied to all apps that enable custom theme. [VALIDATE_3] [ACCORDION-END] [ACCORDION-BEGIN [Step 4: ](Create a server side app configuration)] 1. Click Mobile Applications → Native/MDK in the sidebar. 2. Click New located at the top right corner. 3. Select Mobile Development Kit (MDK) in the New Application Wizard

  

  4. Click Next. 5. Use the following table to fill the details requested in the Basic Info Tab. | Key | Value | |—|—| |License Type|No Change| |ID|sdk.custom.theme.app| |Name|Custom Theme App| |Description|Custom Theme App| |Vendor|No Change| |Domain of Application Route|No Change| 6. Click Next. 7. Click Next on the XSUAA Settings step of the Wizard without making any changes. 8. Click Next on the Role Settings step without making any changes.

  

  9. Click Next. 10. Select Native Application in the Assign Features for drop down menu. 11. Enable Mobile Sample OData ESPM by selecting the check box in the features table. 12. Click Finish. > If prompted, Click OK on the role permissions warning.

  

  [DONE] [ACCORDION-END] [ACCORDION-BEGIN [Step 5: ](Enable a custom theme for your app on SAP Mobile Services)] 1. Click Mobile Applications → Native/MDK in the sidebar. 2. Click sdk.custom.theme.app. 3. Click Assigned Features → Mobile Settings Exchange. 4. Enable Enable Custom Theme check-box under the Appearance section of the Client Configuration tab.

  

  > All themes uploaded in the App Theme Manager should be visible, and the default theme is set as Active. [VALIDATE_5] [ACCORDION-END] [ACCORDION-BEGIN [Step 6: ](Allow anonymous access for your app on SAP Mobile Services)] 1. Click Security tab.

  

  2. Enable Allow Anonymous Access check-box under the Anonymous Access section.

  

  > If it is already enabled, skip to Step 7. 3. Click ➕ located above the API Key Table. 4. Click OK.

  

  > If prompted, Click OK on the confirmation pop-up. [VALIDATE_6] [ACCORDION-END] [ACCORDION-BEGIN [Step 7: ](Build a native app capable of applying themes on the fly)] 1. Launch SAP BTP SDK Assistant for iOS. 2. Click Create New located near the bottom left corner. 3. Click Reuse Existing Application in the project template step. 4. Select the SAP Mobile Services account in which you created the server side configuration and click Next. >If prompted, use your SAP BTP credentials to complete the SSO login. 5. Select the app you created in the second step and click Next. >If prompted, use your SAP BTP credentials to complete the SSO login. 6. Use the following table to fill the project details requested in the Provide the Xcode project configuration step of the assistant, and click Next. | Key | Value | |—|—| |Product Name|custom-theme-app| |Organisation Name|SAP| |Organisation Identifier|com.sap.ios| |Bundle Identifier|Auto generated| |Path|No Change| |Mac Catalyst|No Change| 7. Click Next. 8. Click Finish. > If prompted, click Trust and Open in the warning pop-up to open the newly created Xcode project.

  

  [DONE] [ACCORDION-END] [ACCORDION-BEGIN [Step 8: ](Run the app)] 1. Click ▶ (Start the active scheme) in Xcode to run the application. 2. Toggle the appearance of your device from light to dark (or vice-versa).

  

  > Click here to see how you can toggle the appearance on a device. On a simulator, go to the Menu Bar → Features → Toggle Appearance. [DONE] [ACCORDION-END] [ACCORDION-BEGIN [Step 9: ](Change the theme of your app on SAP Mobile Services)] 1. Go to your SAP Mobile Services account. 2. Click Mobile Applications → Native/MDK in the sidebar. 3. Click sdk.custom.theme.app. 4. Click Assigned Features → Mobile Settings Exchange. 5. Select the Active radio button for airline_theme_2 under the Appearance section of the Client Configuration tab. 6. Click Save.

  

  [DONE] [ACCORDION-END] [ACCORDION-BEGIN [Step 10: ](Re-launch the app to apply the new theme)] 1. Terminate the app previously running. 2. Re-launch the app. 3. Toggle the appearance of your device from light to dark (or vice-versa).

  

  > The new application theme along with a new icon was applied without the app having to be re-deployed**. [DONE] [ACCORDION-END] [ACCORDION-BEGIN [Step 11: ](Experience the theme on different screens)] 1. Click Start. 2. Toggle appearance layout. 3. Enter your username and password. > The custom theme is not applied to the log in screen since it is not a native screen. 4. Accept user consent requests. 5. Configure a passcode. 6. Allow the app to send push notifications. > The custom theme is not applied to OS managed screens. 7. Terminate the app. 8. Switch themes on SAP Mobile Services. 9. Re-launch the app. 10. Click ESPMContainer. 11. Toggle appearance layout. 12. Click Suppliers.

  

  [VALIDATE_11] Congratulations on successfully completing the tutorial. You can now apply custom themes to native applications on the fly using SAP BTP SDK for iOS. [ACCORDION-END]