Using Corporate Branding with Custom Visual Themes

Objective

After completing this lesson, you will be able to use your own branding and theming by using SAP Mobile Services

Overview

It is possible to adapt the SAP Mobile Start native app to a corporate branding with a custom theme. Themes created using SAP Theme Designer can be exported and uploaded to the SAP Mobile Services instance of SAP Build Work Zone, standard edition. The theming definition is interpreted by the respective SAP BTP SDK components of SAP Mobile Start.

Prerequisites

  • You have completed the Initial Setup of UI Theme Designer
  • If you want to reuse existing themes, they must be based on SAP Morning Horizon and SAP Evening Horizon templates.

Apply a Theme

  1. Create and export a custom theme from SAP Theme Designer.

    You can create custom themes by following the End to End Flow documentation.

    For the best user experience, a light and a dark theme to match the end user’s device settings should be provided.

    Note

    The themes must be based on the SAP Morning Horizon and SAP Evening Horizon templates.

    In case you do not provide a theme for either light or dark mode, the SAP Mobile Start app displays the default SAP theme instead. Also consider accessibility requirements when creating a custom theme – you can find helpful information in the SAP Fiori Design Guidelines (iOS and Android). There is also a specific article on accessibility.

    The Theme Designer offers a specific Mobile tab where selected UI elements can be customized for SAP Mobile Start.

    Screenshot of Theme Creating inside the SAP Theme Designer, highlighting a specific tab for Mobile with a limited set of input field for the brand colors.

    An up-to-date list of the customizable parameters and their mapping to respective UI elements in SAP Mobile Start is available in the documentation.

    You can export the theme by choosing Theme → Export on the top left. First, you must provide a Theme ID and a Title. Expand the Optional Settings (for Experts) and select the Source Files + CSS Resources. In the UI technologies section at the bottom, deselect both. Once finished, choose Export to download the zip file.

    Screenshot of the SAP Theme Designers Export Dialog with the “Source Filed + CSS Resources” Option selected.

    Note

    A separate zip file must be exported and saved for light and dark themes.
  2. Import custom theme to SAP Mobile Services.

    Access the SAP Mobile Services as explained in the previous lesson. Navigate to the Mobile Settings Exchange → Client Configuration tab and scroll down to the Appearance section.

    Screenshot of the Mobile Settings Exchange page inside the SAP Mobile Services showing the Appearance section where the themes can be uploaded. 

    Choose the Upload button on the right to upload the custom themes. Enter a name and provide both zip files for the light and dark themes. Choose Save.

    Screenshot showing a Theme-Upload dialog offering the inputs to set a name and upload files for light and dark themes.  

Result

You now see the themes in the Appearance section. When you start the SAP Mobile Start app the next time, the new theming will be applied. You can update or remove themes via the corresponding buttons at the top right.

Screenshot of the Appearance section after uploading a theme highlighting the short descriptions of the uploaded themes and the update button on the top right. 

Note

In case you have a dedicated SAP Mobile Services instance (separate to the one that comes with the SAP Build Work Zone, standard edition) and have developed custom apps using the SAP BTP SDK for iOS 9.0 / Android 5.1 or higher, you can apply a theme for those apps as well. Follow this blog post to see how you can provide a common corporate theme across different mobile apps.

Log in to track your progress & complete quizzes

Learning

SAP FacebookSAP YoutubeSAP LinkedIn