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:

Image

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: fdlFontStylesubheadline

  • For per-component definitions: fdl<class name><property name>
    For example: fdlFUIWelcomeScreen
    demoLabel


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

    fdlFUIWelcomeScreen_demoLabel {
        font-color: #ff0000;
    }
    fdlFUIWelcomeScreen_demoButton {
        font-color: #e68a00;
        font-color-highlighted: green;
    }
    fdlFUIWelcomeScreen_logoImageView {
        image-name: ProfilePic.png;
    }

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

  • Undocumented

    See more
  • Color styles for Fiori Design Language Palette:

    • primary1:
    • primary2:
    • primary3:
    • primary4:
    • primary5:
    • primary6:
    • tintColorLight:
    • tintColorDark:
    • backgroundGradientTop:
    • backgroundGradientBottom:
    • backgroundBase:
    • line:
    • chart1:
    • chart2:
    • chart3:
    • chart4:
    • chart5:
    • negative:
    • critical:
    • positive:
    See more

    Declaration

    Swift

    public enum FUIColorStyle : Int
  • An enum that represents the different component style classes for Fiori Design Language

    See more

    Declaration

    Swift

    public enum FDLStyle
  • An enum that represents the different font style classes for Fiori Design Language

    See more

    Declaration

    Swift

    public enum FDLFontStyle
  • The style class settings class that provides a list of static functions for applying-style-related functionalities

    See more

    Declaration

    Swift

    public class NUISettings: NSObject
  • The master renderer class that provides a list of static functions for individual component rendering

    See more

    Declaration

    Swift

    public class NUIRenderer: NSObject