Skip to Content

Customize theme and on-boarding of iOS app

Create a stylesheet to apply a custom theme and change the default on-boarding behavior for your iOS app.
You will learn
  • How to create and load a NUI stylesheet to apply a custom theme to your app
  • How to change your app’s on-boarding behavior by changing the configuration in SAP Mobile Services for development and operations
qualitureRobin van het HofMarch 31, 2021
Created by
qualiture
November 14, 2017
Contributors
qualiture

Prerequisites

  • Development environment: Apple iMac, MacBook or MacBook Pro running Xcode 9 or higher
  • SAP BTP SDK for iOS: Version 2.0
  • Step 1

    NUI uses CSS-like stylesheets with extension .nss. In this tutorial step, you will create a *.nss file.

    In Xcode, right-click the ESPMReminders folder and from the context menu, select New File…. In the dialog, scroll down to the Other section and select the Empty template:

    Create a NUI stylesheet

    Click Next to proceed.

    In the next screen, provide the following details:

    Field Value
    File Name CustomTheme.nss
    Create a NUI stylesheet

    Make sure it is saved in the ESPMReminders group and click Create. The new CustomTheme.nss file is now created in the root of your project.

  • Step 2

    The styles in the stylesheet can be applied to both standard iOS components such as UINavigationBar, UITableView etc. as well as SAP Fiori for iOS components.

    For a reference of the standard iOS components classes, you can refer to NUI style classes.

    For SAP Fiori for iOS components style classes, the following conventions should be followed:

    • Global definitions
    • fdl<lower camelcase enum name>_<property name>
    • example: fdlFontStyle_subheadline
    • SAP Fiori component specific definitions

    • fdl<class name>_<property name>
    • example: fdlFUIWelcomeScreen_primaryActionButton

    Open the just created CustomTheme.nss file, and add the following:

    css
    Copy
    NavigationBar {
        bar-tint-color: #B0D450;
    }
    
    BarButton {
        font-color: #3A835B;
    }
    
    fdlFontStyle_subheadline {
        font-style: subheadline;
        font-color: #3A835B;
    }
    
    fdlFUIWelcomeScreen_headlineLabel {
        font-color: #3A835B;
    }
    
    fdlFUIWelcomeScreen_primaryActionButton {
        background-color-normal: #3A835B;
        background-color-highlighted: #B0D450;
    }
    

    This adds a light-green tint to the standard iOS navigation bar as well as a darker green for the navigation bar buttons.

    The standard SAP Fiori subheadline font style (member of the SDK’s SAPFiori FDLFontStyle enum) is also changed to green, as is the on-boarding’s application title and primary action button.

  • Step 3

    In order for your app to apply the custom styles, you need to tell your app to use the custom stylesheet.

    Open the app’s AppDelegate.swift file, and in method application(_:didFinishLaunchingWithOptions:), at the top of the method’s body, add the following line:

    swift
    Copy
    NUISettings.initWithStylesheet(name: "CustomTheme")
    

    This tells your app to use NUI with your custom stylesheet CustomTheme.nss.

  • Step 4

    First, remove the app from your device, so you will go through the onboarding again.

    Then build and run the app.

    When launched, you should now see the restyled on-boarding screen with the greenish theme:

    Create a NUI stylesheet

    If you proceed further, you will see the navigation bar is also styled:

    Create a NUI stylesheet

    And, unsurprisingly, the custom UI you have created earlier follows the same theme:

    Create a NUI stylesheet

    For more on theming SAP Fiori for iOS components, see Branding & Theming

    For more on NUI, see NUI readme

  • Step 5

    By default, the on-boarding flow provides you with a means to authenticate against SAP Mobile Services for development and operations, provides Touch ID functionality and passcode functionality.

    By default, the passcode simply needs 8 characters, but this could be as simple as 11111111, which is not very secure.

    To enforce a more secure passcode policy, you can set this in the application definition for your app in SAP Mobile Services for development and operations.

    Log on to SAP Mobile Services for development and operations at https://hcpmsadmin-<your_trial_account_user>trial.dispatcher.hanatrial.ondemand.com/

    Navigate to Mobile Applications > Native/Hybrid and click on the com.sap.tutorials.demoapp.ESPMReminders entry.

    In the next page, click on Client Policies in the Assigned Features panel.

    In the page that opens, under the Passcode Policy panel, tick the checkbox next to Enable Passcode Policy

    Set the following properties:

    Field Value
    Minimum Length 12
    Minimum Number of Unique Characters 4
    Upper Case Character Required YES
    Lower Case Character Required YES
    Digits Required YES
    Modify on-boarding behavior

    Click Save when done.

  • Step 6

    First, remove the app from your device, so you will go through the onboarding again.

    Then build and run the app.

    Now, when you reach the passcode screen, you will notice the minimum number of characters has changed to 12, and the passcode policy is displayed.

    Enter passcode 11111111111111111111.

    Build and run the application

    Only the Digits policy is met, and the Next button is still disabled.

    Add an uppercase and lowercase letter to the passcode.

    Build and run the application

    Now all character policies are met, but the Next button is still disabled. That’s because you have supplied only 3 unique characters and the policy dictates 4 unique characters.

    Add a different character, and now the Next button is enabled:

    Build and run the application

    What is the advantage of setting passcode policies in SAP Mobile Services?

Back to top