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 summarizes the content within that section. It is used to organize screen content into logical parts, making it easier for users to navigate and understand the information. Headers should be brief and concise, allowing users to quickly identify what each section contains.

Anatomy

A. Header

The header indicates what the section contains.  

B. Button (Optional)

The button enables users 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.

Section Footer

A section footer provides additional actions or information at the bottom of a group section. It supports various layouts, including a left-aligned button, right-aligned button, two opposite buttons, and text only, with flexible positioning to adapt to different use cases. 

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 control 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. Handle

The handle indicates the selected value on the track. Users can drag the thumb handle 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 workflow, located at the end of the form. All the attached files should be associated with a certain business object.

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.

D. Helper Text (Optional)

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

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. Mandatory Field Indicator (Optional)

If the attachment form cell is a mandatory field, it is indicated by an asterisk (*). 

D. “Add” Button

Tapping the “Add” button triggers the workflow of adding an attachment. 

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

Tapping the “Delete” icon deletes the item.

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. Mandatory Field Indicator (Optional) 

If the attachment form cell is a mandatory field, it is indicated by an asterisk (*). 

D. “View Switcher” Icon (Optional)

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

Uploading Attachments

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

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

On medium and expanded screens, a menu is used instead of a 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 to inform the user about the limit. You can also add a helper text below the attachments to display a hint message, but if the list of attachments becomes too long, the helper text might go out of view. 

Mandatory Form Field

If there is a required field that is indicated by an asterisk (*), the attachment form cell is validated to ensure that the user has uploaded a file. Validation occurs when the user taps to save or apply changes. If no attachment is uploaded, the application should place the form cell into an error state, where the error message replaces the helper text. The error message should be concise and short, with one line of text only. 

The asterisk as an indicator is a de facto standard that is widely recognized and typically doesn’t require additional explanation in business contexts or when targeting experienced users, as it avoids cluttering the UI with unnecessary information. However, when targeting a broad audience or potentially inexperienced users, it’s advisable to add a note such as “Fields marked with an asterisk are required fields” either at the top or at the bottom of the page. We recommend placing it consistently throughout the application. For further details, refer to ACC-253 Details.

Deleting Attachments

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.

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.

Viewing Attachments

Users can view the file by tapping on the attachment cell, outside the “Delete” button. The preview of the file is not managed within the SAP Fiori app; instead, it is handled by the Android system. Apps that support the attached file type will launch to display the file. 

View Modes

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 consist of text, images, or icons. They can be configured in various ways to accommodate a wide range of use cases.

Usage

Resources

Development: FioriObjectCell, ObjectCell, GridObjectCell, GridTableRow, ContactCell

SAP Fiori for iOS: Object Cell

Material Design: Lists

Related Components/Patterns: Status Info Label, Menu 

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. 

An asterisk (*) next to the chip form cell label can be added to indicate that the input is required.

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 provides a dialog for date or time-based selections. It can be used to select a date, a range of dates, a time, or a duration of time. 

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

Range Picker

The range picker is a full-page dialog. 

A. Top App Bar

Includes the “Close” icon button and “Save” label button. 

• The “Close” icon button cancels any changes made to the selected date range and closes the picker dialog. 
• The “Save” label button saves any changes made to the selected date range and closes the picker dialog.  

B. Header

Includes the selected date range, helper text, and input icon button. 

• The selected date range is formatted: abbreviated month and date number for the start date to abbreviated month and date number for the end date. 
• The helper text is customizable and helps remind the user what date range is being selected.  
• The input icon button allows users to switch to the input mode for the picker. See the Variations section for more information. 

C. Weekday Label Container
Displays labels for the seven days of the week.

D. Date Label Container
Displays the dates of the visible months in a grid view.

Time Picker

A. Header

Includes the selected time, helper text, and AM/PM selector. 

• The selected time is in a digital format (hh:mm). The hour and minute value containers can be selected to change what is shown in the clock. See the Behavior and Interaction section for more details.  
• The helper text is customizable and helps remind the user what time is being selected.
• The AM/PM selector allows the user to choose between AM or PM time. 

B. Clock
Displays an analog clock that includes a clock hand that can be rotated to select an hour or minute. See the Behavior and Interaction section for more information.

C. Footer 

Includes the input icon button and “Cancel” and “OK” label buttons. 

• The input icon button allows users to switch to the input mode for the picker. See the Variations section for more information.
•  The “Cancel” label button cancels any changes made to the selected time and closes the picker dialog.
• The “OK” label button saves any changes made to the selected time and closes the picker dialog. 

Duration Picker

A. Header
Includes a customizable title to help remind the user what duration is being selected.

B. Previous Value Preview
Displays a preview of the previous value; the value that comes before the currently selected value.

C. Selected Value
Displays the currently selected value. 

D. Next Value Preview
Displays a preview of the next value; the value that comes after the currently selected value.

E. Footer

Includes the “Cancel” and “OK” label buttons. 

• The “Cancel” label button cancels any changes made to the selected duration and closes the picker dialog. 
• The “OK” label button saves any changes made to the selected duration and closes the picker dialog. 

Behavior and Interaction

Date Picker

Selection

To select a date, users may tap on a date label. Today’s date is selected by default.

Navigation

To navigate between years, users may tap the year and month menu label and select a year. The picker navigates to the newly selected year with the already currently selected month.

To navigate between months, users may tap the left and right month selector icons or swipe the date label container area left and right.

The picker may also be navigated using an external keyboard and mouse for accessibility.

Range Picker

Selection

To select a date range, users must tap on a starting date label followed by an end date label. The default selected range is today to today.

If a start date is already selected and the user selects a day before the selected start date, the newly selected date becomes the start date.

If a start and end date are already selected and the user selects a date, the newly selected date becomes the start date and the end date is cleared.

Navigation

To navigate between months, users may swipe up and down on the date label container area. The date labels scroll infinitely unless a minimum and/or maximum date has been defined. See the Variations section for more information.

The picker may also be navigated using an external keyboard and mouse for accessibility.

Time Picker

Selection

To select which value to update, users may tap on the hour or minute value containers. This changes the numbers displayed on the clock to hours or minutes.

To select an hour or minute value, the user may rotate the clock hand around the analog clock. This updates the selected hour or minute in the digital hour and time value containers. The default selected time is the current time.

The hour and minute values may be updated using the keyboard. The user may also navigate between them using the keyboard for accessibility.

AM/PM

To select whether the time is AM or PM, the user may tap on AM or PM in the AM/PM selector.

The user may also navigate between them using the keyboard for accessibility.

Duration Picker

Selection

To select a time, users may scroll through a list of values. The value in the center is the selected value.

Variations

Input Mode

The date, range, and time pickers all include an input selection mode. This mode can be shown as the default dialog when the picker is triggered. They provide input dates for value selection for accessibility.

It is recommended to show the input selection mode for devices with small heights as the input-mode dialogs are smaller than the selection-mode dialogs.

Date Picker States

1. Default – days of the month being displayed
2. Today – the current system date
3. Selected – The selected date
4. Range start – the selected starting date when an end date is selected
5. Range middle – dates between the selected starting and end dates
6. Range end – the selected end date
7. Disabled – dates that cannot be selected.
   • Singular dates can be disabled the selected range may not include these dates in the middle.
   • A minimum and/or maximum date can be defined. Dates before the minimum and/or after the maximum date will be in a disabled state.

Status Indicators

Date labels may also display additional information via a status indicator. The color and shape of the status indicator is customizable. The default is a circular dot in the blue call-to-action color.

Adaptive Design

The date, range, and time pickers adapt to different window sizes.

• For compact windows, the portrait mode of the pickers is shown.
• For medium and expanded windows, the landscape mode of the pickers is shown.

The input mode for the date, range, and time pickers may be shown as default or for medium and expanded window classes if desired.

Resources

Development: DateTimePickerFormCell, DurationPickerFormCell

SAP Fiori for iOS: Pickers

Material Design: Date Pickers, Time Pickers

Related Components/Patterns: Date & Time Picker Form Cell, Dialogs

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