Skip to content

The Fiori Component

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.

Installation

  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:

  • ListFloorplan (API) – Also see the SAP Fiori Design Guidelines for List Report
  • ObjectFloorplan (API) – Also see the SAP Fiori Design Guidelines for Object.
  • Onboarding Patterns (API) – Also see the SAP Fiori Design Guidelines for Onboarding.
  • Object Views (API) – Also see the SAP Fiori Design Guidelines for Object Cell and ObjectHeader.
  • Contact Views (API) – Also see the SAP Fiori Design Guidelines for Contact Cell.
  • Timeline Views (API) – Also see the SAP Fiori Design Guidelines for Timeline View and Timeline Preview.
  • KPI View (API) – Also see the SAP Fiori Design Guidelines for KPIs.
  • Grid View (API) – Also see the SAP Fiori Design Guidelines for Grid Layout.
  • Map View (API) – Also see the SAP Fiori Design Guidelines for Map.
  • Create and Filter Patterns (API) – Also see the SAP Fiori Design Guidelines for Create and Filter patterns.
  • Attachments Controller (API) – Also see the SAP Fiori Design Guidelines for Attachment type.
  • Collection Views (API) – Also see the SAP Fiori Design Guidelines for Collection View.
  • Overview Patterns (API) – Also see the SAP Fiori Design Guidelines for Header and Overview.
  • Feedback Indicators (API) – Also see the SAP Fiori Design Guidelines for Feedback.
  • Search Bar and Barcode Scan (API) – Also see the SAP Fiori Design Guidelines for Search and Scan View.
  • Branding and Theming (API) – Also see the SAP Fiori Design Guidelines for Branding.
  • Calendar View (API) - Also see the SAP Fiori Design Guidelines for Calendar.
  • Hierarchy View (API) - Also see the SAP Fiori Design Guidelines for Hierarchy.
  • Page View (API) - Also see the SAP Fiori Design Guidelines for Sibling Navigation.

Additional Component Notes

The Following Components Inherit From Apple UIKit UITableView and UITableViewCell

  • FUIBaseTableViewCell and NibDesignableFUIBaseTableViewCell - Base classes used in most SDK table view cells, supporting Fiori 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 (headline, subheadline, and footnote), a description (only shows up on regular horizontal size mode), and two status attributes (text or icon).

  • FUIContactCell - Contains contact information, including an image, several labels, and an activity component.

  • FUITimelineCell, FUITimelineMarkerCell, and FUITimelinePreviewTableViewCell - Displays a list of items (objects, events, or posts) in chronological order. FUITimelinePreviewTableViewCell is an auto-sizing table view cell container for a FUITimelinePreviewView instance.

  • FormKit cells: A collection of UITableViewCell subclasses, that 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 FUIInlineValidationTableViewCell also support inline validation views.

-- FUITitleFormCell -- FUINoteFormCell -- FUIKeyValueFormCell -- FUISimplePropertyFormCell -- FUIDatePickerFormCell -- FUIDurationPickerFormCell -- FUIValuePickerFormCell -- FUISwitchFormCell -- FUISegmentedControlFormCell -- FUIFilterFormCell -- FUIListPickerFormCell -- FUIAttachmentsFormCell

  • FUIGridTableViewCell - A table view cell for displaying a FUIGridRowItem--common for the List Report floorplan.

  • FUIHierarchyItemTableViewCell - A variant of UITableViewCell to show a collection item's business object content and hierarchy information (e.g. number of children in its next level).

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.

The Following Components Inherit From Apple UIKit UICollectionView and UICollectionViewCell

  • FUIObjectCollectionViewCell - This subclass of UICollectionViewCell matches the API of the FUIObjectTableViewCell and is commonly used to display a collection of general business objects
  • FUISimpleCollectionViewCell - A basic UICollectionViewCell containing an image view and label.
  • FUISimplePropertyCollectionViewCell - This subclass of UICollectionViewCell matches the views API of the FUISimplePropertyFormCell and displays a horizontally-aligned key label and value text field.
  • FUIKeyValueCollectionViewCell - This variant of UICollectionViewCell contains a vertically-stacked key label and a value text field.
  • FUITimelineCollectionViewCell - This variant of UICollectionViewCell is typically rendered internally by the FUITimelinePreviewView component.
  • FUIWhatsNewCollectionViewCell - This variant of UICollectionViewCell is used to show new feature items in FUIWhatsNewDetailListController. It has a similar setup and layout to FUIObjectCollectionViewCell.
  • FUIHierarchyCollectionItem - This variant of UICollectionViewCell is 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 UICollectionViewFlowLayout
  • FUIHorizontalScrollCollectionViewLayout - A flow layout that aligns all items for a section into a single row.
  • FUIHorizontalFlowCollectionViewLayout - A flow layout that provides the option to scale collection cell items' dimensions upwards, to fill the collection content width.
  • FUIStandardAutoSizingColumnFlowLayout - A flow layout that 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 predefined item spacing to implement the SAP Fiori design language for arranging FUIKeyValueCollectionViewCell items.
  • FUITimelineCollectionViewHorizontalFlowLayout - A variant of FUIStandardAutoSizingColumnFlowLayout that 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 an identical cell height to the height of the tallest cell in that row.
  • FUIHierarchyCollectionViewLayout - A concrete layout class that manages the layout of the hierarchy view.
The Following Components Inherit From Apple UIKit UIView
  • FUIObjectHeader - Header-style view with API similar to FUIObjectCell pattern. It is typically added to UITableView as its tableHeaderView.
  • FUIProfileHeader - Header-style view with API similar to FUIContactCell pattern. It is typically added to UITableView as its tableHeaderView.
  • FUIKPIHeader - Header-style view for displaying sets of FUIKPIView instances. It is typically added to UITableView as its tableHeaderView.
  • FUIKPIView - A UIView that enables a developer to present "KPI" information in a formatted manner consistent with the SAP Fiori design language.
  • FUITimelinePreviewView - A 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 standalone component that supports user activities, such as phone, email, message, and videoCall. Used natively in FUIContactCell, and typical in FUIProfileHeader designs.
  • FUIInlineValidationView - An auxiliary view that contains a validation message for FormKit cells. Used natively within FUIInlineValidationTableViewCell.
  • FUIBannerMessageView - An animated view for presenting notifications and displaying status. Pins to UINavigationBar, or FUIObjectHeader.
  • 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 FUISignatureCaptureController.
The Following Utility Classes Extend Native UIKit Types

Note: 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 Identity and Authentication Service with OAuth, touch ID, and passcode.

  • FUIWelcomeScreen - This screen supports application onboarding and displays the application name, instructions on how to start the activation process, and provides the option to run the application in demo mode. The screen comes in two versions: version 1 has no Activation button; version 2 provides an Activation button after the user is redirected to the screen that provides sign in.
  • FUIPasscodeCreateController, FUIPasscodeInputController, and FUIPasscodeChangeController - Provide passcode and Touch ID/Face ID screens to set up a passcode and enable iPhone native biometric ID for application authentication.
  • FUIMultiUserPasscodeController - A FUIPasscodeController subclass for the multi-user onboarding use case.
Floorplan

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
- `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.

  • FUIChartView - A UIView subclass that displays charts.
  • FUIChartViewDataSource - An object that provides data to the chart view.
  • FUIChartViewDelegate - An object for managing chart selections and customization.
  • FUIChartFloorplanViewController - UIViewController implementation of the FUIChartFloorplanView.
  • FUIChartFloorplanTableViewCell - UITableViewCell container of the FUIChartFloorplanView.
  • FUIChartFloorplanView - View implementation of the chart floorplan.
  • FUIChartTitleView - Chart title component of the chart floorplan.
  • FUIChartTitleTableViewCell - UITableViewCell container of the FUIChartTitleView.
  • FUIChartLegendView - Legend view component of the chart floorplan.
  • FUIChartLegendTableViewCell - UITableViewCell container of the FUIChartLegendView.
Other Components
  • FUIFeedbackScreen - A UIViewController used to display a feedback screen for the application.
  • FUIWhatsNewViewController - A UIViewController used to display new features for the application.
  • FUIWhatsNewDetailPageController - Page style controller to be used in FUIWhatsNewViewController.
  • FUIWhatsNewDetailListController - List style controller to be used in FUIWhatsNewViewController.
  • FUISignatureCaptureController - A UIViewController used to capture the user's signature.
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.

Iconography

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.

Last update: April 14, 2021