Onboarding - theming

Styling Options

The SAPFioriFlows framework provides convenient APIs for two types of styling option use cases: remote application theme and local stylesheet.

Remote Application Theme

As an administrator, you can define a theme for your app using SAP Mobile Services. Each theme definition includes a light and dark version of the theme.

NUIStyleSheetApplyStep is an OnboardingStep capable of downloading the active application theme for your app from SAP Mobile Services and applying it to all UI controls.

We recommend that you define this onboarding step as the first step in the onboarding flow to ensure that theme information is applied before any UI controls are visible. An API key is required, as the end-user still needs to be authenticated. 

NUIStyleSheetApplyStep(apiKeyAuthenticationConfig: <#APIKeyAuthenticationConfig#>)

If you use the onboarding step after user authentication, you can use the following initializer.

NUIStyleSheetApplyStep()

Internally it uses SAPcpmsThemeManager, a granular API to download, persist, apply, and delete application themes.

Local Stylesheet

You can create CSS-like stylesheets, according to SAPFiori framework conventions, to style UI controls. You can bundle these stylesheets with your application without requiring any interaction with the server .

Use NUIStyleSheetApplyStep to load a local CSS-like stylesheet and apply it to UI controls:

NUIStyleSheetApplyStep(fileURL: <#URL#>)

  • Instantiates an OnboardingStep capable of downloading a theme file from the server and applying the NUIStyleSheet in the onboarding and restore flows.

    There are three types of initializers for the different methods for applying themes:

    1. 1. If the initializer with the fileURL parameter is used, then the theme will be applied from that URL instead of downloading it from the server.

    If you wish to use this funcionality in manual mode, you can use this one-liner instead of this class:

    NUISettings.loadStylesheetByURL(url: <#URL#>)
    1. If the initializer with the APIKeyAuthenticationConfig parameter is used, then the configured theme, if any, will be downloaded from the Mobile Services. The Application Identifier from AppParameters and host from ConfigurationProvider will be also used.

    Usage

    let apiKeyAuthenticationConfig = APIKeyAuthenticationConfig(apikeys: [<#String#>], isAPIKeyAccessOnly: false, allowAnonymousAccessFlag: true)
NUIStyleSheetApplyStep(apiKeyAuthenticationConfig: apiKeyAuthenticationConfig)
    1. If the initializer with no parameter is used, then the configured theme, if any, will be downloaded from the Mobile Services using SAPURLSession (with the appropriate authentication mechanism configured) and SAPcpmsSettingsParameters from OnboardingContext.

    Please note that the SDK prioritizes initializers that have parameters.

    See more

    Declaration

    Swift

    open class NUIStyleSheetApplyStep : OnboardingStep

  • The SAPcpmsThemeManager downloads a theme from Mobile Services. It uses the SAP Mobile Services Theme Service API endpoint for that.

    This sample code demonstrates how to download the theme from SAP Mobile Services:

    var urlSession = SAPURLSession()
let settingsParameters = SAPcpmsSettingsParameters(backendURL: <#URL only with domain#>, applicationID: <#appid#>)

let response = try SAPcpmsThemeManager.downloadTheme(sapURLSession: urlSession, settingsParameters: settingsParameters)

    NOTE:

    Theme updates will be reflected in the UI components after relaunching the application.

    See more

    Declaration

    Swift

    public class SAPcpmsThemeManager