Using Corporate Branding with Custom Visual Themes

Objectives

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.

    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 ThemeExport 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.

    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 ExchangeClient Configuration tab and scroll down to the Appearance section.

    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.

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.

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