Sorting and filtering are two ways of refining the results from a long list of objects. These two features help users navigate through a big amount of data and find the specific data they want to focus on easier.

Typically, a full-screen dialog on compact or a modal dialog for medium and expanded screens is used to display all filter controls. Sorting and filtering are integrated when both features are available. Users can tap on “Reset” to go back to the complete list of results in default order.

Usage

Use a filter when there is a long list of data with several properties and users want to see part of the list by narrowing down the properties.

Don’t use a filter when the list of data has just one type of property.

Anatomy

On compact screens, a full-screen dialog is used to display the sort and filter pattern.

On medium and expanded screens, such as tablets, a modal dialog is used instead of a full-screen dialog.

The sort and filter dialog is made up of reusable and modular sections. Each section consists of different types of controls or form cells.

A. App Bar

The app bar contains a page title and actions related to the page. In a filter dialog, the page title is usually a filter or sort and filter. The “Close” icon on the left closes the dialog without applying changes. By tapping on “Reset,” users can undo any changes made to the filter and restore the default setting of the selected filter or sort option.

B. Sort Section (Optional)

When a sort feature is available, it appears as the first section in the dialog. The sort by section is used for sorting the results by a certain logic. The default sorting method is preselected.

C. Filter Section

The filter section provides controls for users to set up filtering criteria. Types of controls include chips, selection controls, sliders, etc.

D. Footer Section

The footer area contains the “Show n Results” button. The n indicates the number of items with the selected filters applied.

E. Filter Feedback (Optional)

The filter feedback bar can be used to provide more context to the filtered results, and allow users to quickly modify the filter options on screen.

Behavior and Interaction

Sort and Filter

Sort

Sort allows users to view the results in the order they desire.

Filter

Filter allows users to narrow down the results according to certain criteria.

Trigger

The filter dialog is triggered by tapping on the filter icon on the app bar. Based on the priority of actions, if there is no space in the app bar, the filter can be placed in the “More” menu on mobile. On tablet, it should be visible from the app bar.

Actions

The filter dialog follows the standard full-screen dialog structure: a discard action on the left, and a confirmation action on the right.

Close Icon

The “Close” icon closes the dialog without having to commit. When nothing has been entered by the user, the dialog is closed directly. If there is unsaved input, a confirmation dialog pops up asking users to confirm their action.

“Show n Results” Button

The “Show n Results” button confirms the selections users have made and closes the dialog. The list is refreshed with the new filter settings.

Navigation

The navigation within the filter dialog is normally to drill down into a value list.

The title of the new screen should be consistent with the label in the filter cell. Replace the “Close” icon with the “Back” icon to navigate back. The drill down page has no “Apply” button, as all changes here are autosaved. If the search function is available, show the “Search” icon in the app bar.

Variations

Choice Chip Form Cell – Single Selection

The choice chip form cell is recommended for single selection sort. This allows users to prioritize the list by one criterion. A default value should be selected for sort.

Sort By Multiple Criteria

For more complex sorting needs, use the sort by multiple criteria control. It allows user to select multiple sorting criteria and set the order in which these criteria will be applied to a list. See sort by multiple criteria for more information.

Select

Chip Form Cell – Single or Multiple Selection

Use the chip form cell when users need to make selections from no more than eight pre-defined values. Use the choice chip form cell for a single selection. Use filter chip form cell for multiple selections. If the number of values is more than eight, or the text of the value is too long to display within the chips, use a list picker form cell instead.

List Picker Form Cell – Single or Multiple Selection

A list picker form cell is used when the values are long text or the number of values is more than eight under one filter category. It is also used when the number of values is dynamic or unpredictable. With a list picker form cell, the user is able to search and select the data entry.

The selection on a list can be either a single selection (use radio buttons) or a multiple selection (use checkboxes).

If a list is multi selection, the selections can be grouped in a selected grouping to enable users to deselect without having to scroll down a large list.

Switch Form Cell

Use a switch form cell when the property has only two mutually exclusive states: on and off.

Data Range

Slider Form Cell

A slider form cell enables the user to set the maximum value within a specified numerical range.

Time Picker Form Cell

A time picker form cell is used to select time based data.

A date picker is used to set a specific date or time. A time duration picker is used to set a duration.

Reset

The “Reset” button is nested in the top app bar that is located at the top of the dialog. The “Reset” button clears the applied filters and restores the default value of the selected sort option.

Filter Feedback

The filter feedback bar helps user understand the results of filter. Due to the complexity of the dataset or the number of values, it is recommended to give users feedback.

The filter feedback bar can be used to display the applied filter options and fast filters. This provides more detailed information. Refer to filter feedback bar to learn more about this component.

Resources

Development: SortAndFilterDialogFragment

SAP Fiori for iOS: Sort and Filter

The switch control mimics a physical switch that allows users to turn on/off individual settings, such as personalization or display settings. When users change a switch to “on”, they expect an instantaneous action as soon as the switch changes state.

Usage

• Use switches in a switch form cell only.
• Use switches to control the availability of related UI elements on the current screen.

• Don’t use switches for selecting states other than on and off.
• Don’t use switches without a form cell container.

Anatomy

A. Text Label

The text label describes the object this switch is controlling.

B. Helper Text

The helper text provides additional information about the form cell. 

C. Switch

The switch control is located on the right side of the cell.

Behavior and Interaction

States

Enabled State

Each switch form cell is one touch target. To change the state of a switch, the user can tap anywhere within the cell to toggle.

Disabled State

When a switch is disabled, apply 50% opacity to the whole cell. Disabled cells are not interactive.

Error State

Use an error message only when necessary. Don’t distract users with unimportant information. For page level feedback, use a snackbar instead. 

The error message should be concise. We recommend using one line of text for the error message. 

By default, there is no error message. When the error message is triggered, insert the message with padding below the label text before the divider line if used. The content under it will be pushed down. 

Adaptive Design

The full width of switch form cells adapts to different screen sizes. 

Resources

Development: FioriSwitch, SwitchFormCell

SAP Fiori for iOS: Switches

Material Design: Switches

A checkbox lets the user set a binary value on the option associated with the control. When the user taps the checkbox, it toggles between checked and unchecked. Checked means that the state described by the checkbox text applies, or that the item has been chosen. Within a group of checkboxes, each checkbox can be checked or unchecked. This allows users to select multiple options from one group.

Usage

• Use checkboxes for multi-select. Each option in the group can be selected independently of each other
• Use checkboxes when only one option can be selected or deselected, for example, to accept terms of use. Use it only if the meaning is obvious (single checkbox).
• Use checkboxes to display all available options directly to users.

• Don’t use checkboxes for single selection. Use radio buttons instead.
• Don’t use checkboxes if you want to offer two options for a “yes/no” or “on/off” type of decision. Use a switch control instead.

Anatomy

A. Property Name

A set of checkboxes is used to show all available values for a certain property. The property name should be displayed at the top. If the whole page is used to display available values, display the property name as the title in the app bar.

B. Checkbox Cell

A checkbox followed by a text value forms one checkbox cell. Each available option has its own cell. Display the checkbox cells in a meaningful sequence, for example, alphabetical sequence for names.

C. Cell Group

Checkbox cells can be grouped into categories. Each category has a header showing the name of the group.

Behavior and Interaction

The user taps a checkbox to toggle the state of the checkbox between checked and unchecked. Each checkbox cell is one touch target. When a specific option is disabled, apply 50% opacity to that checkbox cell. Disabled options are not interactive.

Resources

Development: CheckBox, MaterialCheckBox

Material Design: Checkboxes

A header is a section title that represents the content of the section. It is used to group content on a screen into reasonable sections, making it easier for users to consume the information. Headers should be brief and concise so that users can quickly identify what each content section is about.

Anatomy

A. Header

The section title represents the content of the section.

B. Button (Optional)

The button enables user to perform relevant actions to the section. The button can either be a text button or an icon button.

Variations

Section Header

A section header represents the content of a section. It uses a simple and short word or phrase to convey the purpose of the section.

Section Header with Button

A section header can contain an action button associated with the content of the section. The button can either be a text button or icon button, For example, the attachment header contains an “Add” button to allow users to add attachments. To learn more about that workflow, refer to the Attach article.

Resources

Development: SectionedRecyclerViewAdapter

SAP Fiori for iOS: Object Header, Chart Header, Profile Header, KPI Header

A slider is a control that enables the user to adjust single values within a specified numerical range.

Anatomy

Slider Control

A. Container

A slider control always stays in a container with reserved paddings to provide enough touch area for users to operate the slider.

B. Track

A slider controls has a track representing the selectable range. The part of track on the left side of the thumb is selected. The part of track on the right side of the thumb is unselected.

C. Thumb

Thumb indicates the selected value on the track. Users can drag the thumb along the track to adjust their selection.

Slider Form Cell

A. Property Name

Property name is a label text that identifies the purpose of the slider.

B. Selected Value

selected value is a text string that reflects the value being selected.

C. Slider

A slider is the control for users to select the value. By default, the minimum value is displayed at the left of the slider control, and maximum value on the right. This minimum and maximum value labels can be changed to icons or other labels that best represent the type of value this slider is controlling.

D. Helper Text

Provides additional information about the form cell. 

Variations

Depending on the use case, different content can be shown/hidden in a slider form cell.

Please choose the format that best serves the use case. Below are some examples.

Non-Editable Slider Form Cell 

When the label text and value text can fit in one row with at least 16dp horizontal padding in between, display them in one line to save vertical screen space. 

When the label text and value text can’t fit on the same line, the selected value is moved to the next line.

Editable Slider Form Cell 

This variation allows users to set the slider to an exact value by typing in addition to dragging the slider thumb. The selected value text becomes an input field at the right side of the slider control, replacing the maximum value. This variation is useful when users want to select a specific value. We recommend adding the minimum and maximum values to the slider label so that users know the exact range they can choose from.

Slider Form Cell with Icons 

In this use case, the actual value of selection is not important for users to see. Therefore, the value text can be removed. This is also an example of using icons instead of minimum and maximum value. 

Grouped Sliders

In general, each slider cell is stand-alone. Group sliders together only when all of them contribute to one attribute, for example, when red, green, and blue define one color. You can use an icon or short to label each row. Text labels should be as concise as possible. Within one group, use the row with the longest label or shortest slider as a reference and vertically align the other rows to it.

Behavior and Interaction

States

Error State

Use validation messages only if necessary, for example, to show error messages or direct feedback for this control. Do not distract users with unimportant information. For page level feedback, use a snackbar instead.

The validation message should be concise. One line of text is recommended for the validation message.

By default, there is no validation message. When the validation message is triggered, insert the message with padding below the 48dp slider control area before the divider line if used. The content under the slider form cell will be pushed down.

Adaptive Design

The full width of slider form cells adapts to different screen sizes.

Resources

Development: FioriSlider, SliderFormCell

SAP Fiori for iOS: Slider Form Cell

Material Design: Sliders

The key value cell is a table view cell that fits inside the table view container. It is ideal for displaying sets of data that also need to display their labels.

Usage

Use a key value cell to display a piece of information with its label.

• Don’t use the key value cell to display an image.
• Don’t use the key value cell to display text content that is not related to a property.

Anatomy

A. Key Label

This is the property name that identifies what the value is representing.

B. Value

Value is used to show the data for a property. This could be pre-defined values or input created by users. If there is a specific action associated with it, for example, phone number or email address, the value should be a button color.

C. Expand/Collapse Icon

When the value text exceeds six lines, it’s truncated at the end of the sixth line, and an expand icon shows up. Users can tap the expand icon to view the rest of the value text. When the cell is expanded, a collapse icon replaces the expand icon.

Variations

Key Value Cell – Plain Text 

Use this variant if the value is plain text within six lines.  

Key Value Cell – Collapse/Expand 

Key value cells have a maximum height of six lines of value text. If the content is more than six lines, it is truncated at the end of the sixth line and an expand icon appears on the top right corner of the cell. Users can tap to expand/collapse the cell to view all the text. 

Key Value Cell – Actionable Text 

In general, the key value cell is for display only. Tap to drill down is possible, though it depends on the context. If the value displayed has a specific action associated with it, for example, phone number or email address, tapping on the cell would trigger that action, for example, call that phone number or send an email to that address. 

Adaptive Design

Mobile

On mobile, always display the key value cell as one full-width column.

Tablet

On tablet, key value cells can be displayed as one or two columns. 

One-Column Layout

Two-Column Layout

Key value cells can be displayed in a two-column layout on tablet devices to take advantage of screen space. Only use the two-column layout when the cells in this group have relatively consistent height among all the rows. This layout is only recommended for a group of items with short value text. Avoid having expandable key value cells in a two-column layout.

Resources

Development: FioriKeyValueCell, KeyValueCell

SAP Fiori for iOS: Key Value Table View Cell

Usage

The search pattern is used to help users find information quickly within an app. Adding search suggestions provides them with past searches and search suggestions.

Behavior and Interaction

Search Suggestions

The create pattern presents users a form used to generate new objects and object details. It is typically triggered by “Create” or “Add” actions. The create pattern is presented in a full-screen dialog on mobile devices or modal dialog on tablets. In the dialog, users are able to input the information related to the object they are creating.

Anatomy

The create pattern follows the basic structure of a full-screen dialog. Based on object type and object detail, different types of data entry components are used. Hierarchy of data entry components should reflect the hierarchy of object detail.

A. App Bar

The app bar contains:

• Screen title specifies the object it’s creating.
• “Close” icon on the left to discard the new object without saving.
• “Save” button on the right to generate the new object based on information filled in this dialog.

B. Key Information

The data points that define the foundation of this new object are considered key information. This contains properties that help users to identify the object, such as the title of a new task. Usually, at least one of the key information is required for creating the object. The key information should be located at the top of the dialog so users can start with this first. In some cases, key information is pre-populated, and the user may or may not be able to edit these values. The type of information that appears in the key information section differs depending on the use case.

C. Property

Property details appear after the key information section to gather additional information for the object. In general, one form cell is used for one property. Cells can be grouped together based on the information hierarchy of the object. Choose the form cell that best serves the data type.

D. Accessory

The accessory area is at the bottom of the dialog. It includes elements such as notes and attachments.

Control Types

Text Input

Simple Property Form Cell

Simple property form cell is best for gathering freestyle text input value for a certain property. The value is expected to be relatively short and without line breaks.

Note Form Cell

Note form cell is best for gathering long freestyle text input, such as note or comment. Users can use line breaks as they want.

Select

Chip Form Cell – Single or Multiple Selection

Use a chip form cell when users need to make selections from no more than eight predefined values. Use a choice chip form cell for single selection. Use a filter chip form cell for multiple selection. If the number of values is more than eight, or the text of value is too long to display within chips, use a list picker form cell instead.

List Picker Form Cell– Single or Multiple Selection

A list picker form cell is used when the property has long values or more than eight possible values. It is also used when the number of values is dynamic or unpredictable. With a list picker form cell, the user is able to search and select the data entry.

The selection on a list can be either single selection (use radio buttons) or multiple selection (use checkboxes), based on the definition of the property.

If a list is multi selection, the selections can be grouped in a “Selected” grouping to enable users to deselect without having to scroll down a large list.

Switch Form Cell

Use a switch form cell when the property has only two mutually exclusive states—on and off.

Data Range

Slider Form Cell

A slider form cell enables the user to set the maximum value within a specified numerical range.

Time Picker Form Cell

A time picker form cell is used to select time based data.

A date picker is used to set a specific date or time. A time duration picker is used to set a duration.

Attachment

An attachment is usually located at the end of the create pattern so that this section can descend freely as the user attaches more files.

Behavior and Interaction

Trigger

The create pattern is triggered when users tap on an “Add” icon or create/add menu options. The trigger should state clearly what object it is going to create.

Actions

“Close” Icon

The “Close” icon closes the dialog without having to commit. When nothing has been entered by the user, the dialog is closed directly. If there is unsaved input, a confirmation dialog shows up asking users to confirm their action.

“Save” Button

The “Save” button creates the object based on user input. By default, display the newly created object’s detail page after save so that users can see their changes.

If there’s no individual detail page of the object being created, show the parent page after saving, for example, taking reading for an equipment. Ideally, scroll to the part where user’s new changes are reflected.

Navigation

The navigation within the create pattern is commonly used to drill down from a list picker form cell into a value list. The animation transition of the navigation should be a push to the next screen.

The app bar title in the new screen should be consistent with the label in the list picker form cell. Replace the “Close” icon with the “Back” icon to navigate back. There is no “Apply” button in the drill down page due to all changes being auto-saved. If the search function is available, use the expandable search and show the “Search” icon in the app bar.

Resources

SAP Fiori for iOS: Create & Edit

Search is used to find and access content globally within an app or locally within any given screen. There are two variations of search, persistent and expandable search. The variation used is determined by its prominence within the app.

Anatomy

Variations

The type of search is determined by how prominent search is within the app.

Resources

Development: FioriSearchView

SAP Fiori for iOS: Search Bar

Material Design: Search

Related Components/Patterns: Search (Pattern), List Picker

The attachment form cell is usually part of the create or editing work flow, located at the end of the form. All the attached files should be associated with a certain business object.

In general, users can only add/delete attachments in edit mode. After the changes have been saved, users can view the attached files in view mode, but can’t make any changes. This prevents users from accidentally making changes to attachments. It can also be used to give role-based access, as some users may not be allowed to edit.

Anatomy

Basic Anatomy

A. Header

The header is at the top of the attachment form cell and includes a label, a counter, and an icon or a text button.

B. Attachment Cells

The attachment cells display the attached files. Each item represents one attachment. Attachments can be displayed in a list or a multi-row grid view.

C. Footer (Optional)

The optional footer includes a “See All (n)” button, where n stands for the total number of items in the list. It should be placed below the attachment cells when the number of displayed items is set to a limited number.

Edit Mode

In edit mode, the attachment form cell consists of an attachment header and list of attached files.

Attachment Header

A. Text Label

The text label indicates the name of a section. Use “Attachments” as the default label. The label can be customized based on context. For example, in the process of creating an expense report, the attachment section can be labeled as “Receipts”.

B. Counter

The counter shows the number of attachments.

C. “Add” Button

The “Add” button triggers the workflow of adding an attachment when users tap on it.

Attachment List

The attachment list shows the basic information of each attached item. Each list item consists of:

A. Thumbnail

The thumbnail provides a preview image of the attached file when available; otherwise, display the icon for that file type.

B. File Name

A text string displays the file name with file type extension. The file name can wrap to two lines. If the name is longer than the allocated space, truncate it in the middle to keep the file type visible.

C. File Information (Optional)

The subheading can be used to display additional information, such as file size or description.

D. Attribute (Optional)

The attribute can be used to display short bits of information, such as a timestamp or file size.

E. “Delete” Icon

The “Delete” icon deletes the item immediately when it is tapped.

View Mode

In view mode, attachments can be displayed in list view or grid view.

Attachment Header

The attachment header in view mode has the same structure as in edit mode, except replacing the “Add” button with view switcher icons.

A. Text Label

The text label indicates the name of this section. Use “Attachments” as the default label. The label can be customized based on context. For example, in the process of creating an expense report, the attachment section can be labeled as “Receipts”.

B. Counter

The counter shows the number of attachments.

C. “View Switcher” Icon

The “View Switcher” icon allows users to switch between the two type of views. Use the “Grid View” icon when attachments are displayed in list view. Use the “List View” icon when attachments are displayed in grid view.

List View

In list view, each attached file is displayed as an object cell with:

A. Thumbnail

The thumbnail provides a preview image of the attached file when available; otherwise, display the icon for that file type.

B. File Name

A text string displays file name with file type extension. The file name can wrap to two lines. If the name is longer than the allocated space, we recommend truncating it in the middle to keep the file type visible. The full file name can be retrieved by tapping on the attachment cell that opens the file viewer or a detailed view depending on the app or user device.

C. File Information (Optional)

The subheading can be used to display additional information such as file size or description.

D. Attribute (Optional)

The attribute can be used to display short bits of information such as a timestamp or file size.

Grid View

In grid view, each attached file is displayed as an image cell:

A. Container

The attachment container defines the size and boundary of each cell and is scaling based on the screen size. All attachment items have the same width and height within an attachment form cell.

B. Thumbnail

Provides a preview image of the attached file when available; otherwise, display the icon for that file type.

C. File Name

The file name helps users identify the file. A text string displays the file name with file type extension. The file name can wrap to two lines, then truncates. The full file name can be retrieved by tapping on the attachment cell that opens the file viewer or a detailed view depending on the app or user device.

D. File Information (Optional)

The subheading can be used to display additional information such as file size or description. One line is allocated for the file information, after which the text truncates.

E. Attribute (Optional)

The attribute can be used to display short bits of information such as a timestamp or file size.

Behavior and Interaction

To add an attachment, users have to tap on the “Add” button.

On compact screens, this triggers a bottom sheet, listing out all the possible ways to add a file supported by this app.

On medium and expanded screens, a menu is used instead of bottom sheet.

Users select from the menu based on the location or type of file they want to add. The file selection process is powered by Android system’s default features. From here, users would be led to other apps, such as the camera app if they select “Take Photo”. The details of this process might differ based on device brand and system version.

After users confirm their selection, they are led back to the page where the add action was triggered. The newly added item is shown at the bottom of the list, and the number of attachments is updated.

The number of attachments that a user is allowed to upload can be limited. When reaching the upload limit, the “Add” button becomes disabled. We recommend displaying a message in the section header so that the user is aware of the limit.

Each cell has two touch targets: the “Delete” button, and outside the delete button. Users can directly delete one item by tapping the “Delete” button. To avoid accidental deletion of files, we recommend displaying an immediate confirmation dialog or snackbar after a user taps on the “Delete” button with an option to undo the action.

Users can view the file by tapping outside the “Delete” button. The preview of the file is not handled inside the SAP Fiori app. It is handled by the Android system. Apps that support this file type would be launched to view the file.

Should a user not have permissions to delete a file, the “Delete” icon can be disabled. In this case, we recommend letting users know why the delete functionality is not available.

When users have finished adding files and save the changes, the attachment section or the whole page switches to view mode. In general, there is a “Save” button for all objects in the edit/create workflow. In cases where the object is editable by default and changes are autosaved, the attachment component stays in editing mode all the time.

Based on the floorplan used in the app, the attachment list expands full-width within the content area.

Attachments are displayed in list view by default, users can use the grid view icon to switch to grid view. In certain contexts, the majority of attached files has preview images, such as attached photos, so consider making grid view the default view. No matter what the default view or what view the user is currently looking at, it becomes a list in edit mode.

Resources

Development: AttachmentFormCell

SAP Fiori for iOS: Attachments

The list picker form cell allows for the selection of one or more options among values within a defined category. It serves as the entry point to a list of available values for that category and summarizes the selected value.

Usage

• Use a list picker form cell when the size and nature of available options are unknown or dynamic, for example, data from a database.
• Use a list picker form cell when the available options have or can be displayed with a consistent structure, for example, text or object cells.
• Use an asterisk (*) next to the list picker form cell label to indicate that the input is required.

• Don’t use the list picker form cell for boolean options (e.g., true/false or yes/no), use the switch instead.
• Don’t use a list picker if the selection requires complex input, for example, entering text, manipulating sliders, or interacting with multiple elements simultaneously.

Anatomy

List Picker Form Cell

A. Label 

The label defines the topic or the name of the list. 

B. Selected Values 

This area shows an overview of the selected values. When it’s empty, the area could display prompt text. 

C. Helper Text (Optional) 

The helper text provides additional information about the selection, such as hints, requirements, etc. 

D. Chevron Button 

The chevron button indicates the tapping and drilling-down capability of the form cell. 

List Picker Selection View 

A. Value Lists

The value list displays a list of items within a specific category. Each value list contains a section header, an optional button, and list items. 

B. Section Header

The section header describes all values within the grouped list and gives users the ability to select or deselect all values at once. The title, button label, and button functionality can be customized based on users’ needs. 

C. “Close” Button 

The “Close” button discards the changes and quits the selection view. 

D. Reset & Search (Optional)

The search function helps the user quickly find a specific value from the list. The reset button can revert the selection to a default state. 

E. Anchor Button

The anchor button appears in the selection view during scrolling and floats over the value list. It can take users back to the top of the list. 

This feature is applicable to multi-select only. 

F. Prompt Text (Optional)

The prompt text is a short and brief instruction for users. 

G. “Apply” Button

The “Apply” button saves a user’s selection to the list picker form cell. It’s optional for the single-select list picker. 

Behavior and Interaction

Select and Apply

To select and apply values from a list, users can tap on the list picker form cell and drill down to the list picker selection view, where they can tap on values to select or deselect them.

• If the value list is long, users can scroll down and view more options in the expanded bottom sheet.
• To quickly review their selections, users can use the anchor button to go back to the top.

Once users have made their selections, they can save the changes by tapping the “Apply” button. The selected values are displayed in the list picker form cell, giving users an overview of their selection.

Discard Changes

Users may exit the selection view by tapping on the “Close” button. To prevent users from accidentally losing their changes, consider adding an additional confirmation dialog.

Please refer to List Picker Detailed User Flow to learn more about the existing options and behaviors.

Validation Message

Use a validation message only when necessary, such as to warn users that input fields must not be empty. Avoid providing users with irrelevant or unimportant information that may distract them. For page-level feedback, use a snackbar instead.
The validation message should be concise. We recommend using one line of text only.

Variations

Selection Type

The list of values can be either single-select (radio buttons) or multi-select (checkboxes).

Single Selection

To enable rapid selection, consider hiding the “Apply” button.

Multi-Selection

To display all selected values, consider enabling the “Selected Value” list.

Value Type

Text Value

Text value is a common type of data to be displayed in the list.

By default, the text is displayed on the right side of the selection control and can be wrapped in several lines.

Custom Contents

Users can insert self-defined contents such as the object cell and contact cells into a list picker item when additional information is needed to be shown. 

When displaying object cells in a list, make sure the layout is simple to make the checkbox / radio buttons prominent. 

Value List

In a list picker, there could be one or multiple value lists. The section header and button are customizable based on product needs. For multi-selection, there are two default value lists:  

• “Selected” Value List (Optional): The “Selected” value list summarizes the values that have been selected and appears at the top of the list. Users can deselect all values at once by tapping the “Deselect All” button.  
• “All” Value List: The “All” value list contains all available values inside the list picker. Users can select all values at once by tapping the “Select All” button. 

Selection View

There are two options a list picker selection view can be displayed. Depending on the size and nature of the value list, choose the option that best fits your app’s use case. If the value list is large, the half-screen view can be expanded to the full-screen view naturally while the user scrolls.

Half-Screen View (Default)

The half-screen view is a modal bottom sheet that occupies half of the screen height and overlays the background. It’s best used when the value list is expected to be short and simple, for example, such as when it contains only three to six values.

Full-Screen View

The full-screen view occupies the full screen height like a page. When the value list is expected to be long or unknown, choosing the full-screen view will help users to browse.

Adaptive Design

The selection view adapts to different screen sizes. On compact windows, the list picker selection view appears as a bottom sheet. On medium or expanded windows, the list picker selection view appears as a dialog. The other features remain the same on all window size classes. 

Resources

Development: List Picker, GenericListPickerFormCell

SAP Fiori for iOS: List Picker Form Cell

Object cells are made up of text, images, or icons. They can be configured in many ways to accommodate a wide variety of use cases.

Usage

Resources

Development: FioriObjectCell, ObjectCell, GridObjectCell, GridTableRow, ContactCell

SAP Fiori for iOS: Object Cell

Material Design: Lists

Related Components/Patterns: Checkbox, Radio Button, Card Cell

Text input controls are used to request a text entry from the user. They are usually found in the create or edit pattern.

Usage

• Use capital case for labels.
• Use an asterisk next to the label to indicate that the text input is required.
• Use sentence case for placeholder text, helper text, and error messages.
• Use note form cells for text input that requires more text input.
• An error message should tell the user clearly how to fix the error.

Don’t show both helper text and error text.

Anatomy

A. Label

Describes the intent of the text input form cell.

B. Input Area

Indicates tappable area where input values are displayed.

C. Helper Text

Provides additional information about the form cell.

If the cell is read-only, we recommend displaying “Read-only field” as hint text.

D. Right Accessory Icon (Optional)

In certain use cases, a barcode scanner may be used to populate the input field with information.

E. Character Counter (Optional)

Displays the number of input characters in real-time over the total character limit.

Variations

Simple Property Form Cell

A simple property form cell consists of a label (property key) and a text field (user input text). It is used for collecting short input. The label is required for the simple property form cell. It helps users to identify the purpose of the text entry.

Note Form Cell

Behavior and Interaction

States

Enabled State

An optional placeholder text can be used to display a correct input value when the field is empty. It explicitly shows the user the expected text entry. Don’t use placeholder text for instructions because it disappears once the user starts typing. Instead, use helper text for instructions.

An optional helper text can be used to provide additional instructions. Helper text should be short and precise. Avoid wrapping to two lines.

The default state of the note form cell has a taller text field compared to the simple property form cell. This encourages users to enter more input.

Error State

When the user-entered value does not pass validation, the simple property form cell enters an error state. An error icon appears, indicating that this cell has an error, and a message appears below the text input to provide instructions on how to fix the error. Do NOT display both helper text and an error message at the same time. Replace the helper text with the error message when the field is in an error state.

Active Typing State

When the user is actively typing, a clear icon appears at the right end of the text field. The user can tap the “Clear” icon to delete all input. Generally, simple property form cells are used to collect short user inputs.

For simple property form cells, the height of the field is fixed. The text overflows to the left if the user types more than one line.

The note form cell text field can display three lines of text. As the user keeps typing, the text field can expand to a maximum height of six lines of text. This prevents the note form cell from covering the whole screen. After reaching the maximum height, the cell stops expanding. The content would scroll vertically inside the text field area as the text continues to wrap to a new line.

Read-Only State

Read-only state indicates the current user role does not have the authorization to edit this field while the information in the field is relevant to fulfill the task. The text field changes to a gray background to hint this is non-interactive, with a helper text below saying “Read-only field”. The user can select and copy the existing value text, but cannot activate the text field.

When in read-only state, the text field can expand to exceed the maximum height so that the text value is visible without scrolling inside the text field. The user can select and copy the existing text entry, but can’t change the text in the field.

Disabled State

If a text input form cell is disabled, the input in this field (if any) does not affect the task of the user. The disabled cell has an opacity of 50% to reduce distraction.

Character Counter

Default – Allow user to continue typing over the character maximum

In use cases where a user can continue typing over the character limit, the component displays an error once the user’s input surpasses the limit. The real-time counter turns red and the helper text appears or changes to “Reduce the number of characters”. The error state persists until the user’s input is shortened to within the character limit.

Stop user from typing once the character maximum is met

In use cases where a user is restricted from typing over the character limit, the user’s input is automatically stopped once they reach the limit. The helper text appears or changes to “Character limit reached”.

Resources

Development: FioriSimpleTextField, FioriNoteTextField, SimplePropertyFormCell, NoteFormCell

SAP Fiori for iOS: Text Input Form Cell

Material Design: Text Fields

Benefits of Adaptive Layout

Adaptive design enables designers and developers to create versatile, user-friendly interfaces that seamlessly adapt to different screen sizes and devices. Optimizing large screen design for SAP’s business applications has a positive impact on the of mobile users. By utilizing larger screen space, numerous daily tasks can be performed more efficiently.

Streamlining Navigation and Control

Making menus and controls easily accessible next to the workspace and incorporating intuitive gesture-based navigation.

Improving Data Visualization and Analysis

Enhancing readability and interactivity of complex data sets, such as charts and spreadsheets, for quicker and more effective analysis.

Enhancing Data Entering and Form Filling

Providing extra space for on-screen keyboards and data entry fields to minimize scrolling, reduce errors, and expedite the process.

Facilitating Document Editing and Review

Simplifying editing with full-page views of texts, images, or presentations, facilitating side-by-side comparisons, and allowing for stylus support for precise input.

Resources

Material Design 3: Understanding Layout, Applying Layout 

Radio buttons provide users with a set of mutually exclusive options. They allow them to select only one option from two or more choices. Each option is represented by a radio button.

Usage

• Use radio buttons for single selection.
• Use radio buttons when at least two distinct choices are available.
• Use radio buttons to display all available options directly to users.

• Do not use radio buttons for multiple selection.
• Do not use radio buttons if the options are numbers with fixed steps, use a slider instead.
• Do not use a radio button when there are only two mutually exclusive options, instead, use a single checkbox or switch. For example, to accept terms of use, use a single checkbox for “I agree” instead of two radio buttons for “I agree” and “I don’t agree”.

Anatomy

A. Property Name

A set of radio buttons is used to show all available values for a certain property. The property name should be displayed at the top of the list. If the whole page is used to display available values, display the property name as the title in the app bar.

B. Radio Button Cell

A radio button followed by a text value forms one radio button cell. Each available option forms its own cell. Display the cells in a meaningful sequence, for example, in an alphabetical sequence for names.

C. Cell Group

Radio button cells can be grouped into categories. Each category has a header showing the name of the group.

Behavior and Interaction

The user taps a radio button cell to activate the related option. Each cell is one touch target. Tapping an activated option does not deactivate it but tapping a different option transfers activation to that option. Therefore, a user can select only one option from a group of radio button cells. When a specific option is disabled, apply 50% opacity to that radio button cell. Disabled options are not interactive.

Resources

Development: RadioButton, MaterialRadioButton

Material Design: Radio Buttons

Dialogs are a type of modal that are used to provide high priority information, display critical information, or ask for specific user action or decisions. It prompts the user to react and it interrupts the process of the application.

Usage

Anatomy

Alert Dialog

Full-Width Button Dialog

Simple Dialog

Confirmation Dialog

Full-Screen Dialog

Adaptive Design

Alert, Simple and Confirmation Dialog

Mobile

For mobile, the recommended dialog width is 280dp.

For dialogs that have a selection list, the maximum height for the list is set to six list cells. Since each list cell is 48dp in height, this means the maximum height for the list is 336dp. If it exceeds six items, the list area is scrollable to see the other options.

Tablet

For tablet, the dialog width depends on the content, but it needs to be a multiple of 56 with a maximum width of 560dp.

Full-Screen Dialog

Mobile

On mobile, the full-screen dialog covers the whole screen.

Tablet

On tablet, the modal is center aligned horizontally and vertically. The modal dialog does not have a set of width or height. Below are some recommended rules. You can adjust it based on your specific device or use case:

Height:

• The dialog height depends on the content height.
• We recommend a minimum modal dialog height of half the screen height in landscape mode.
• The maximum height of a dialog starts from 24dp from the top of the screen (right below status bar), to the bottom of the screen content area (above the bottom navigation bar).
• When content exceeds the maximum height, it scrolls vertically inside the dialog. The dialog may grow taller when the device is rotated from landscape to portrait mode to reveal more content.

Width:

• We recommend a dialog width of 512dp.
• Keep the dialog width the same on both landscape and portrait mode to reduce distracting transitions.
• The maximum width is 560dp.

By default, dialog height should be determined by the content in the initial screen (parent).

When navigating to the next screen inside the dialog, for example, drilling down to a list of checkbox cells from a list picker form cell, consider the following recommendations:

• If the child screen has less content than the parent screen, use the same dialog height as the parent screen to avoid disruptive transitions.
• If the child screen has more content than the parent screen, increase the screen height to accommodate more content (until it reaches the maximum height allowed by the device).

In summary, the child screen can be equal to or taller than the parent screen.

Variations

Alert Dialog

Full-Width Button Dialog

Simple Dialog

Confirmation Dialog

Full-Screen Dialog

Full-screen dialog covers the whole screen to maximize available screen space for relatively complicated tasks such as create. Use a full-screen dialog only on mobile devices. On tablet, where a lot more screen real estate is available, it becomes a modal dialog (do not cover the whole screen). There is one exception: use full-screen dialog instead of modal on tablet when editing an existing object. This is to prevent users from editing the copy of attributes that can be seen under the semi-transparent scrim.

Full-screen dialogs are the only dialogs that allow other dialogs to appear on top.

Resources

Development: AlertDialog, MaterialAlertDialogBuilder

SAP Fiori for iOS: Modals

Material Design: Dialogs

The profile header gives a quick intro of a person to the user. It also includes methods to contact that person quickly without needing to access a different area of the profile page.

Usage

Use the profile header on a user profile or an object detail page.

Do not include lengthy information. It should be a short summary for that person.

Anatomy

The profile header can accommodate different types of content depending on what information is provided. The types of content are one image, name, title, description, and action buttons (one to five). The name is required, but all other content types are optional, although we strongly recommend including them to provide more information.

A. Top App Bar

Since the profile header will appear on what is considered a detail page, the app bar should have a navigation icon to either take the user back to the previous screen or if this profile behaves more like a full-screen dialog, then use a close icon. After the navigation icon, the profile title can describe the general page that encompasses all profiles of a similar kind, such as an internal employee, a client, a member, a particular team, and so on. At the end, if there are extra functions such as downloading contact information or sharing, then it can live in a menu that is accessed by the menu icon. For more information about menus, see Menus.

B. Image (Optional)

We recommend using an image so that the user can quickly identify and see the person the profile is about. Images of people should always be in a circle.

C. Name

The name must include the first and last name of the person.

D. Subheading (Optional)

The subheading is optional and can be secondary information about the person, such as their job title or location.

E. Description (Optional)

The description may include three-lines of text. If it requires more than three lines, consider moving it to the top of the content area below the profile header.

F. Action Buttons (Optional)

There can be one to five action items in the profile header. If there is only one action button, you can put it in the top app bar. However, due to space limitations, it’s recommended that the action items use an icon button rather than text button. If it must be a text button, we recommend only up to two text buttons. Due to these limitations, only use frequently used actions in the context of the current screen.

These actions are buttons so they must follow the same behaviors and interactions as buttons, which means that they must have different states. For more details on how buttons are designed and how they behave, see Buttons.

If a certain action is not available, the action should use the disabled state, which is set to 50% opacity.

Behavior and Interaction

Scrolling

Due to the nature of the prominent top app bar, if the user scrolls down the screen, the profile header gets condensed to the app bar in which it only shows the navigation icon, object title, and any other button in the app bar. If the user scrolls back up, then the full object header slides out again. This behavior occurs on all devices.

Adaptive Design

Variations

Resources

Development: ProfileHeader

SAP Fiori for iOS: Profile Header

The object header is the topmost area in the object’s detail page that provides a detailed glimpse of that object. The object header provides an area that contains information such as object title, subtitle, and description amongst other supplementary information.

Usage

Anatomy

Object Header Structure

A. Main Content Area

The main content area contains information about the object such as image, title, status, and supporting attributes. Additional information such as description and header chart may be placed on other pages based on space.

B. Pagination

Pagination is a non-interactive visual indicator consisting of inline dots indicating the number of pages on the object header and the user’s position on the page. Use pagination as an overflow if the object header must support multiple content types such as description, charts, or KPI.

Content Types

A. Image (Optional)

An image is a 40dp x 40dp area that represents the object through an image or avatar.

B. Title

The title points to the object or product’s name which allows it to be identified amongst other objects. The title should be descriptive.

C. Status Label (Optional)

Shows a brief pertinent description of the object, for example, it can show the priority or urgency of the object’s status. When using a status, the wording should be concise. Maintain wording to a maximum of two words.

D. Subtitle (Optional)

Subtitles may provide additional context for the object with information such as ID, type, etc.

E. Tags (Optional)

Tags are data about the object such as identifiers, groupings, or categorizations that allow users to easily identify these characteristics. When using tags, the wording should be concise. Maintain wording to a maximum of two words.

F. Status Row (Optional)

The Status row is an additional area in the object header, where you can display one or two status labels. You can create an additional layout using both the status label and the status row. Status items should be concise. When using status items, the wording should concise. Maintain wording to a maximum of two words.

G. Label Items (Optional)

Label items consist of a text label and an icon, which are used as supplementary information about the object, such as location, due date, or type. When using label items, the wording should be concise. Maintain wording to a maximum of two words.

H. Description (Optional)

A description allows for lengthier information about the object.

I. KPI (Optional)

Shows relevant trends or status about the object.

J. Header Chart (Optional)

Shows chart visualizations of the object.

Behavior and Interaction

Variations

Resources

Development: FioriObjectHeader, ObjectHeader

SAP Fiori iOS: Object Header

Chips are interactive elements that provide users with a set of options. Users can tap a chip to make selections. Chips can be used for single and multiple selection. A single selection chip is an alternative for a radio button and a multiple selection chip is an alternative for a checkbox.

Usage

• Use chips when you need to help users quickly to choose between at least two clearly distinct choices.
• Use chips to optimize screen space when the text of value is short.

• Don’t use chips when the number of options is more than eight, use a list picker form cell.
• Don’t use chips when the text of value is very long, even if the number of options is no more than eight. Use a list picker form cell instead.

Anatomy

Chip Form Cell

A. Label

Describes the intent of the chip form cell. 

B. Chips

Displays a list of chips for users to select. 

C. Helper Text

Provides additional information about the form cell. 

Chip

A. Container

A chip container defines the boundary of each chip. All chip elements are wrapped in a chip container. The width of the container depends on the length of its content. Each container is a touch target.

B. Text Label

A text label describes what each chip stands for. Text labels should be concise.

C. Check Mark

A check mark appears when a filter chip is selected and disappears when it’s deselected.

Variations

Single Selection

Single selection chips provide users with a set of mutually exclusive options. The user taps on a chip to activate the option. Tapping a different chip transfers activation to that option. Therefore, only one chip can be selected in a group of single selection chips. Single selection chips can be an alternative for radio buttons.

When selected, a check mark appears in front of the text label and pushes the text to the right. The chip container expands horizontally to accommodate the check mark. The check mark disappears when the chip is deselected. The text label shifts left and the chip container returns to its original size.

Multiple Selection

Multiple selection chips allow users to select multiple options from a set of values. Each chip toggles between selected and unselected. Multiple selection chips can be an alternative for checkboxes.

When selected, a check mark appears in front of the text label and pushes the text to the right. The chip container expands horizontally to accommodate the check mark. The check mark disappears when the chip is deselected. The text label shifts left and the chip container returns to its original size.

Chip with Leading Icon

Chips with a leading icon can be used for single and multiple selection. When selected, no check mark will appear.

Wrapped

A group of chips is typically displayed horizontally under the title. The title describes the meaning or purpose of the group. More than one row of chips can be wrapped to the next row, or overflow to the right with horizontal scroll to show more. Choose the layout that provides the best readability for your use case. 

Behavior and Interaction

Error State

Use validation message only when necessary: to show an error message or direct feedback of this control. Don’t distract users with unimportant information. For page level feedback, use a snackbar instead.

The validation message should be concise. One line of text is recommended for the validation message.

By default, there is no validation message. When the validation message is triggered, insert the message with padding after the last row of chips before the divider line if used. The content under it will be pushed down.

Resources

Development: FilterChip, FilterChipFormCell

SAP Fiori for iOS: Filter Form Cell, Segmented Form Cell

Material Design: Filter Chip

The picker is used for time-based selections. Depending on your use case, you can use a date picker, time picker, or time duration picker. Pickers are always displayed in a dialog.

Usage

Use a picker for a time-related decision that the user needs to make.

• Don’t use a picker for picking a number that isn’t related to time.
• Don’t use the date picker for selecting a duration of time.
• Don’t use the time duration picker for selecting a date.

Anatomy

Time Picker

A. Header
Includes the text for the time for hour and minute with a selector for choosing AM or PM.

B. Clock
Imitates the look of an analog clock in order to display the time for the user to select.

C. Clock Hand
The clock hand shows what the user selects for the hour and the minute by rotating to the number the user chooses.

D. Footer Bar
The footer bar houses the buttons for confirming or dismissing the dialog and the input button allows the user to switch to the input time picker.

Time Duration Picker

A. Title
Describes what this time duration picker is for or instructs the user on what to do.

B. Previous Value Preview
The value dial shows a preview of the previous value at the top. There is a slight white gradient on top of the numbers for less emphasis.

C. Selected Value
The value in the center, marked with a blue border on the top and bottom, is the selected value.

D. Next Value Preview
The value dial shows a preview of the next value at the bottom. There is a slight white gradient on top of the numbers for less emphasis.

E. Footer Bar
The footer bar houses the buttons for confirming or dismissing the dialog.

Behavior and Interaction

For more information about the behavior of pickers, see Dialogs.

To learn more about the form cell to trigger the dialog, see Time Picker Form Cell.

Time Duration Picker

The time duration picker is a spinning dial where the users rotate through the numbers to select the value they want at the center. It is formatted to show hours and minutes.

Variations

Date & Time Picker

The date picker allows the user to select a specific date with the calendar and the Time Picker allows the user to select a specific time through the clock.

In some cases the picker may allow the selection of both date and time. If that is the case, the picker has two parts to the dialog, where the first dialog displays the interface for picking a month, day, and year, and the second dialog is for selecting the specific time based on an analog clock interface.

Time Duration Picker

The time duration picker lets the user scroll through a list of values. The value in the center of the picker is the selected value to be used.

Resources

Development: DatePicker, DateRangePicker, DatePickerDialog, MaterialDatePicker

SAP Fiori for iOS: Pickers

Material Design: Date Pickers, Time Pickers

Basic components are a group of components that follow exactly how Material Design defines them as they are integral to the Android UX.

Visual

The only UI changes made for basic components in SAP Fiori for Android are color and typography.

Behavior

Basic components are components that are essential to Android UX. They remain structurally identical with how Material Design defines these components in order to maintain familiarity for Android users.

Components List

Banners

Bottom Sheet

Buttons

Dialogs (Alert, Simple, Confirmation, Full Screen)

Menus

Pickers

Progress Indicators

Snackbar

Resources

Material Design: Banners, Bottom Sheet, Buttons, Date Pickers, Dialogs, Menus, Progress Indicators, Snackbars

For enterprise software, onboarding is the process of activating an account by providing the user with key instructions. 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 terms of data sensitivity, security level, and the number of users. 

Usage

• Welcome users with an element of excitement for the experience ahead. 
• Keep the entire onboarding process as simple as possible and use clear language that gets straight to the point. 
• Onboarding is supported on both mobile and tablet. For mobile, screens appear only in portrait mode. For tablets, onboarding is supported both in landscape and portrait mode.  

• Don’t repeat onboarding after the user has completed the process.
• Don’t skip the onboarding flow for first time logins.

Anatomy

0. Splash Screen 

The splash screen is the very first page that comes up when users open the app. It welcomes users by showing the app icon. It appears when the app is loading and transitions to the next page once the loading is completed. 

A. Launch Screen

The launch screen welcomes new users by showing the overall mood of the app and briefly presents the major features. It contains key actions for users to start interacting with the app, including agreeing to legal terms, trying out demo mode, and continuing to the app.

A. Application Details

• App Logo (Optional): Recommended for branding purposes. 

• App Title: Use clear and concise naming conventions for the application’s title. We recommend keeping the title length to two rows for mobile or one row for tablet.

B. Top User Benefit

This describes the primary benefits of the app and is helpful for users to understand the app’s purpose.

C. User Legal Agreement (Optional)

In proprietary software, an end user license agreement (EULA) or software license agreement is the contract between the licensor and purchaser, establishing the purchaser’s right to use the software. To move forward in the onboarding process, users must agree to the contracts. 

This area lists out the hyperlinks to the legal terms that users must agree to before proceeding to the app. Users must check the checkbox to continue with the app.

D. Start

The button is enabled for the user to proceed once they check the checkbox of the user legal agreement. 

E. Demo Mode

The demo mode allows users to try features of the app without needing to be fully invested. 

F. Footer (Optional)

The footer is an optional area. For certain scenarios, if the user agreement to legal contracts is not displayed, you can list the hyperlinks here in the footer area. 

If your app is available for download from Chinese app stores or websites, the disclosure of legal contracts must be displayed in a dialog view to comply with China’s legal requirements. 

Click here for the recommendations of the user flow. 

B. Agreement: EULA

This page displays the full content of the legal contracts. 

C. Activation: Choose Options

In this activation type, a user can choose to onboard with the discovery service or QR code scan. Once the option is selected, the rest of the process follows the flow of the activation type chosen. 

C-1. Activation: Discovery Service

For the discovery service onboarding, a text input field will appear on the activation screen. Here, an email address should be provided to start executing the discovery service-based onboarding process.

C-2. Activation: QR Code Scan

QR code activation requires the user to be provided with a QR code to scan. Users can scan a QR code by using the camera or by scanning via images saved on their phone gallery. Using the scanner has the benefit of reducing errors and streamlining the activation process. 

C-2. Activation: QR Code Scan Error

In the case that the QR code cannot be read or detected through the camera or the gallery, a dialog will appear to notify the user and present them with actions. 

D-1. Create Passcode

When users are prompted to create a new passcode, they must follow the list of passcode requirements. 

D-2. Verify Passcode

After creating the passcode, users will be prompted to verify the passcode for security purposes.

D-3. Biometrics

Depending on the device, certain biometrics methods may be utilized, such as a fingerprint scan or face recognition. Since the biometrics come from the Android system, the dialog for the biometrics authentication uses the system’s default. 

E. Sign-In

This process is a basic account sign-in through the user’s email address and passcode. 

F. Change Passcode

After creating a passcode, users may choose to change their passcode. Users are required to meet the passcode requirements and then verify the passcode afterwards.

G. Consent Form

The consent form may be used to ask for the user’s consent in things such as sending a crash report.

H. Loading Page

The loading page lets the user know the application is processing content and data.

I. Basic Authentication

Basic authentication is a basic login method with email address and passcode.

Adaptive Design

Resources

SAP Fiori for iOS: Onboarding

Related Components/Patterns: Privacy Notice 

Color sets the visual balance of SAP Fiori for Android apps. On screen, color is used to define the visual hierarchy of UI elements and to direct the user’s attention to complete their tasks.

Horizon Theme Color Palette

The Horizon color palette introduces a unified color palette that brings our brand and products together to achieve a cohesive experience across all SAP touchpoints. The Horizon color palette is designed to provide bold and vibrant color while remaining accessible in instances with complex UIs.

UI Colors

UI colors are colors that are grouped based on their role or usage within the UI. This additional level of abstraction allows product teams to swap out the default Horizon theme with their own product colors. UI colors are grouped into the following color groups:

Surface Colors

Surface colors are colors applied to the background of all components. These colors contrast with all foreground colors and are the basis for the overall theme. Surface colors are identified by the letter S followed by a number sequence (e.g., S1, S2, S3) in our UI Kit.

Text Colors

Text colors are colors applied to the text and icons of all components. These colors range from neutral grey colors to interactive brand colors applied to text and icons. Text colors are identified by the letter T followed by a number sequence (e.g., T1, T2, T3).

Border Colors

Border colors are applied to any linear elements such as dividers or graphical elements used to define any areas within components. These colors range from neutral grey colors to interactive brand colors often used to communicate the state of a certain part of a component. Border colors are identified by the letter B followed by a number sequence (e.g., B1, B2, B3).

Semantic Colors

Semantic colors are applied to any foreground or background elements such as text, icons, or backgrounds to communicate a component’s status, state, or level of priority. These colors are bright in hue to direct the user’s attention to a certain component or part of the UI. Semantic colors are identified by the following naming (e.g., negative label, critical label, positive label, and neutral label).

Accent Colors

Accent colors provide an additional level of color luminance and are used to accent areas of the UI such as avatars, icons, and decorative areas. These colors are bright in hue and provide visual variety to the UI. Accent colors are identified by the word “Accent” followed by a number sequence (e.g., Accent 1, Accent 2, Accent 3).

Resources

Development: Theming and Styling

SAP Fiori for iOS: Colors

Related Components/Patterns: Accessibility

A persistent footer component is used for closing or finalizing actions that impact the current view. It is fixed at the bottom edge of the screen and comes in two different layouts: one for related actions with one or more buttons and one for opposite actions with two buttons and a helper/status text.

Examples

Anatomy

Behavior and Interaction

Buttons

Buttons provide short and meaningful text. For maximum legibility, label text should remain on a single line.

Button Styles and States

To help users distinguish between different actions, you can use the Horizon button styles, such as contained tint for positive primary actions and tonal semantic for negative secondary actions. All the different button states are also supported.

Overflow Menu

Tapping on the overflow button opens a menu with additional actions.

Text Buttons

On mobile devices, a maximum of two text buttons can be displayed in the persistent footer. If the persistent footer has more than two text buttons, the additional text buttons move into an overflow menu, where the most important actions are displayed first.

On tablets, the overflow menu is displayed if there are more than three text buttons.

Adaptive Design

Variations

Related Actions

Primary Contained Button and Secondary Tonal Button

The primary contained button and the secondary tonal button are best used for two related actions.

The primary action is placed in a contained button to the right of the screen. The secondary action is placed in a tonal button to the left of the primary action.

Optionally, the primary contained and secondary tonal button can be combined with a leading icon and an overflow menu if there are more than two actions on mobile or more than three actions on tablet devices.

Primary Contained Right-Aligned Button

The primary right-aligned button indicates a single primary action and should be formatted as a contained button to the right of the screen.

Optionally, the primary right-aligned button can have a leading icon.

Primary Contained Center-Aligned Button

The primary center-aligned button indicates a single primary action and should be formatted as a contained button that spans across the full width of the screen.

Optionally, the primary center-aligned button can have a leading icon.

Opposite Actions

When using two buttons that give users opposite options, the buttons are placed left and right of the persistent footer, with an optional helper/status text in the middle, to emphasize the different opposite actions, such as “Agree” and “Disagree”.

Icon Buttons

Icon buttons indicate two opposite actions and can have an optional helper text in the middle.

Left-Aligned Secondary Tonal Button and Right-Aligned Primary Contained Button

The left-aligned secondary tonal button and the right-aligned primary contained button indicate two opposite actions and can have an optional helper text in the middle.

Text Buttons

Text buttons are used for actions of equal importance and can have an optional helper text in the middle.

Resources

Development: PersistentFooter

SAP Fiori for iOS: Toolbar

SAP Fiori for Web: Footer Toolbar

Related Components/Patterns: Buttons

The data table is a grid layout of columns and rows showing labeled data, such as numbers, text, and images.

On mobile, a horizontal scrollable data table with a sticky header is available. Alternatively, the data table will be converted to object cells by default on mobile if horizontal scrolling is disabled.

Usage

Anatomy

A. Header Rows
Located at the top of each column is a label. It’s recommended for the data table to have at least three columns.

B. Data Rows
Follows after the header row. There is no maximum number of data rows.

C. Sticky Horizontal Column (Optional)
The first column can be sticky (mobile only).
The sticky column’s maximum width is 30% of the screen width in order to not take up too much space. Any content that is longer will be truncated.

D. Divider (Optional)
Between the first and second column a divider can be displayed. If the first column is set to sticky (Mobile only), a divider must be added.

E. Chevron Column
The user can tap on a row or on the chevron to navigate to the row details.

Text Alignment

The text alignment within the columns depends on the type of content to maximize legibility.

Dynamic Width Column

• The dynamic column takes up all the remaining space after the widths of the other columns are determined.
• A row contains only one dynamic column.

Maximum Height of a Row

• The maximum number of lines of text is two. Users can choose to determine max-height of text line as one or two.
• If the text is longer than the maximum number of lines, the text will be truncated.

Maximum Width of a Column

• If there are more than two columns, any one column will have a maximum width including padding of 50% of the screen width to avoid a column to take up too much space. This width can be overridden.
• If the content exceeds the width of the column, the content will be truncated or switched to a two line if the data table is set to two lines.

Behavior and Interaction

Scrolling

The header stays at the top as the user scrolls. A drop shadow will appear once the user scrolls to differentiate the header and data rows.

Horizontal, vertical, and diagonal scrolling are available to allow for flexibility.

Resources

Development: DataTableView

SAP Fiori for iOS: Data Table

SAP Fiori for Android type system maps SAP’s 72 typeface to Material Design’s type hierarchy. This respects the established visual harmony of Material Design’s components while introducing SAP Fiori’s unique visual identity.

72 Typeface

SAP Fiori for Android uses SAP’s proprietary 72 typeface to maintain consistency with other SAP products. In addition, the 72 typeface has been designed to meet the typographic requirements needed for the enterprise. 72 typeface adheres to the following principles:

• Legibility enhancements: Optimized for screen use
• Font styles: Supports a robust typographic hierarchy
• Brand voice: Be credible and humane
• Character set: Accommodate complex content
• Language support: Supports the Windows Glyph List
• Accessibility: Improved character recognition

Resources

Download: 72 Font

Information: 72 Showcase

Material Design: The Type System

SAP icons have been redesigned for the Horizon visual theme with a fresh, friendly, and bold style. The new icons maintain consistency of size, stroke, and visual balance and are tailored for simple and direct user interaction, using metaphors that are easy to understand in an enterprise setting.

Usage

• Use the SAP icon library.
• Use icons to highlight important actions for users.
• Use icons to indicate navigation actions to other screens.
• Use icons that are clear to the user

• Don’t use different-sized icons.
• Don’t use third-party icons.
• Don’t use icons that are ambiguous.

Design Language

The SAP icon library communicates the following SAP Design principles:

• Simple 
• Fresh 
• Neutral
• Modern 

Icon Grid

The standard size of SAP Icons is based on a 24dp grid. This grid size is used to design SAP icon used within our components and is based on the increment system. The 24dp area serves as a container where the actual icon graphic sits.

Live Area

SAP icons are designed within a 20dp x 20dp live area. This means that the icon has top and bottom paddings within the icon itself and ensures a sense of break between icon and any other UI elements.

Pixel Alignment

When designing custom icons, ensure that icons use full pixels. This means they should have whole number units, with no decimals to maintain clarity on screens with high pixel density.

Use full pixel units when designing custom icons. This means pixels should have whole number units, with no decimals to maintain clarity on screens with high pixel density.

Don’t design custom icons where pixel units fall in between pixels, these are called half pixels. Half-pixeled units will look blurry on screens with high pixel density.

Resources

SAP Icons: SAP UI5 Icon Explorer

Layout: Increment System

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 design philosophy of SAP Fiori is based on five core principles: role-based, delightful, coherent, simple, and adaptive.

Role-Based

SAP Fiori is designed for your business, your needs, and how you work. It draws from our broad insights on the multifaceted roles of today’s workforce. SAP Fiori provides the right information at the right time and reflects the way you actually work.

Delightful

Apart from making you work smarter, SAP Fiori also enriches your work experience by allowing you to simply do your job.

Coherent

Whether you fulfill a sales order, review your latest KPIs, or manage leave requests – SAP Fiori adheres to a consistent interaction and visual design language. Across the enterprise, you enjoy the same intuitive and consistent experience.

Simple

With SAP Fiori, you can complete your job intuitively and quickly. SAP Fiori helps you focus on what is important – essential functions are easy to use, and you can personalize the experience to focus on your relevant tasks and activities.

Adaptive

SAP Fiori enables you to work how and where you want, regardless of the device you use. And, it provides relevant information that allows for instant insight.

A snackbar provides a brief message about the performance of a process at the bottom of the screen.

Usage

A snackbar provides updates of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen and disappears on without requiring the user’s dismissal.

Variations

Behavior and Interaction

Resources

Development: Snackbar, Snackbar

SAP Fiori for iOS: Toast Message

Material Design: Snackbars

Progress indicators keep users informed about the status of ongoing processes, such as logging in, uploading files, or refreshing content. They communicate the state of an app and indicate available actions, such as whether users can navigate away from the current screen.  

Usage

Anatomy