Branding and Theming

The FioriUIKit includes NUI that enables styling iOS UIs in a stylesheet with CSS-like syntax. UI components in FioriUIKit apply the styles defined in the Fiori Design Language. Without enabling NUI, the system loads the default Fiori styles setting. To customize the style, the application can enable NUI with customized styles defined in the stylesheet to override the defaults. The application can also apply the NUI for UI components other than FioriUIKit‘s components in the application.

Enabling NUI

To enable NUI

1. Import NUI stylesheet with .nss extension into the application.
2. Add NUISettings.initWithStylesheet(name: styleSheetFileName) to application:didFinishLaunchingWithOptions in the AppDelegate.m file.

Note: The NUI library is embedded in FioriUIKit, so no installation is required.

FioriUIKit Component Style Customization

The screenshot below illustrates the FUIWelcomeScreen before (default) and after setting different styles in NUI, by modifying the text color and logo:

The stylesheet file can include a set of generic Fiori Design Language style definitions for font-style and font-color. Then, for each control, an individual style class configuration can be included; this per-component style setting can override the style declared in the global definition and add other styles.

The stylesheet should follow these conventions for naming the style strings starting with fdl which represents Fiori Design Language

• For global definitions: fdl<lower-camel-case enum name>_<property name> For example: fdlFontStyle_subheadline

• For per-component definitions: fdl<class name>_<property name>
  For example: fdlFUIWelcomeScreen_demoLabel

    fdlFontStyle_subheadline {
        font-style: subheadline;
        font-color: #33cc33;
    }

    fdlFUIWelcomeScreen_headlineLabel {
        font-color: #FF0000;
    }
    fdlFUIWelcomeScreen_primaryActionButton {
        /* alpha value should be in 0% to 100% range.  If value is more than 100% (64 in hex value), the system resets the value to 100%.  */
        font-color: #1EE68A00;  /* where `1E` is the hex value of 30% in alpha value, and `E68A00` is the hex value for RGB. */
        font-color-highlighted: green;
    }
    fdlFUIWelcomeScreen_logoImageView {
        image-name: ProfilePic.png;
    }

See the NUI README for additional information about setting style syntax in the stylesheet.