Explore SAP Fiori for iOS | SAP Fiori for iOS Design Guidelines

Accessibility

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

Category: Foundation

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

Animation

The SAP Fiori for iOS apps use four different types of transitions: 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 typically used for a drill down navigation. Push [...]

Category: Foundation

AR Annotations

AR Annotations components are designed for exploring objects in a facility. They can be used to explore a warehouse, machinery, or a business object to enhance the user experience by leveraging augmented reality. Examples of a scan screen (left), pulsing marker (middle) and selected marker (right) Anatomy AR Scanner To view annotations in the world [...]

Category: Patterns

AR Cards

The AR card displays key information of a marker annotation with a thumbnail image, icon or app of an object. Users can tap on it to navigate to the full-screen view of the card and users can also swipe between the cards. AR card with image preview (left) and AR card with icon (right) Anatomy [...]

Category: UI Components

AR Markers

AR Markers represent an object in the world view. After an AR marker is selected an AR Card appears at the bottom that displays relevant information about that marker. Unselected AR markers (left) and a selected AR marker with AR card (right) Anatomy AR Markers appear in the world view and consist of 3 elements: [...]

Category: UI Components

AR Scanner

The AR Scanner allows users to initiate augmented reality experiences (such as AR Annotations) after locating a preset image anchor to be matched. Examples of a coaching view (left), scanning view (middle) and matched scan view (right) Structure Coaching View The coaching view is an overlay on top of the camera view ( or 'world view' [...]

Category: Patterns

Attachment Form Cell

An 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. Attachment grid on iPhone (left) and on iPad (right) Usage Do [...]

Category: UI Components

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

Banners

Thumbnail of Banner component

A banner is a notification that appears on the screen to inform the user about a certain event or a change in system status. It contains a short notification text and optionally a button to allow the user to take a recommended action Banner examples: an error, an offline, and a syncing banner Usage Use [...]

Category: UI Components

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. Barcode scanner examples Anatomy The barcode scanner comes in a full-screen modal that includes a navigation bar, scan window, [...]

Category: UI Components

Basic Authentication

The Basic Authentication pattern is used for general authentication purposes. Basic authentication examples Anatomy 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 [...]

Category: Patterns

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. Biometric authentication examples Anatomy A. Navigation Bar The Navigation Bar contains the title and 'Cancel' action depending on the usage. [...]

Category: Patterns

Button Form Cell

A button form cell represents an action that can be taken in a view. Button form cell on iPhone (left) and on iPad (right) Usage DoDo's for Button Form Cell Use a button form cell to represent an action within a current view. Don'tDon'ts for Button Form Cell Do not use a button form cell [...]

Category: UI Components

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. Examples of a standard button (left), toggle buttons (middle) and a directions button (right) Anatomy A button consists of a center-aligned label contained within a filled or outlined [...]

Category: UI Components

Calendar

The Calendar View provides a visual overview of a week, a month, or multiple months. Example of calendar views on iPhone (left) and iPad (right) Usage Do 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 [...]

Category: UI Components

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. Chart card in compact and regular Anatomy Basic Structure Chart cards can include variations of the following elements. However, what is displayed should match the overall content of the [...]

Category: UI Components

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

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. Chart header compact width (left) and regular width (right) Usage Do Use the header [...]

Category: UI Components

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

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

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

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. Different collection view cell examples Anatomy A collection view cell consists of a mix [...]

Category: UI Components

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. Core Palette By introducing a new color palette, we are bringing our brand and products together to achieve a cohesive experience across all touchpoints with the [...]

Category: Foundation

Consent Forms

The Consent Form pattern is generally used in onboarding scenarios. It stores 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. Consent form in compact width (left) and regular width (right) Anatomy A: Navigation Bar The Navigation Bar contains [...]

Category: Patterns

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. Compact contact cell (left) and regular contact cell (right) Anatomy Anatomy of a contact [...]

Category: UI Components

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

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. The horizontal scrollable data table with a sticky header and column is available in both compact and regular screen sizes. Alternatively, the data table will [...]

Category: UI Components

Dimension Selector

A dimension selector is a horizontal bar divided into two or more mutually exclusive buttons. The dimension selector allows users to choose between several different measures of content, which generally is used for chart and view switching. Usage Do Ensure the dimensions of the selector are related to each other. Use a dimension selector to switch [...]

Category: UI Components

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

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

Filter Feedback Bar

The 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 [...]

Category: UI Components

Filter Form Cell

A 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 a list picker control [...]

Category: UI Components

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. Workflows using the hierarchy pattern Anatomy List Report A list report [...]

Category: Patterns

Hierarchy View

The Hierarchy view 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 instead of a Hierarchy view. To learn more, see List Report. [...]

Category: UI Components

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

In-line Signature Form Cell

In-line Signature Form Cell Thumbnail

The In-line Signature Form Cell is a form cell that allows users to enter their signature into a form to verify identity and express intent of acceptance. The difference between this component and Signature Capture is that this component's interaction and behaviors are integrated into the form, allowing the users to review content during the [...]

Category: UI Components

Info View

The Info View pattern is generally used in onboarding scenarios. It provides the application with the ability to show customizable information in a transitionary state that locks regular navigation methods. This pattern is closely related to the What's New component as well as the Feedback Screens (used in Multi-user Onboarding Pattern) Info View on iPhone [...]

Category: Patterns

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

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. Key value examples on iPhone (right) and iPad (left) Anatomy The structure of this cell type is simple. There is a key [...]

Category: UI Components

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. KPI header on iPhone (left) and on iPad (right) Anatomy The KPI header is a container that includes multiple KPIs that are important [...]

Category: UI Components

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

List Picker Form Cell

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. iPhone (right) and iPad (right) [...]

Category: UI Components

List Report

A 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 a list report when there is a large list of items and the data [...]

Category: Patterns

Map

Map Thumbnail

The Map component is designed to display the location of business objects and give a visual indication of the object type (point, polyline or polygon). It can also be used to show points of interest, optimized routing based on business criteria, and other quantitative location-based data. Example of the Map view on iPhone (left) and [...]

Category: UI Components

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

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

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

Navigation Bar

Navigation Bar Thumbnail

The navigation bar is an integral part of the screen that indicates the position of the user within the app and contains the page-level control actions. Examples of a navigation bar on iPhone (left) and iPad (right) Usage Use a navigation bar to represent the navigation hierarchy of the current page to the user. The [...]

Category: UI Components

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. Object Card variation examples Anatomy Object card anatomy A. Icon Stack (optional) A set of up to 3 vertically [...]

Category: UI Components

Object Card View

A newer version of the object card, the object card view is a flexible visual container that holds and groups information together. Much like the object card, it is highly customizable so as to accommodate a wide variety of uses and works best when used in a collection view with clear distinctions between groups or [...]

Category: UI Components

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. Object cell examples 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 [...]

Category: UI Components

Object Details

The object details 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 details. Object details in compact width (left) and regular width (right) Anatomy Navigational Structure The [...]

Category: Patterns

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

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. OCR scanner examples Anatomy The OCR Scanner comes within a full-screen modal that includes [...]

Category: UI Components

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

Order Picker Form Cell

Order Picker Form Cell is used for the purpose of sorting with multiple criteria where the sort order direction and the sequence of criteria matter. Example of order picker form cells on iPhone (left) and iPad (right) Anatomy A: Order Picker Header The header contains a form label. B: Criterion Cell (higher priority) The cell [...]

Category: UI Components

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

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. Time picker Anatomy A picker includes the elements below: A. Table cell The table cell displays a label and a selected value. The selected value [...]

Category: UI Components

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. Preview table view in compact [...]

Category: Patterns

Profile and Settings

The Profile is a modal view in form of a container that holds various user and app specific settings and allows the user to customize their app experience. Anatomy 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 [...]

Category: Patterns

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. Profile header on iPhone (left) and on iPad (right) [...]

Category: UI Components

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. QR code scanner examples Anatomy [...]

Category: Patterns

Rating Control

Rating Control Thumbnail

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). Rating controls on iPhone (left) and iPad (right) Behavior and Interaction When the user is able to set a rating, the larger [...]

Category: UI Components

Rich Text Document

Text-heavy documents, such as end-user licensing agreements (EULA), privacy policies, or terms and conditions are displayed in apps using HTML or other forms of view. To ensure that the content of these rich text documents looks consistent across SAP iOS applications and can be understood by everyone, follow the style and accessibility guidelines below. Document Style [...]

Category: Patterns

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 search [...]

Category: Patterns

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. Search bar on iPhone (left) and on iPad (right) Anatomy The search bar is composed of the following elements: A. [...]

Category: UI Components

Search to Select

Search to select is a control used to search and select multiple items from a large collection of values. Search to Select on iPhone (left) and on iPad (right) Usage Search to Select do'sDo Use the search to select control to choose one or more items from a set. Search to Select don'tsDon't Don't use [...]

Category: UI Components

Segmented Control

A segmented control is a horizontal bar divided into two or more mutually exclusive buttons. This control provides users easy access to specific categories of content. iPhone (left) and iPad (right) Usage Do Ensure the control's segments are related to each other. Use a segmented control to switch between views. In the Campus app, for [...]

Category: UI Components

Segmented Control Form Cell

A segmented control form cell 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 a list picker instead. iPhone (left) and iPad modal (right) [...]

Category: UI Components

Sibling Navigation

In apps designed with hierarchical navigation, the sibling navigation pattern can help users to easily navigate between child objects. Sibling navigation in compact width (left) and regular width (right) Usage Do Use when you have a sequence of objects, such as instructional steps, work orders, or hardware components lists. Don't Don’t use it to [...]

Category: Patterns

Sidebar

A sidebar provides app-level navigation and quick access to users' favorite or pinned contents. The sidebar is useful if you expect a user to switch between app-level destinations frequently. Example of a sidebar on iPad Anatomy The primary column contains the sidebar. The sidebar contains a header, a list, a footer, and a vertical divider. A: [...]

Category: Patterns

Signature Capture

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. Example of signature capture components on iPhone (left) and iPad (right) Usage Signature Capture is intended for users to authorize workflows when they sign while using this feature. Some [...]

Category: UI Components

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

Slider Form Cell

A slider form cell displays a continuous range of values along a track. The minimum and maximum values are established and a user uses their thumb to slide the handle along the track in order to select a single value between the minimum and maximum values. A slider form cell is typically found in create [...]

Category: UI Components

Sort & Filter

The sort and filter pattern allows users to narrow down results from a long list by setting criteria. Users are able to reset filters and go back to the initial list. Grouping is also integrated as part of the sort and filter pattern. Sort and filter pattern Anatomy The sort and filter pattern is made [...]

Category: Patterns

Switch Form Cell

A switch form cell is used to toggle two mutually exclusive states: on and off. It is used to control the availability of related UI elements on the current screen and should always be used in a table cell. Switch control toggled off (left) and on (right) Behavior and Interaction To change the state of [...]

Category: UI Components

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. Text input on iPhone (left) and on iPad (right) Anatomy To indicate that a text field is required, an asterisk should be included next to the label. On the top of the [...]

Category: UI Components

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

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. Timeline view on iPad Anatomy The Timeline contains a chronological axis, with [...]

Category: UI Components

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. Example of a timeline preview view on iPhone (left) and iPad (right) Anatomy A. [...]

Category: UI Components

Typography

We are introducing SAP 72 as our new primary font for Fiori for iOS. These new font styles are mapped one to one with SF font styles, allowing a smooth transition to the new font, co-existence with SF fonts when using SF Symbols, and preserve accessibilities. Current available font styles for 72 Dynamic Type SAP [...]

Category: Foundation

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. What's new component in compact and regular 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 [...]

Category: Patterns

Widgets

Apple widgets display key information in a glanceable format on user's iPhones. Widgets on iPhone Usage Along with Apple Widget Guidelines here's are some of the SAP SDK recommended guidelines. Do Limit to using SAP icons and SDK components, the widget should look consistent with the app. For legibility, consider displaying widget content with a 16pt [...]

Category: Patterns

We'd appreciate your feedback!

Processing your feedback

Your feedback has been sent to the SAP Fiori design team.

Thank you for your helping us to improve our guidelines!

We'd appreciate your feedback!

Please fill out the form to send us your feedback.

This topic was helpful
This topic was not helpful
- Can you tell us why?
- The information I need is missing
- The content is unclear / hard to follow
- The content is incorrect / out of date
- Other

Include screenshot

Your feedback is anonymous, so you won't receive a reply. If you'd like help with a specific question, please visit the SAP Fiori Community