Explore SAP Fiori for Android

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. Adding attachments on compact (left) and medium and expanded screens (right) Anatomy Basic Anatomy A. Header The header is at the top of [...]

An avatar is a visual element used to display user profiles, initials, placeholders, icons, or business-related images, such as logos and product pictures. Avatar and avatar group variations on compact (left) and expanded screens (right) Usage Do Consider using round avatars to represent user profiles and square avatars for objects. Don't Don’t use avatars as [...]

The date and time picker form cell is used for selecting time-based data types. Time picker form cells in compact (left) and expanded layouts (right) Anatomy Single Value Picker Form Cell Single value picker form cells are used for selecting only a single value, which includes the date picker, range picker, time picker, and duration [...]

The floating action button or FAB is a button variant that displays the most prominent action on screen. It is typically placed on the bottom corner of the screen, but it can also be placed in the center and remains persistent as users scroll through content. FAB in compact (left) and expanded (right) size classes [...]

The illustrated message communicates empty, error, and success states through a combination of solution-oriented messages, engaging illustrations, and a conversational tone. The illustrated message turns a situation, even a negative one, into a better experience for your users, while ensuring consistency. General empty, error and success states example Usage Use the illustrated message when you [...]

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. List picker form cell on a compact (left) and expanded screen (right) Usage Do Use [...]

Multi-message handling helps users manage multiple messages within an app, making it easy for users to take action.   Multi-message handling on compact screen (left) and expanded screen (right) Anatomy Multi-message handling follows the basic structure of a bottom sheet, prioritizing message components based on their importance. Error messages should appear first to capture the [...]

The signature capture allows users to input their signature by signing directly on a dialog. The signature is captured and then saved with an optional watermark for additional information. Signature capture on mobile (left) and tablet (right) Usage The signature capture may be used when users must sign to authorize workflows. It can be used [...]

The signature form cell is an entry point for users to launch the signature capture component. Signature form cell on mobile (left) and on tablet (right) Usage Do Use the signature capture form cell when user consent is required. Use a concise header to communicate the purpose and importance of the signature requirement. Use an [...]

Text input controls are used to request a text entry from the user. They are usually found in the create or edit pattern. Text input controls on mobile (left) and tablet (right) Usage Do Use capital case for labels. Use an asterisk next to the label to indicate that the text input is required. Use [...]