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 Embedded Frameworks sections in the Build Phases tab of your App’s Xcode project settings.
Select from the following categories on the left for implementation details, or related links below for additional design guidelines:
- Floorplan examples – See also Fiori Design Guidelines for List Report and Object Floorplans.
- Onboarding patterns – See also Fiori Design Guidelines for Onboarding.
- Object views – See also Fiori Design Guidelines for Object Cell and ObjectHeader.
- Contact views – See also Fiori Design Guidelines for Contact Cell.
- Timeline views – See also Fiori Design Guidelines for Timeline View and Timeline Preview.
- KPI view – See also Fiori Design Guidelines for KPIs.
- Grid view – See also Fiori Design Guidelines for Grid Layout.
- Map view – See also Fiori Design Guidelines for Map.
- Create and filter patterns – See also Fiori Design Guidelines for Create and Filter patterns.
- Attachments controller – See also Fiori Design Guidelines for Attachement type.
- Collection views – See also Fiori Design Guidelines for Collection View.
- Overview patterns – See also Fiori Design Guidelines for Header and Overview.
- Feedback Indicators – See also Fiori Design Guidelines for Feedback.
- Search bar and barcode scan – See also Fiori Design Guidelines for Search and Scan View.
- Branding and theming – See also Fiori Design Guidelines for Branding.
- Calendar View - See also Fiori Design Guidelines for Calendar.
- Hierarchy View - See also Fiori Design Guidelines for Hierarchy.
- Page View - See also Fiori Design Guidelines for Sibling Navigation.
- IBDesignable experimental
Additional Component Notes
The following components inherit from Apple UIKit
NibDesignableFUIBaseTableViewCell- Base classes used in most SDK table view cells, supporting Fiori-design cell selection style (
isMomentarySelection), and enabling per-cell cell separator removal at the edges of table view sections.
FUIObjectTableViewCell- Standard table view cell for displaying general business object data. The cell contains: a left stack of icons, An image (square or circle), three levels of text: first is
headline, second is a
subheadnline, third is
description(only shows up on
.regularhorizontal size mode), and two
statusattributes (text or icon).
FUIContactCell- Contains contact information including an image, several labels, and an activity component.
FUITimelinePreviewTableViewCell- Displays a list of items (objects, events, or posts) in chronological order.
FUITimelinePreviewTableViewCellis an auto-sizing table view cell container for a
FormKit cells: 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. Those extending
FUIInlineValidationTableViewCellalso support in-line validation views.
FUIHierarchyItemTableViewCell- A variant of
UITableViewCellto show a collection item’s business object content and hierarchy information (e.g. number of children in its next level).
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:
- 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.
- 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.
The following components inherit from Apple UIKit’s
FUIObjectCollectionViewCell- This subclass of
UICollectionViewCellmatches the API of the
FUIObjectTableViewCell, and is commonly used in displaying a collection of general business objects
FUISimpleCollectionViewCell- A basic
UICollectionViewCellcontaining an image view 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.
FUITimelineCollectionViewCell- This variant of
UICollectionViewCellis typicaly rendered internally by the
FUIWhatsNewCollectionViewCell- This variant of
UICollectionViewCellis used to show new feature items in
FUIWhatsNewDetailListController. It has a similar setup and layout to
FUIHierarchyCollectionItem- This variant of
UICollectionViewCellis used to show a collection item’s business object content and hierarchy information (e.g. number of children in its next level).
The following layouts inherit from Apple UIKit’s
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
FUITimelineCollectionViewHorizontalFlowLayout- A variant of
FUIStandardAutoSizingColumnFlowLayoutwhich resizes collection view cell items, to lay them out according to a specified number of columns. All items on the same row are resized to have identical cell height using the height of the tallest cell in that row.
FUIHierarchyCollectionViewLayout- A concrete layout class that manages the layout of hierarchy view.
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 Cloud Platform Mobile Services. 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 Activation button; version 2 has an Activation button after the user is redirected to the screen that has a sign in.
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
FUIObjectHeader- Header-style view, with API similar to
FUIObjectCellpattern. It is typically added to
FUIProfileHeader- Header-style view, with API similar to
FUIContactCellpattern. It is typically added to
FUIKPIHeader- Header-style view, for displaying sets of
FUIKPIViewinstances. 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.
FUITimelinePreviewView- An UIView contains a header and a collection view for showing an excerpt of your project’s milestones in a convenient linear visual presentation.
FUIActivityControl- A stand alone component that supports user activities such as phone, email, message, and videoCall. Used natively in
FUIContactCell, and typical in
FUIInlineValidationView- An auxiliary view that contains a validation message for
FormKitcells. Used natively within
FUIBannerMessageView- An animated view for presenting notifications and displaying status. Pins to
FUIHierarchyView- A view that manages a collection of items in a multi-column layout.
FUISegmentedControl- A horizontal control made up of multiple segments, each segment functioning as a discrete button.
FUISignatureCaptureView- A view to be displayed in the
The following utility classes extend native UIKit types:
Note: With the introduction of the closure-styled
observeAPI in Swift 4, and suport for Smart KeyPaths SE-0161, it is recommended to use the native KVO technique for change observation, rather than the
onChangeHandlerclosure API in
FUITextField, as the native API is very similar, and more flexible.
FUIImageView- An enhanced
UIImageViewthat supports applying a circular mask to an image, and also a change handler on the
FUILabel- Extension to
intrinsicContentSizecalculation, and also a change handler on the
FUITextField- Extension to
UITextField, supporting a change handler on the
FUISearchBar- Extension to
UISearchBar, supporting a native barcode scanner property.
FUINavigationBar- Extension to
UINavigationBar, supporting a simple style technique to match Fiori Design Language.
UIViewControllerused to display a feedback screen for the application.
UIViewControllerused to display new features for the application.
FUIWhatsNewDetailPageController- Page style controller to be used in
FUIWhatsNewDetailListController- List style controller to be used in
UIViewControllerused to capture user’s signature.
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.
The SAP Fiori for iOS icon library (
FUIIconLibrary) identifies a standard subset of SF Symbols that are aligned with our 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.