Skip to search Skip to content
  • Home
  • Explore SAP Fiori for iOS
  • Get Started
  • New Updates
    • Updates in 6.0
    • Updates in 5.1
  • Foundation
    • SAP Fiori Design Principles
    • Typography
    • Colors
    • Iconography
    • Navigation
    • Adaptive Design
    • Animation
    • Accessibility
    • Time and Date Formats
    • Branding
    • Modals
  • Page Types
    • List Report
    • Object Details
    • Overview
    • Profile & Settings
  • Patterns
    • Authentication
      • Authentication Overview
      • Basic Authentication
      • Biometric Authentication
    • Consent Forms
    • Create & Edit
    • Error Handling
    • Feedback
    • Hierarchy
    • Offline
    • Onboarding
      • Single-user Onboarding
      • Multi-user Onboarding
    • Scanner
      • Barcode Scanner
      • OCR Scanner
      • QR Code Scanner
    • Search
    • Sibling Navigation
    • Sort & Filter
  • UI Components
    • Banners
      • Banners
    • Button
    • Calendar
    • Cards
      • Chart Cards
      • Object Card
    • Charts
      • Chart Overview
      • Chart Types
      • Chart Content Table View Cell
    • Collection View
    • Collection View Cell
    • Data Table
    • Filter Feedback Bar
    • Form Cells
      • Attachments
      • Button Form Cell
      • Filter Form Cell
      • Inline Errors
      • List Picker
      • Pickers
      • Segmented Control Form Cell
      • Slider
      • Switches
      • Text Input
    • Header
      • KPI Header
      • Object Header
      • Chart Header
      • Profile Header
    • Hierarchy View
    • KPIs
    • Map View
    • Rating Control
    • Search Bar
    • Search to Select
    • Signature Capture
    • Table View
      • Preview Table View
      • Contact Cell
      • Key Value Cell
      • Object Cell
    • Timeline View
    • Timeline Preview
    • What’s New
  • Resources
    • Stencils
      • Stencils 6.0
      • Stencils 5.1
  • Contact Us

Fiori for iOS Design Guidelines

Explore SAP Fiori for iOS

Explore SAP Fiori for iOS

Categories

Accessibility

SAP Fiori for iOS aims to help you create applications that can be used by a wide range of people and to provide an optimal and pleasant experience for every user, including individuals with visual, motor, auditory, speech, or cognitive disabilities. Our components are flexible, readable, adapt to different screen sizes, and support a wide [...]
Category: Foundation
Type: -

Adaptive Design

Intro SAP Fiori for iOS supports adaptive layouts that allow you to create a great user experience with your app. This dynamically rearranges and resizes your content in response to changes in the device’s orientation or when using the app on different devices. iOS defines two size classes: regular and compact. The regular size class [...]
Category: Foundation
Type: -

Adaptive Design

SAP Fiori for iOS supports the auto layout and adaptivity concepts that allow you to create a great user experience for all devices on iOS and iPadOS platforms. The concepts provide a mechanism that helps dynamically rearrange and resize content in response to changes in the device’s orientation or when using the app on different [...]
Category: Foundation
Type: -

Animation

No image available
In Fiori for iOS, we are using consistent animations. There are four types of animation we usually use in Fiori for iOS apps. Push Modal Zoom In / Out Dissolve Push The 'push' transition eases a new screen element onto the display from the side while sliding out the prior screen to the opposite side. Push transition is [...]
Category: Foundation
Type: -

Attachments

The attachment control allows users to upload files such as image, audio, video, and text files as well as PDF, CSV, and presentation files. Tapping on the add attachment button (+) allows users to upload files from the photo library or other supported apps. Usage Do Use attachment control at the bottom of a create [...]
Category: UI Components
Type: -

Authentication Overview

Authentication occurs when there is a need to verify the identity of a user in order to run or complete an action. This helps to keep users' information private and secure, especially in scenarios where devices may be shared amongst users. Types of Authentication Basic Authentication Basic authentication consists of passcode/login variations which are highly [...]
Category: Patterns
Type: -

Banners

Banners maybe used to provide feedback to the user the result of an action that the user triggered or a message from the system. The most commonly usage of banners is to communicate errors, offline and synchronization status. Banners may also be used for in-app notifications. The message on the banner should be short and [...]
Category: UI Components
Type: -

Barcode Scanner

The barcode scanner allows users to quickly locate an object by scanning a barcode via the device’s built-in camera. It is also used when users need to efficiently manage business objects in a lengthy list report. Structure The barcode scanner comes in a full-screen modal that includes a navigation bar, scan window, and alignment box. [...]
Category: UI Components
Type: -

Basic Authentication

The Basic Authentication pattern is used for general authentication purposes. Structure A. Navigation Bar The navigation bar includes a “Cancel” button for users to exit the authentication. B. Body Title The Body Title should be a concise label that describes the authentication step. C. Body Text The Body Text should detail how to properly complete the [...]
Category: Patterns
Type: -

Biometric Authentication

Biometric authentication detects and recognizes certain human physical features for security authorizations. Apple supports Face ID and Touch ID as convenient and secure biometric authentication methods - and by extension so does Fiori for iOS. Structure A. Navigation Bar The Navigation Bar contains the title and 'Cancel' action depending on the usage. B. ID Icon [...]
Category: Patterns
Type: -

Branding

SAP customers may require designs customized to their specific use cases—designs that extend beyond the patterns and controls provided by SAP Fiori for iOS and the SAP SDK. More specifically, customers may wish to preserve their brand identity while using SAP products. SAP Fiori for iOS acknowledges this need and provides the flexibility to have [...]
Category: Foundation
Type: -

Button Form Cell

No image available
A Button Form Cell represents an action that can be taken in a view. Usage Do Use Button Form Cell for representing a relevant action for a current view. Don't Do not use Button Form Cell to represent a select option. Use Form Cell with Buttons or List Picker instead. Variants Standard Button Form Cell Standard [...]
Category: UI Components
Type: -

Buttons

A button communicates the action that it is going to initiate. Users can tap a button to begin a process or workflow, or to trigger an action. Structure Buttons consists of a center-aligned label contained within a filled or outlined rectangular background. Variations There are several different types of buttons and each is designed for [...]
Category: UI Components
Type: -

Calendar

The Calendar View provides a visual overview of a week, a month, or multiple months. Usage Dos Use Calendar View to display a visual overview of a week, a month, multiple months, or a range of selected dates. Use Calendar View to visually present correlations between two dates. For instance: consecutive holidays, flight ticket prices in peak [...]
Category: UI Components
Type: -

Chart Cards

The chart card displays a thumbnail view of a chart, with key information shown. Users can tap it to navigate to the full interactive chart view. Structure Basic Structure Chart cards can include variations of the following elements. However, what is displayed should match the overall content of the chart pattern that it will navigate [...]
Category: UI Components
Type: -

Chart Content Table View Cell

The chart content table view cell is a full-width view that provides a visual representation of one or more datasets. While it is visually similar to the chart pattern, there are two major differences: 1) The chart content table view cell is placed within the content area of a screen, whereas the chart pattern is [...]
Category: UI Components
Type: -

Chart Header

The Header Chart displays simple chart data inside an object header. It gives at-a-glance information about the object it is connected to, and it is supported in both compact and regular widths. This chart type can be used only in the Object Header. Usage Do Use the header chart when simple data, such as a trend, is [...]
Category: UI Components
Type: -

Chart Overview

A chart is a visual representation of data. SAP Fiori for iOS supports eleven types of charts. Depending on the type of data in your app and how the users will use the chart, it is important to select the correct chart type. Also, from a non-interactive thumbnail view to a fully interactive floorplan, charts are [...]
Category: UI Components
Type: -

Chart Types

SAP Fiori for iOS supports eleven chart types: bar, column, stacked column, line, combo (column + line), waterfall, scatter, bubble, area, stock, and donut charts. Depending on the type of data in your app and how users will use the chart, it is important to select a chart type that will best meet users’ needs. [...]
Category: Patterns
Type: -

Collection View

The collection view is a container that displays items in a grid. It previews a sample of content by presenting it in a highly visual layout and should not be used to display only text. Therefore, a collection view container should be populated with content that contains images, to provide a more visual viewing experience. Collection views are [...]
Category: UI Components
Type: -

Collection View Cell

The collection view cell is an object within the collection view. It displays content with images to provide a more visual viewing experience. For guidance on how a collection view cell can be used within the collection view, see Collection View. Structure A collection view cell consists of a mix of image views (A.) and [...]
Category: UI Components
Type: -

Colors

Color plays a significant role in SAP Fiori for iOS apps. It communicates the importance of and associations between content and provides users direction to help them complete their tasks. Color Palette Color schemes have been chosen for SAP Fiori for iOS to bring on-screen content to the fore. Please review the light and dark color [...]
Category: Foundation
Type: -

Consent Forms

The Consent Form pattern is generally used in onboarding scenarios. It gives another party (the application in this case) a digital record of the user's understanding and permission of the terms of an event, activity, or service that will be performed by the application. Structure A. Navigation Bar The Navigation Bar contains the consent form [...]
Category: Patterns
Type: -

Contact Cell

The contact cell is a table view cell which fits inside the table view container. It is used to give quick access to the various methods of communicating with a contact. It is commonly found in an object and object details floorplan. Structure A. Detail Image A detail image or avatar can be used on the [...]
Category: UI Components
Type: -

Create & Edit

The create and edit pattern is used to generate or update objects and is presented to the user via a modal. It is typically triggered by the create or edit actions on the navigation bar. The pattern may include a variety of combination of form cells to allow users to input information related to the [...]
Category: Patterns
Type: -

Data Table

A data table is a range of labeled columns and rows used to present numbers, text, or even images. Generally, data tables are a grid layout of columns and rows. Data tables are available on both compact and regular screen sizes. On compact screen sizes, a horizontal scrollable data table with a sticky header is [...]
Category: UI Components
Type: -

Design Led Development Process

No image available
A Binding Development Process The Design Led Development Process (DLD) helps to ensure projects provide a great user experience. The process has three main phases – Discover, Design, and Develop – each of which ends with a D-Gate (Design Gate) that must be passed before the next phase can start. For more details on the standard DLD [...]
Category: Resources
Type: -

Error Handling

Errors are used to communicate to the user that something did not go the way it was intended to in the app. An error could occur either at the app level or at the user level. It's important to present the appropriate type of error message and when possible, provide instructions to help the user [...]
Category: Patterns
Type: -

Feedback

Feedback provides users with timely responses to actions and information on the state or condition of the content. There are primarily two types of classification: system feedback and user-triggered feedback. System feedback include the network activity indicator and the loading indicator, and as the name suggests, these are both system-generated. User-triggered feedback includes the progress indicator, processing indicator, and toast message, each of which provides [...]
Category: Patterns
Type: -

Filter Feedback Bar

Filter feedback bar is a horizontal bar that appears above a list of content. It uses interactive buttons to communicate which filters have been applied to the list, and allows users to quickly apply frequently-used filters. It is typically used in List Report or Work List floorplans. Usage Do Do’s Use filter feedback bar when [...]
Category: Patterns
Type: -

Filter Form Cell

Filter Form Cell is used to filter one or more values under a filter category. It is commonly used in the filter pattern for sorting and grouping. Avoid using a filter form cell if the text is too long or if the number of values is more than 8. Use the list picker control for easier [...]
Category: UI Components
Type: -

Form Cell with Buttons

The Form Cell with Buttons component allows the user to quickly select from a small set of values. It is typically used in the create and edit pattern, or occasionally in the filter pattern. If the value label is too long, it is recommended to use List Picker instead. Usage Do Use Form Cell with [...]
Category: UI Components
Type: -

Hierarchy

The hierarchy pattern is a combination of the hierarchy view and a list report.  A combination of these views allows for a wider range of functionality in different kinds of workflows. For example, the hierarchy pattern can be utilized in a create use case. Structure List Report A list report within the hierarchy pattern has [...]
Category: Patterns
Type: -

Hierarchy View

The hierarchy view presents hierarchical data in a way that shows the relationship between parent and child objects. It serves as an entry point for a user to see where an object lives in a larger hierarchical structure. For single level data sets, it is recommended to use a list report. To learn more, see [...]
Category: UI Components
Type: -

Iconography

Iconography is essential to creating a cohesive and enjoyable app experience. Icons play a crucial role in communicating actions, information, feedback, and navigation. By providing a comprehensive icon library, our goal is to enhance the accessibility and overall ease of use of our customers’ apps. The SAP Fiori for iOS Design System makes use of Apple's SF [...]
Category: Foundation
Type: -

Inline Errors

Inline validation provides error feedback in response to user's data input in a Create or Edit form of a business object. The errors maybe critical in which case, the user should not be allowed to proceed until fixed or it maybe informative still allowing the user to complete editing. The error should be placed under the [...]
Category: UI Components
Type: -

Key Value Cell

The key value cell is a table view cell which fits inside the table view container. It is ideal for displaying sets of data that also need to display their labels for context. Structure The structure of this cell type is simple. There is a key label at the top and a value below. Key [...]
Category: UI Components
Type: -

KPI Header

The KPI header displays numerical data the user needs to keep track of during the day. It is typically used in an overview pattern to provide the user with contextual information.   Structure The KPI header is a container that includes multiple KPIs that are important to the user. There are several different ways to [...]
Category: UI Components
Type: -

KPIs

Key performance indicators (KPIs) are measurable values that are used to evaluate the success of an organization, an individual, a group, or a particular activity. KPIs are also used to highlight the current value of an object or as a summary of the object. KPIs can be used in a header, in the content area [...]
Category: UI Components
Type: -

List Picker

A list picker allows for the selection of one or more options among values within a defined category. Use a list picker when there are more than 8 values to select from within a single category or when the size and nature of the available options are dynamic and unpredictable. Structure A list picker includes: [...]
Category: UI Components
Type: -

List Report

The list report displays a large list of items of the same object type and allows users to take actions on them. This page type provides the functions of searching, sorting, filtering, and grouping the data in the large list. Use the list report when there is a large list of items and the data [...]
Category: Patterns
Type: -

Map

The map component is designed to display different business objects in the context of where it they are located as well as give a visual indication of what type the object is (point, polyline or polygon). It can also be used to show points of interest, optimized routing based on business criteria, and other quantitative [...]
Category: UI Components
Type: -

Modals

A modal is used for completing a task, updating content, or selecting filters. It helps the user to focus on the current task by providing relevant properties. The create pattern and filter pattern is generally presented in modals.  A modal typically slides up from the bottom of the screen and will remain open until the user [...]
Category: Foundation
Type: -

Multi-user Onboarding

The multi-user onboarding pattern is used to address onboarding scenarios where more than one users may share a device. Users are able to select from a list of existing accounts on the device to login with or add a new account.  Multi-user onboarding pattern is an extension of, or additional module to, the general onboarding [...]
Category: Patterns
Type: -

Navigation

A proper navigation style offers a fast and clear path for users to finish their tasks. When designing an app, the first step should always be to evaluate the content structure of the app, and to then select the navigation style that will provide the clearest and most efficient user experience. Hierarchical Navigation Hierarchical navigation [...]
Category: Foundation
Type: -

Object

The object pattern (object page) is a collection of attributes surrounding one particular business object. It includes a header area, a content area, and an optional action area. In most cases, users can drill down into specific attributes within the object page. Structure Navigational Structure The object pattern is often used in the middle of a workflow to show a [...]
Category: Patterns
Type: -

Object Card

The object card gives a preview of an object. It is highly customizable so as to accommodate a wide variety of uses and work best when used in a collection view with clear distinctions between groups.  Structure A. Icon Stack A set of up to 3 vertically stacked icons can be displayed on the far left. [...]
Category: UI Components
Type: -

Object Cell

The object cell is a table view cell that fits inside the table view container. It is highly customizable so as to accommodate a wide variety of uses. Usage Object Cell is intended to be used to preview information about an object and can be tapped to navigate to a full view of that object’s information, [...]
Category: UI Components
Type: -

Object Header

The object header provides a quick view of the most important or most frequently-used information about one instance of an object. It connects to the iOS status bar and the navigation bar via a seamless background, and is visually separated from the content area below. Because the object header provides the first glimpse of the object [...]
Category: UI Components
Type: -

Object Header (new draft)

The object header provides a quick view of the most important or most frequently-used information about one instance of an object. It connects to the iOS status bar and the navigation bar via a seamless background, and is visually separated from the content area below. Because the object header provides the first glimpse of the object [...]
Category: UI Components
Type: -

OCR Scanner

The OCR scanner is used as an alternative way of input when the user is completing a form. The scanner recognizes and picks up specific text from an object or document, and enter it into the form for the user.   Structure The OCR Scanner comes within a full-screen modal that includes a navigation bar, [...]
Category: UI Components
Type: -

Offline

Mobile applications do not always have the network connectivity needed to access real-time data. To accommodate fo this, provide an offline solution with your applications which will enable your user to complete their job regardless of network connectivity. As best practice, an offline-enabled Fiori application should be syncing data with the server regularly. The task [...]
Category: Patterns
Type: -

Overview

The overview page type is a hub that provides previews of larger bodies of information sourced from different parts of the app. It contains details important to the user and provides quick access to items relevant to the user’s tasks. Use the overview page if you want to highlight information that matters to the user. [...]
Category: Patterns
Type: -

Pickers

A picker is used for selecting a single value by scrolling through a short list of predictable values. It’s commonly used for selecting dates, time, or the combination of both. Structure A picker includes the elements below: A. Table cell The table cell displays a label and a selected value. The selected value will be [...]
Category: UI Components
Type: -

Preview Table View

Preview Table Views are used to display a preview of a list and are populated with Table View Cells, which include Object Cells and Contact Cells. Multiple Preview Table Views can be stacked in a single-screen layout to provide quick access to different information. They are commonly found in the Overview and Object screens. Usage Don't The lists displayed [...]
Category: Patterns
Type: -

Profile & Settings

Profile is a modal view which is a container that holds various user and app specific settings and allows the user to customize their app experience. Structure Navigational Structure Flat Navigation For apps that use flat navigation, the user profile is generally accessible on the main screen of each content category, with a touch target placed in the upper-left corner of [...]
Category: Patterns
Type: -

Profile Header

The profile header helps the user recognize and learn more about a person. It may also allow the user to quickly contact that person without needing to drill down into his/her contact details. It is usually used in an object pattern or profile and settings screen.   Usage Do Use in an object pattern or [...]
Category: UI Components
Type: -

QR Code Scanner

The Welcome Screen with Scan uses a QR code scanner as another way to onboard. Before starting the activation process, the user must be provided with a QR code to scan. Users can scan a QR code by using a camera or by scanning via images saved on their phone camera roll/gallery. Structure A. Modal Stack The [...]
Category: Patterns
Type: -

Rating Control

The rating control is used to indicate an average rating for an object. It also allows for users to set their own rating on a numeric scale from 1 (lowest) to 5 (highest). Variations The rating control has two distinct types: Display: shows the rating in a small read only format. It is designed to [...]
Category: UI Components
Type: -

SAP Fiori Design Principles

No image available
SAP Fiori provides a consistent and holistic user experience for SAP software. By creating visually pleasing designs with a strong focus on ease of use, the experience is intuitive and simple, across all devices. With effortless interaction patterns, the SAP Fiori UX is designed for a powerful impact across your enterprise.   Design Principles The [...]
Category: Foundation
Type: -

Search

The search pattern is used to locate information or objects within a large collection of values. There are two types of search: global and local. A global search is used to search universally through the contents of an app. A local search is a subset of global search and is used to find information within a specific list.   Global [...]
Category: Patterns
Type: -

Search Bar

The search bar is used to locate objects within a large collection of items. It is usually used in a list report pattern or list picker to allow the user to quickly navigate to an object.  Structure The search bar is composed of the following elements: A. Prompt Text Prompt text is included to provide context [...]
Category: UI Components
Type: -

Search to Select

Search to select is a control used to search and select multiple items from a large collection of values.  Usage Do Use the search to select control to choose one or more items from a set. Don't Don't use the local search component to find and select multiple values. Structure A. Search Field The search [...]
Category: UI Components
Type: -

Sibling Navigation

In the apps that designed with hierarchical navigation, the Sibling navigation pattern can help users easily navigate in the sequence of child objects.   Usage Do Use when you have a sequence of objects, such as instructional steps, work orders, or hardware components list. Don't Don’t use to replace hierarchical navigation. Sibling navigation, as its name suggests, [...]
Category: Patterns
Type: -

Signature Capture

No image available
The signature capture allows users to input their signature by signing on the screen. The signature is captured and saved in the backend with a watermark.  Usage Signature Capture is intended for users to authorize workflows when they sign while using this feature. Some use cases include signing forms or documents, approving an order, confirming [...]
Category: UI Components
Type: -

Single-user Onboarding

In enterprise, onboarding is the process of activating an existing user account and getting the user up and running with the app. Existing user accounts are typically assigned by an admin or the IT department. The onboarding process can vary depending on the configuration of the app by the admin or the IT department in [...]
Category: Patterns
Type: -

Slider

Sliders display a continuous range of values along a track. The minimum and maximum values are established and the user may use the thumb to select a single value between the minimum and maximum values. They are typically found in create and filter modals. A slider control can be used when selecting a precise value [...]
Category: UI Components
Type: -

Sort & Filter

The filter pattern allows users to narrow down results from a long list by setting some criteria. Users are able to reset the filter to go back to the complete list of results. Sorting and grouping are also integrated as part of the filter pattern. Structure The filter pattern is made up of reusable and [...]
Category: Patterns
Type: -

Stencils

No image available
These downloadable sketch files contain SAP Fiori for iOS UI components for compact width as well as regular width. UI elements like bars, controls, views and some examples of patterns are also included. Download the San Francisco fonts here. Download SF Symbols here.   What's New in V5.1 Regular New components, Signature Form Capture and What's New, [...]
Category: Resources
Type: -

Stencils 6.0

No image available
These downloadable sketch files contain SAP Fiori for iOS UI components for compact width as well as regular width. UI elements like bars, controls, views and some examples of patterns are also included. Download the San Francisco fonts here. Download SF Symbols here.   What's New in V6.0 Design Library (Beta version) New design library containing all [...]
Category: Resources
Type: -

Switches

The switch control is used to toggle two mutually exclusive states, on and off. Switches are used to control the availability of related UI elements on the current screen and must always be used in a table cell. Variations Switch without further selection The label in the cell to describe what the toggle is for. [...]
Category: UI Components
Type: -

Text Input

Text input controls are used to request a text entry from the user. They are usually found in the create or edit pattern. Structure To indicate that a text field is required, an asterisk should be included next to the label. On the top of the form, a line should mention that asterisks indicate required [...]
Category: UI Components
Type: -

Time and Date Formats

There are many different time and date format conventions, with no “right” approach for all situations. Conventions also vary widely around the world, and it would be counterproductive to formalize a single, unified approach to representing time and date across Fiori for iOS. That said, there are best practices to consider. Instead of a list [...]
Category: Patterns
Type: -

Timeline

The Timeline displays a list of items (objects, events, or posts) in chronological order. The information on the timeline view are presented as tappable cells, and are focused on the most important information about the object. The timeline view can be filtered or searched. Structure The Timeline contains a chronological axis, with timestamps on the left and object [...]
Category: UI Components
Type: -

Timeline Preview

The timeline preview cell provides the user with a glimpse of upcoming objects, events, or posts using a horizontal timeline sorted by chronological order. The objects in the timeline preview cell are read-only and tapping on a cell navigates the user to the full timeline view. Structure A. Cell Header Provide a meaningful title to the timeline cell. B. Object [...]
Category: UI Components
Type: -

Typography

The default font for iOS is San Francisco (SF). San Francisco has two variants: SF Pro Display and SF Pro Text. SF Pro Display is used for font size 20 pts or above whereas SF Pro Text is used for font size 19 pts and below. Font color variants used in Fiori for iOS cover both Light and [...]
Category: Foundation
Type: -

What’s New

The what's new component shows users the updates to your application. It can also be used for announcing the news, bug fixes, etc. Usage Users can use the what's new component to view updates to your application in two ways. Popup Modal: The component can be shown as a pop-up modal after the user logs [...]
Category: Patterns
Type: -
© 2021 SAP SE. All rights reserved.
  • Privacy
  • Legal Disclosure
  • Copyright
  • Terms of Use
  • Go.SAP.com
  • SAP Community Network