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

  • 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
  • An struct that represents style classes

    See more

    Declaration

    Swift

    public struct FioriStyle
  • Color styles for Fiori Design Language Palette:

    • primary1 (light background) Hex color: 3F3A3A
    • primary1 (dark background) Hex color: FFFFFF
    • primary2 (light background) Hex color: 4E4E52
    • primary2 (dark background) Hex color: D3D3D3
    • primary3 Hex color: 76767B
    • primary4 Hex color: CCCCCC
    • primary5 Hex color: F2F2F2
    • primary6 Hex color: FFFFFF
    • primary7 Hex color: 5E6972
    • tintColor (light background) Hex color: 3678AF
    • tintColor (dark background) Hex color: CAE4FB
    • tintColorLight Hex color: CAE4FB
    • tintColorDark Hex color: 3678AF
    • tintColorTapState (light background) Hex color: 295171
    • tintColorTapState (dark background) Hex color: 6191BA
    • tintColorTapStateLight Hex color: 6191BA
    • tintColorTapStateDark Hex color: 295171
    • navigationBar Hex color: 445E75
    • backgroundGradientTop Hex color: 445E76
    • backgroundGradientBottom Hex color: 3F566B
    • backgroundBase Hex color: EFEFF4
    • line Hex color: E5E5E5
    • chart1 Hex color: 9BE1FF
    • chart2 Hex color: 4DC7F8
    • chart3 Hex color: 42CCC8
    • chart4 Hex color: B0D450
    • chart5 Hex color: 7B769E
    • negative (light background) Hex color: D9364C
    • negative (dark background) Hex color: FF9B9B
    • critical (light background) Hex color: FFA325
    • critical (dark background) Hex color: FFDB79
    • positive (light background) Hex color: 3A835B
    • positive (dark background) Hex color: 8EF79F
    • map1 Hex color: 2E4A62
    • map2 Hex color: 56840E
    • map3 Hex color: A63788
    • map4 Hex color: 0079C6
    • map5 Hex color: 6B4EA0
    • map6 Hex color: A16B00
    • map7 Hex color: 0B6295
    • map8 Hex color: D0R774
    • map9 Hex color: 1C857A
    • map10 Hex color: C45300
    See more

    Declaration

    Swift

    public enum FUIColorStyle : Int
  • 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