The SAPFiori framework includes a number of UI components that implement the Fiori Design Language. These controls inherit from the Apple UIKit components, and may be utilized programmatically, or via Interface Builder in *.xib or *.storyboard files.


  1. Add SAPFiori.framework and SAPCommon.framework to your Xcode project.
  2. Add the framework files to the Embedded Binaries section of the General tab for project configuration.

The frameworks should be linked to your project, and appear under the Link Binary with Libraries and Embedded Frameworks sections in the Build Phases tab of your App’s Xcode project settings.

Component Categories

Select from the following categories on the left for implementation details, or related links below for additional design guidelines:

Additional Component Notes

The following components inherit from Apple UIKit UITableView and UITableViewCell

Important: UITableViewCell subclasses in the SAPFiori framework are designed to be used with iOS’ AutoLayout engine. To enable AutoLayout to calculate the correct height of cells, developers should:

  1. Set the table view’s estimatedRowHeight property to a number that is close to the expected height at runtime. This value will be used, before the cell’s dimensions are calculated, to set the table view’s scrollbar position and height.
  2. Set the table view’s rowHeight property to UITableViewAutomaticDimension, to indicate that the AutoLayout engine should calculate the correct height for the cell, based upon each cell’s content. See Defining height of a table view cell for details.

The Following Components Inherit From Apple UIKit UICollectionView and UICollectionViewCell

The Following Layouts Inherit From Apple UIKit UICollectionViewFlowLayout
The following components inherit from Apple UIKit UIView
The Following Utility Classes Extend Native UIKit Types


With the introduction of the closure-styled observe API in Swift 4, and support for Smart KeyPaths SE-0161, it is recommended to use the native KVO technique for change observation, rather than the onChangeHandler closure API in FUIImageView, FUILable, and FUITextField, as the native API is very similar and more flexible.

  • FUIImageView - An enhanced UIImageView that supports applying a circular mask to an image, and also a change handler on the image property.
  • FUILabel - Extension to UILabel supporting insets: UIEdgeInsets in intrinsicContentSize calculation and also a change handler on the text property.
  • FUITextField - Extension to UITextField supporting a change handler on the text property.
  • FUISearchBar - Extension to UISearchBar supporting a native barcode scanner property.
  • FUINavigationBar - Extension to UINavigationBar supporting a simple style technique to match the SAP Fiori design language.
Onboarding and Activation

The following user activation and onboarding components allow you to quickly integrate all required onboarding steps into apps and connect to SAP Mobile Services. The onboarding framework supports various onboarding scenarios, including: login screen with demo mode, SAP Cloud ID with OAuth, touch ID, and passcode.


Floorplan provides a quick and easy way to build a full-screen list or sectioned page that comply with List Report and Object patterns, respectively, in the SAP Fiori Design Guidelines. Because floorplan comes with boilerplate code for predefined UI elements and layout, the developer can focus on data binding and user interaction at development time.

  • FUIListFloorplan - A generic UITableViewController subclass for displaying business objects of the same type in a list.
  • FUIObjectFloorplan - A generic UITableViewController subclass for displaying the properties of a business object.
  • FUIObjectEditingFloorplan - A floorplan for editing a business object.

The SDK provides a variety of chart types to help visualize your analytic data. The supported chart types are:

  • area
  • bar
  • bubble
  • column
  • combo
  • donut
  • line
  • scatter
  • stackedBar
  • stackedColumn
  • stock
  • waterfall

In addition, chart floorplan is also a very helpful class when it comes to building a full-screen charting interface that displays additional information, such as chart title, summary view, and legend.

Other Components
Branding and Theming

Controls in the SAPFiori framework may optionally be styled using a CSS-like stylesheet. The SAPFiori framework integrates the open-source NUI framework, which exposes styling properties of UIKit APIs as CSS-like style attributes. The NUI library is embedded in the SAPFiori framework, so no installation is required.

UI components in SAPFiori are styled programmatically by default and are also assigned a list of style classes that are interpretable by the NUI engine. These style classes may be read or modified via the styleClassPath property.

To override the default style of a control at runtime, use a stylesheet (an *.nss file) to modify the class definitions in the stylesheet for the relevant style classes, and then activate the NUI engine at runtime by supplying the stylesheet.

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

Developers may assign style classes to any UIView-inheriting control.


The SAP Fiori for iOS icon library (FUIIconLibrary) identifies a standard subset of SF Symbols that are aligned with the SAP Fiori design language. This allows us to have a robust collection that offers the familiarity, accessibility, and cohesiveness SAP customers expect across different platforms while still being consistent with the iOS experience.

Coloring and Typography

SAPFiori framework provides its own color palette and typography system (SAP 72) that comply with the Fiori for iOS design guidelines.

All Fiori Colors are dynamic colors, which means they will adjust based on iOS Appearance settings (Light/Dark). Accessing Fiori Color using UIColor.preferredFioriColor(forStyle:).

72 is a SAP patent typeface that delivers great reading experience to our users. You can get these fonts using UIFont.preferredFioriFont(forTextStyle:). Note that these fonts support Dynamic Type out of the box.

Custom fonts need to be loaded and registered during App’s runtime. Make sure you call UIFont.registerFioriFonts() inside application(_:didFinishLaunchingWithOptions:) of your AppDelegate.