The SAPFiori framework includes a number of UI components which implement the Fiori Design Language. These controls inherit from the Apple UIKit components, and may be utilized programmatically, or via Interface Builder in
- Add SAPFiori.framework and SAPCommon.framework to your Xcode project.
- 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 Embeded Frameworks sections in the Build Phases tab of your App’s Xcode project settings.
- FUIObjectTableViewCell - A table cell used to show information of an object. The cell contains: a left stack of icons, An image (square or circle), three levels of text: first is Title, second is a Subhead, third is Footnote, a description (only shows up on regular size), and two top right attributes (text or icon).
- FUIContactCell - Contains contact information including an image, several labels, and an activity component.
- FUITimelineCell and FUITimelineMarkerCell - Displays a list of items (objects, events, or posts) in chronological order. Usually, the timeline view provides information about changes to an object.
- FormKit - A collection of
UITableViewCellsubclasses, which are used to construct table views for creating or editing business objects, or for building filter controls. FormKit cells provide change handlers to respond to user interaction, and validation views. FormKit includes these cells:
UITableViewCellsubclasses in the SAPFiori framework are designed to be used with iOS’s AutoLayout engine. To enable AutoLayout to calculate the correct height of cells, developers should: 1. Set the table view’s
estimatedRowHeightproperty, 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
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.
- FUIObjectCollectionViewCell - This subclass of
UICollectionViewCellmatches the API of the
FUIObjectTableViewCell, and is commonly used for displaying a collection of business objects
- FUISimpleCollectionViewCell - This variant of
UICollectionViewCellcontains an image (
UIImageView) and label (
- FUISimplePropertyCollectionViewCell - This subclass of
UICollectionViewCellmatches the views API of the
FUISimplePropertyFormCell, and displays horizontally-aligned key label and value text field.
- FUIKeyValueCollectionViewCell - This variant of
UICollectionViewCellcontains a vertically-stacked key label and a value text field.
The following layouts inherit from Apple UIKit’s UICollectionViewFlowLayout:
- FUIHorizontalScrollCollectionViewLayout - A flow layout, which aligns all items for a section into a single row.
- FUIHorizontalFlowCollectionViewLayout - A flow layout, which provides the option to scale collection cell items’ dimensions upwards, to fill the collection content width
- FUIStandardAutoSizingColumnFlowLayout - A flow layout, which arranges collection cell items into a grid, where each row is top-aligned, and items’ widths are stretched to fill the specified number of columns.
- FUIKeyValueFlowLayout - A variant of
FUIStandardAutoSizingColumnFlowLayout, with pre-defined item spacings to implement Fiori Design Language for arranging
The following user activation and onboarding components allow you to quickly integrate all required onboarding steps into apps and connect to SAP HCP, mobile service for development and operations. The onboarding framework supports various onboarding scenarios, including: login screen with demo mode, SAP Cloud ID with OAuth, and touch ID and passcode:
FUIWelcomeScreen - A screen that allows application onboarding. The screen has two versions to display the application name, instructions on how to start the activation process, and the option to run the application in demo mode. Version 1 has no
Activationbutton; version 2 has
Activationbutton after user is redirected to the screen that has a sign in.
FUIPasscodeCreateController, FUIPasscodeInputController, and FUIPasscodeChangeController - Provides passcode and Touch ID screens used for setting up a passcode and enabling iPhone native Touch ID for application authentication.
The following component inherits from Apple UIKit UIView:
FUIObjectHeader - An UIView contains a set of content views which are common to Fiori Design Language Object Cell types, with the associated constraint implementations and handling for size classes. It is typically added to
FUIKPIView - An UIView that enables a developer to present
KPIinformation in a formatted manner consistent with the Fiori Design Language.
The following utility controls provide additional UI capabilities:
- FUIImageView - An enhanced
UIImageViewthat applies a circular mask to an image.
- FUIActivityControl - A stand alone component that supports user activities such as phone, email, message, and videoCall.
- FUIInlineValidationTableViewCell - A base class for
FormKitcells supporting validation message.
- FUIInlineValidationView - An auxiliary view that contains a validation message for
- FUIBannerMessageView - An view that contains a message sticking underneath the navigation bar.
- FUIFeedbackScreen - An
UIViewControllerused to display a feedback screen for the application.
The following components inherit from Apple UIkit UISearchBar:
- FUISearchBar - A customized search bar with built-in barcode scanner.
- FUINavigationBar - A Fiori style
Branding and Theming
Controls in the SAPFiori framework may optionally be styled, using a CSS-like stylesheet. The
SAPFiori integrates the open-source
NUI framework, which exposes styling properties of UIKit API’s as CSS-like style attributes. The
NUI library is embedded in
SAPFiori, so no installation is required.
UI components in
SAPFiori are styled programmatically by default, and are also assigned a list of style classes which are interpretable by the
NUI engine. These style classes may be read, or modified, via the
To override the default style of a control at runtime, using a stylesheet (an
*.nss file), the developer 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.