Android widgets provide a quick overview of key information across the user’s home screens. They retain simplicity by showing only the most valuable information and functionality from the application first, guiding users to access more complex data and actions within the app. While the widget’s content focuses on one subject, users can still adjust the amount of content displayed by resizing the widget, if supported.

Usage

Creating Content

• Display curated and dynamic information for a single idea that relates to the most valuable application information and functionality.
• Keep the information concise, and if more is needed, the user can navigate to additional details.
• Offer widgets in multiple sizes when it adds direct value to the user.

Aligning Interaction

• Offer specific functionality without the user needing to launch the application.
• Include multiple touch targets if the user can perform different actions on the widget.
• Ensure the interaction opens the application at the right location.

Handling Authentication

• Inform the user when authentication adds value, prompting them to continue in-app.
• Return an error state for unauthorized users if authorized users permit the application to show data in widgets.

Anatomy

Adaptive Design

Variations

Resources

The staggered layout for cards is a design pattern where cards are arranged in a flexible, grid-like structure, with each card adapting to the available space while maintaining alignment with adjacent cards. It optimizes space usage and provides an aesthetically pleasing visual layout.

Usage

• Ensure that cards in the staggered layout contain related content.
• If your app includes multiple card layouts, such as a carousel, add an optional title to your staggered layout container.

Don’t use a staggered layout for your tablet app when you have only a few cards.

Anatomy

Container with Cards

The cards have a consistent width, which is based on the number of columns determined by the window size class. The height of each card can vary depending on the content, resulting in an asymmetric view.

Margins

Margins are the spacings between the content and the outer edges of the window area. Margin widths are defined using fixed values for each window size class and change at different breakpoints to better fit the screen size.

Behavior and Interaction

Scrolling

Cards scroll vertically in a list and staggered layout.

Empty States

If there is no card in the list, it is important to use an empty state indicator in the layout container to communicate this information. This indicator serves as an informative message for users to let them know that no information or data is currently available or that some information needs to be created.

Adaptive Design

The number of columns may increase based on the screen width, allowing more cards to be shown side by side, resulting in a grid-like look that enhances readability.

For compact window size classes, cards are arranged in a vertical list, which span across the entire width of the screen and provide a high density of information.

For medium and extended window size classes, the layout changes to a staggered layout, with cards placed at the top and then left-most position. This ensures a seamless layout without gaps.

If there is a navigation rail or navigation drawer, the number of columns is reduced and adapts to the remaining screen width.

Additionally, you can also combine layouts. However, if a staggered and a carousel layout are used on the same page, it creates visual imbalance of the card spacing caused by the outer margins of the different layouts.

Resources

Development: Card System

SAP Fiori for iOS: Masonry Layout

SAP Fiori for Web: Overview Page

Related Components/Patterns: Cards Overview, Carousel Layout

KPIs (key performance indicators) are metrics used to evaluate the success of an organization, an individual, a group, or an activity. They serve to highlight the current value of an object or as a summary of the object. KPIs can be displayed in a header, in the content area of an object, on a card, or in a modal window.

Usage

• Use KPIs for numerical metrics.
• Use abbreviations for units of measurement in the KPI prefix and/or suffix that may be too long. For example, “m” or “mil” can be used in place of “millions”.

• Don’t use KPIs for non-numerical metrics.
• Don’t mix standard KPIs with progress view KPIs when nesting KPIs in an object. Standard KPIs should only be grouped and displayed with one another, likewise with progress view KPIs.
• Don’t write overly long or descriptive KPI labels. KPI labels should be concise while also clearly communicating the KPI meaning.

Anatomy

Standard KPIs and KPIs with Icons

A. Trend/Icon

The KPI icon is used to provide a visual representation of information related to the KPI metric. It defaults to a trend symbol for standard KPIs. With the KPI Icon variant, you can choose an icon from the Icon Explorer.

B. Prefix and Suffix

The KPI prefix and suffix are used to define units of measurement for the KPI metric and are placed right in front or after the KPI numeric value.

C. Value(s)

The KPI value is the core element of the component. It can either be a single value with one number or two values with a combination of numbers, prefixes, and suffixes, such as “15hr12mins”.

D. Label

The KPI label is used to provide additional information about the KPI.

KPI Progress View

A. Progress View

The progress view displays a visual representation of completeness using a circular progress track.

B. KPI

The KPI is a component nested within the progress view KPI component. See information on KPIs above for anatomy.

C. Title

The progress view title is used to provide additional information about the overall KPI progress view.

Behavior and Interaction 

A KPI is a display-only component used to show a key figure.

Variations 

KPIs

Standard KPI

The standard KPI is available in three different sizes and can be highlighted with semantic colors. Standard KPIs may be used for measurements such as meters, Celsius, percentage, etc.

KPI with Icon

The KPI with icon is available in three sizes and can be highlighted with semantic colors. The iconography helps represents the KPI metric. For example, a document icon can be used to show there are files associated with a KPI.

KPI Progress View

The KPI progress view utilizes a circular form that represents the progress of its KPI metric. It can be used to show the step progress of a goal, percentage of completion of a task, and more.

Resources

Development: FioriNumericKpi, FioriProgressViewKpi

SAP Fiori for iOS: KPIs

Related Components/Patterns: Cards Overview, Card Header, Card Body

A card provides brief, related pieces of information and serves as an entry point, teaser, or preview to more detailed content. By pressing on the card, users can select the card and navigate to a dedicated page with more detailed information.

Usage

The card system for SAP Fiori for Android provides an advanced approach to utilizing cards, which offer a convenient way for your app to display content from various sources. It consists of a toolkit of nested components that enable the creation of diverse cards to meet the requirements of SAP products. These nested components encompass a wide range of functionalities, such as data table, key value cell, KPIs, and more. Additionally, the card system provides enhanced customization and flexibility, along with adaptable sizing options to accommodate different form factors and layouts, such as list, staggered, or carousel layout for cards. When incorporating cards into your app, it is crucial to keep the following aspects in mind:

• A card should focus on a single topic and be coherent in itself.
• A card should serve as an entry point, teaser, or preview to more detailed content.
• A card should be a short representation of a conceptual unit.
• A card should present information in a compact and easily scannable format.
• Incorporate cards into your app design to provide users with a quick overview of various information.
• Ensure that there is a clear indication on the card when a user selects it and an external app is launched, for example, by incorporating an icon that indicates an external app is launched.

• When designing your layout, don’t group components in a container with round corners. This style does not automatically transform a component into a card.
• Don’t place unrelated elements within a card.
• Don’t overload the user by including an excessive number of UI elements within a card.

Anatomy

The content of a card is organized in so-called blocks. The height of a card is determined by its content. However, it’s crucial to keep in mind the maximum permitted height of 520dp.

A. Card Container

The card container is the element that holds the header, body, and footer of the card.

B. Header

The card header, the card’s uppermost part, contains essential information about the card and its associated detail page content. It provides a quick overview of fundamental details such as the title, subtitle, and status of the card. More information on the header can be found in the Card Header article.

C. Body

The card body is the central part of a card that is used to provide additional information alongside the content shown in the card header. This allows for the presentation of in-depth details, data, or graphics relevant to the card’s context. More information on the body can be found in the Card Body article.

D. Footer

The card footer, located at the bottom of the card, is used for important or routine actions that directly impact the card’s functionality, such as “Approve’ or “Submit” actions. More information on the footer can be found in the Card Footer article.

Behavior and Interaction

Interaction States

Selecting a Card

When a user presses a card, the ripple effect serves as a clear and immediate feedback to indicate their selection.

Selecting an Interactive Element

When a specific element within the card, such as a card cell, is designed to be interactive, it is visually indicated by a ripple effect.

Navigation

When a card is selected, it triggers navigation to a designated page that provides more details, such as a list report page or an object details page.

When users engage with an interactive element within the card, such as an object cell, it triggers navigation to a dedicated details page that corresponds to the specific subject of that element.

Empty States

When there is no relevant content or data to display, it is important to include an empty state indicator within a card. This indicator serves as an informative message for users, letting them know that there is no information or data available at the moment or that new data needs to be created or uploaded.

If a component within the card fails to load, an empty state indicator is displayed in the body container.

Skeleton Loading

Skeleton loading is a design technique where a simplified and placeholder version of content is displayed to users while the actual data is being fetched or loaded. It provides users with a visual cue that content is on its way and improves the perceived performance of the interface.
There are three sizes based on the card blocks. This approach allows you to select a card size that approximately reflects the loaded card size.

Adaptive Design

The card system ensures that cards adjust seamlessly to different screen sizes and orientations. For compact window size classes, cards are designed to be narrower to accommodate the limited screen width of phones, making efficient use of the available space in a portrait orientation.

For medium and expanded window size classes, cards can have a wider layout to take advantage of the increased screen real estate, resulting in a more spacious and visually appealing presentation of content. More information about adaptive design can be found in carousel layout and staggered layout.

Variations

Data Table Card

Create a data table card to display key data points about an object in a two-column format.

List Card

Create a list card to display a preview of a set of items or objects in a vertical list format.

Object Card

Create an object card to display a preview of an object.

Resources

Development: Card System

SAP Fiori for iOS: Cards Overview

SAP Fiori for Web: Cards (SAPUI5), Cards (Web Component)

Related Components/Patterns: Card Header, Card Body, Card Footer, Carousel Layout, Staggered Layout

Tags are used to display quick and useful bits of information to the user, such as keywords, labels, categories, or statuses.  

Usage

Tags display complementary information that relates to the object. They use a different visual representation than plain text and serve as independent bits of information. When incorporating tags into your app, it is crucial to keep the following aspects in mind:

• Keep tag labels concise.
• It is recommended to maintain wording to a maximum of two words per tag.

• Don’t write full sentences within a tag.
• Don’t place icons or images within a tag.
• Don’t overload the user by including an excessive number of tags or very long text values.

Anatomy

A. Container

The are two styles available for containers: filled and outlined.

B. Label

The label indicates keywords or other bits of information.

Behavior and Interaction

Tags are not interactive. If there is more than one tag, they line up in a horizontal layout one after the other. The tag row can be configured to wrap to the next line depending on the parent container.

Variations

Color

Default vs. Accent

The default tag color is grey, but it can also be displayed in many different colors of the accent color palette.

Resources

SAP Fiori for iOS: Tags

Related Components/Patterns: Cards Overview, Object Header, Object Cell

The status info label component can be used to provide complementary bits of information.

Usage

The status info label displays complementary information that relates to the object. It is a flexible combination of a text value and an icon. When incorporating a status info label into your app, it is crucial to keep the following aspects in mind:

• Keep text values concise.
• Customize icon and label layout based on your needs.

• Don’t use complete sentences within a status info label item.
• Don’t include links. Status info label items are not interactive.
• Don’t overload the user by including an excessive number of status info label items within a row or a stack.

Anatomy

A. Icon (Optional)

The icon is a visual illustration that can complement the text value or be used independently. If it is combined with a label, it can be placed as a leading or trailing element.

B. Label (Optional)

The label indicates short information bits such as keywords, categories, or status. The text value can be used independently or combined with an icon.

C. Dot (Optional)

A dot can be used to separate status info label items in a horizontal alignment.

Behavior and Interaction

Status info label items are not interactive. If there is more than one status info label item, they may either line up in a horizontal layout one after the other or be stacked under each other. A stacked column can be either left or right-aligned.

Variations

Components

A. Icon Only

Shows visual information such as an icon, image, logo, or avatar.

B. Label Only

Text value that implies a brief description, for example, it can show the priority or urgency of the object’s status. Maintain wording to a maximum of two words.

C. Leading Icon

A leading icon is placed in front of the label.

D. Trailing Icon

A trailing icon follows the label.

Layout

Horizontal vs. Stacked

Status info label items can be arranged horizontally, optionally dividing them with a dot, and can either be wrapped to the next line or be stacked vertically.

Color

Default vs. Semantic

The default tag color is grey, but status info label items can also be displayed in many different colors of the semantic color palette.

Resources

Development: FioriStatusInfoLabel

Related Components/Patterns: Cards Overview, Object Header, Object Cell

The card header is the uppermost part of the card that provides important information about the card and its related content on the detail page. The optional card header allows for a quick overview of key information, such as the title, subtitle, and status of the card.

Usage

When using the card header, only include essential information about the card‘s content. The card system offers various components for this purpose. Consider the following aspects when using the card header: 

• In the main header, only include a title, subtitle, left accessory, icon button, and/or a counter. 
• In the extended header, only include status info label, rating controls, tags, text, and/or a KPI. 
• For the main header, use a maximum of three rows. 
• For the extended header, use a maximum of three rows. 
• Use only an icon button within the card header that directly impacts the card, for example, to favorite or bookmark the card). 
• Make sure that the title on the header image has a good contrast to the image. For example, use a white title on a darker image and a black title on a lighter image. 
• Maintain consistent positioning of the components in the card header throughout the app. For example, if one card header contains tags in the first line, all the other cards in your app should have them too. 
• Use the counter only if the card body includes list components such as card cells or data table. 

• Don’t overcrowd the card header with too many elements.  
• Don’t place other components, such as a key value cell or an avatar row component, in the card header. Use the card body instead. 
• Don’t use the card header to provide more detailed information on the card, use the card body instead.
• Don’t add more than three rows to the main header. 
• Don’t add more than three rows to the extended header. 

Anatomy

A. Header Container

The header container is the element that holds the header image, main header, and extended header of the card. 

B. Header Image (Media)

The header image, also known as “media” in the SDK, is an optional decorative element that allows you to include an image that matches the card context. 

C. Main Header

The main header contains essential information about the card, such as a title, subtitle, left accessory, icon button, and/or a counter. However, these elements, including the main header itself, are optional components. 

D. Extended Header

The extended header contains additional elements that provide more information. These elements can be a status info label, rating controls, tags, text, and/or a numeric value in the form of a KPI. Only one component can be placed in one row. The content of a row is limited to one line by default, but it can be configured to wrap. 

Variations

Main Header Components

All components in the main header are optional, including the title. If there is already a title in the header image, it is not recommended to duplicate it or use it for other information in the main header. 

A. Title

B. Subtitle

C. Left accessory

D. Icon button

E. Counter

Extended Header Components

Every element in the extended header is optional. To maintain consistency, it’s advisable to arrange the components in the same order across different rows. For instance, if your card includes a status in the first row, it’s recommended to place the status in the same position for other cards throughout your app.

A. Status info label

B. Text

C. Rating control

D. Tags

E. KPIs

Behavior and Interaction

Opening a Menu

Users can open a menu with host actions that directly impact the card, such as hiding the card. To close the menu, users can tap anywhere on the card or tap the icon button again. A common example is the overflow button or a filter option for cards.

Action Button 

If a card only requires one specific action instead of multiple actions, you can choose to directly place the corresponding icon button on the card. This eliminates the need for the overflow menu. 

Resources

Development: Card System

SAP Fiori for iOS: Card Header 

Related Components/Patterns: Cards Overview, Card Body, Card Footer

The card footer is the bottom part of a card that contains important or routine actions that directly impact the card, such as “Approve” or “Submit”. The footer can accommodate a maximum of two action buttons. 

Usage

When using the card footer to integrate important user actions related to the content or functionality of the card, consider the following aspects: 

• Include only one or two of the most important and routine actions in the card footer. 
• If two buttons are used, always place the primary action on the right side of the footer. 
• If two buttons are used, place the less important and secondary action on the left side of the footer. 
• Ensure that the button’s wording reflects the action that will be performed after tapping on the button. 
• Use short and concise button labels. 

• Don’t include more than two buttons in the card footer.  
• Don’t place an overflow button in the card footer. Having overflow buttons in both the footer and header might lead to visual ambiguity, as they would look identical. 
• Don’t use long button labels. If the button label needs to be very long, use icon buttons or only one button. 

Anatomy

A. Card Footer Container

The card footer container holds one button that is right-aligned by default or set to full width, or two buttons that are right-aligned within the card footer container.

B. Primary Action Button

The contained action button is used to highlight the most important action. Only use one primary action in a card. We recommend using the contained button style for actions that trigger or complete a task. 

C. Secondary Action Button

The tonal action button is used for actions that are not the primary action. If the card doesn’t have a clear primary action or if the displayed actions are equally relevant, the card footer can include only tonal or text buttons. If the action is destructive, use the tonal negative style to warn users about taking extra precautions before performing an action. 

Behavior and Interaction

Tapping on the button in the card footer performs the indicated action. 

User-Triggered Feedback Indicator

A user-triggered feedback indicator (progress indicator) refers to a visual element or cue on the card that provides feedback to the user as they perform the action. This indicator is triggered by the user’s actions and is designed to provide a response or confirmation. The overlay informs the user of the affected area that the content is not actionable during the process. Users can still navigate and take actions on other items that are not affected.

Depending on the use case, consider using a short, clear message (see snackbar) about the processes that have been performed to ensure that the user is informed.

Resources

Development: Card System

SAP Fiori for iOS: Card Footer

Related Components/Patterns: Card Overview, Card Header, Card Body, Buttons 

A carousel layout is a design pattern that displays multiple cards horizontally, one after the other, with a glimpse of the next card visible on the edge of the screen. This partial visibility encourages users to swipe or scroll left or right to reveal more cards.

Usage

Use a carousel to maximize the amount of information displayed and preserve the context without making the user scroll further down the page. The cards in the carousel should be closely related to each other, allowing users to anticipate the kind of content they will discover when interacting with the carousel.

For compact window size classes, we recommend displaying a maximum of five cards, as users are unlikely to engage with more than that. For medium and extended window size classes, more cards can be added, and their width is automatically adjusted. When using a carousel, consider the following aspects:

• For compact window size classes, we recommend displaying a maximum of five cards.
• For medium and extended window size classes, you can show up to eight cards.
• Ensure that the cards have related content.
• Keep the height of the cards compact to avoid additional vertical scrolling.
• Make sure the carousel container is fully visible on the screen.

Don’t use a carousel if there are multiple types of cards. Use a staggered layout instead or add a section header with action to a deeper navigation to show all elements.

Anatomy

A. Container with Cards

The height of the carousel container is determined by the card with the most content that is currently visible to the user. All cards have the same height and cards with less content are stretched to match the height of the tallest card and align with the carousel container. This can lead to white space between the body and the footer, which is why the content of a card should always be compact and concise. The footer of the card is always aligned to the bottom edge. For more information, refer to cards overview.

B. Margin

Margins are the spaces between the content and the left and right edge of a window area. Margin widths are defined using fixed values for each window size class and change at different breakpoints to better fit the screen size. In a carousel, the margins on the left and right are not equal to cut the card at the right side of the screen.

Behavior and Interaction

Scroll Snapping

Scroll snapping refers to the effect of cards always snapping into place at specific, predefined positions during scrolling, rather than scrolling freely.

This gives the user a sense of precision and makes scrolling more pleasant.

Navigation

If there are too many cards in a carousel, you can add a header with a “See All” interaction. Tapping on “See All” navigates the user to a page that displays all cards from the carousel group in a list or staggered layout, depending on the window size class.

Empty States

If there is no card, it is important to display an indicator for an empty state in the carousel. This indicator serves as an information message for users to let them know that no information or data is currently available or that some information needs to be created.

Adaptive Design

A carousel shows fewer cards for a compact size class, while a medium and expanded window size class shows more, as there is more space available on the page. The height of a carousel container should be fully visible on the screen, regardless of the screen size.

If there is a navigation rail or navigation drawer, the number of columns is reduced and adapts to the remaining screen width.

You can also combine layouts. However, if a carousel and a staggered layout are used on the same page, it creates a visual imbalance of the card spacing caused by the outer margins of the different layouts.

Resources

Development: Card System

SAP Fiori for iOS: Carousel Layout

SAP Fiori for Web: Carousel (SAPUI5), Carousel (Web Component)

Related Components/Patterns: Layouts Overview, Staggered Layout, Cards Overview

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.

Usage

Use the illustrated message when you want to improve the user experience for one or more message states in your application. The illustrated message’s content should be concise but prioritize clear messaging.

Turn a negative event into a positive one

Take time to design and write a solution-oriented message. Be precise in your wording and use appropriate illustrations.

Ideally, a negative event in a software product doesn’t generate negative emotions. A well-designed illustrated message that leaves users feeling understood and valued can result in a neutral or even positive feeling. Remember that users will benefit from thoughtfully crafted illustrated messages every time they encounter them – perhaps even daily.

Always write a coherent, solution-oriented message

Make sure that the illustration, message, and call to action work together as one to clarify the situation. Always provide a message. Never use an illustration without a message. A message combined with an illustration is more powerful than a message alone.

Tailor your message to your use case

Always ensure that the default text fits in the context. If not, replace it or make it more precise.

Example:
Default text: No results found / Try changing your search criteria.
Adapted text (supplier table used with a filter bar): No suppliers found / Try adjusting your filter settings.

We recommend replacing generic terms such as “data” and “object” with your specific business object.

Example:
Default text: There’s no data yet / When there is, you’ll see it here.
Adapted text: There are no orders yet / When there are, you’ll see them here.

Use the illustrated message to communicate high-priority information

Place the illustrated message in dialogs, cards, and at a page level rather than a snackbar or a banner to indicate high-priority empty, error, and success states.

Prioritize the message over the illustration

When the illustrated message is placed in a container that does not fit all the elements, we recommend removing the illustration so that the user can read the entire message.

Anatomy

Adaptive Design

Variations

Resources

The calendar view provides a visual overview of a week, a month, or multiple months. It can filter and display different types of content, such as events, agendas, or schedules, based on the time dimension.

Usage

• Use calendar view to display a visual overview of a week or a month.
• Use calendar view to filter the information based on days. For example, events, tasks, and deadlines.

• Don’t use calendar view for date selection or multiple date selection in forms. Use pickers instead.
• Don’t use calendar view when the available screen space is limited and displaying the calendar permanently would take up too much space.

Anatomy

The structure is composed of four parts: calendar header (optional), week label container, date label container, and dragging handle (optional).

The space below the calendar view container is available for different configurations. for instance, using object cells as an agenda or timeline as a timesheet.

A. Calendar Header

The calendar header includes the title, subtitle (optional), and buttons.

B. Week Label Container

The week label container displays the seven days of a week. You can customize the format to match your local preference.

C. Date Label Container

The date label container shows all the days of the month/week in a grid view.

D. Dragging Handle (Optional)

The dragging handle provides a visual cue on the dragging behavior to expand the week view and collapse the month view.

Behavior and Interaction

Navigate

To navigate between months/weeks, users can use swiping gestures or tap on buttons. To ensure accessibility, it is important to provide visible navigation buttons that support all input channels such as touch screen, keyboard, and mouse. The buttons can be customized to your preference, for example, icon buttons or text buttons.

Expand and Collapse

If the calendar has a dragging handle (optional), users can expand it from week view to month view by swiping down. Similarly, they can collapse it from month view to week view by swiping up.

Back to Today

If the calendar includes a “back to today” button, the user can return to the current month/week by tapping on the button.

Variations

Calendar Views

There are different types of calendar views. Select the one that best suits the purpose of your app and start designing from there.

1. Month View (Default)
2. Week View
3. Expandable View – Users can switch from the default week view to month view by swiping up on the dragging handle.

Calendar Header

The calendar header provides the following layouts:

1. Left-Aligned

The title is left-aligned. A leading button or icon and a maximum of three trailing buttons are supported.

2. Center-Aligned

The title is center-aligned. A leading button or icon and a maximum of two trailing buttons are recommended.

The header also supports the following types of titles:

1. Single-Line Title

It can be used to show the displayed month and year, or the topic of the calendar.

2. Double-Line Title

It can be used to show the main title together with a subtitle for additional information.

3. Large Title

The title is emphasized by using a larger font size and white space. This design can be applied when showing a calendar on the home screen or at the top of the page.

The text contents can be customized to reflect the month/week on display.

Calendar Week Labels

The format of the calendar week labels can be customized to match your local preference. Besides, the calendar provides the following types of start day of the week:

1. Sunday (Default) – US Standard
2. Monday – Europe, Asia, Oceania Standard
3. Saturday – Middle East Standard

Calendar Day Labels

The calendar supports the following states:

1. Default – days of the month/week being displayed
2. Today – the current system date
3. Selected – the selected date
4. Today + Selected – only appears when the selected date is today
5. Out of Month – days in the previous or next month/week

Status Indicators

The calendar can display status information via status indicators, which should be a set of simple icons that are easy to recognize. A legend row is required to ensure that the status meanings are accessible.

Alternate Calendar

The calendar can show two calendar types on the same frame. The alternate calendar date label is displayed below the primary calendar date label, and the year and month are shown on the subtitle as a default. Below are the available calendar types for both the primary and the secondary calendar:  

1. Gregorian (default primary calendar)
2. Chinese
3. Hebrew
4. Islamic
5. Japanese

Adaptive Design

The calendar view adapts to different window sizes.

In compact windows, the width of the week labels and date labels expand to full width.

In medium windows, the week labels and date labels are fixed to 72dp.

In expanded windows, the week labels and date labels are fixed to 100dp.

Resources

Development: FioriCalendar

SAP Fiori for iOS: Calendar

Related Components/Patterns: Pickers, Object Cell, Timeline View

Card layouts are structured containers that determine how cards are arranged and displayed in a user interface. These layouts control the placement, order, and visual presentation of cards, ensuring an aesthetically pleasing design. The layouts adjust to multiple devices, window size classes, and orientations, ensuring consistency across layouts.

Usage

A layout is used to group cards with similar content, ensuring a visually structured arrangement. The proper usage of a grid layout draws the user’s attention to the most important cards on a page, resulting in improved efficiency and higher quality.

Make sure that the layout is optimized for different window size classes to display the cards in the best way possible. Find more information in the staggered layout and carousel layout articles.

Anatomy

When designing card layouts for native apps, consider the following key factors that determine the horizontal width of the screen.

A. Columns

Content is organized into columns on the screen. This is where the cards are placed.
In responsive layouts, the column width is not defined by fixed values. This allows the content to adjust to any screen size. The number of columns displayed in the grid is determined by the breakpoints of window size classes, ranging from 4, 8, or 12 columns.

B. Gutters

A gutter is the space between columns that helps to visually separate content.
Gutter widths have predefined values at each breakpoint range. To enhance the content’s adaptability to a given screen size, gutter widths can change at different breakpoints.

C. Margins

Margins are the spaces between the content and the left and right edge of a window area. Margin widths are defined by specific values for each window size class and change at different breakpoints to better fit the screen size.

Behavior and Interaction

Scrolling

Cards can be scrolled vertically or horizontally, depending on the layout. You can also combine different layouts, for example, a carousel with cards and a list with cards below it.

Adaptive Design

The layouts are designed to be compatible with multiple devices. They change according to the window size class and automatically adjust the number of columns to ensure a visually appealing and user-friendly layout. Depending on the window size class, the card width and height adjust automatically, ensuring that the content remains fully visible.

If there is a navigation rail or navigation drawer, the number of columns decreases and adjusts to the remaining screen width.

Resources

SAP Fiori for Web: Cards (SAPUI5), Cards (Web Component)

Related Components/Patterns: Carousel Layout, Staggered Layout, Cards Overview

The rating control can be used in various contexts to provide insight regarding the opinions and preferences of an object.

Anatomy

A. Icon

The icons represent the average object rating value through several states: on, off, and half. The states of these icons depict a rating from a scale of one to five.

B. Counter/Label

The counter or label supplements the rating. It can be used to display the number of ratings, the exact rating value, and more.

Behavior and Interaction

The rating control is currently display-only.

Variations

Size

Small vs. Large

The rating control can be displayed in a small or large format depending on the fit to context.

Counter/Label

Without vs. With

The counter or label for the rating can be hidden as needed.

Color

Default vs. Accent

The accent color for the icons can provide a unique variation when needed.

Resources

Development: Rating Control, FioriRating

SAP Fiori for iOS: Rating Control

SAP Fiori for Web: Rating Indicator

The card body is the central part of the card that is used to display additional information alongside the content shown in the card header. By using the card body, several components from the SAP BTP SDK for Android can be integrated into a card, enabling the recreation of card types such as object cards, list cards, and many more.

Usage

While the card body is optional, it can be used for different use cases. To improve user comprehension, we recommend including additional details. Avoid using the card body for complex tasks; instead, provide additional functionality and detailed information on a subsequent details page that users can access by pressing the card.

To maintain compact card sizes, be mindful of not overcrowding the card body with too many components. Additionally, consider the following aspects when adding components to the body:

• Limit the number of components in the card body.
• Use components that are relevant to the context of the card.
• Only use components that are listed below in the Variations section or variants of components that have been adapted for cards.
• Make sure that the placement of the components within the card body is consistent throughout your app. For example, a KPI is placed in the body and centered aligned, other cards in your app should follow the same pattern.

• Don’t include any components in the card body that are not listed below.
• Don’t overcrowd the card body with too many elements.
• Don’t add additional components such as a status or tags to the card body. Use the card header for that.

Anatomy

The card body is a single container that can hold various components. The container is flexible in height to accommodate a reasonable number of UI components until the maximum height of the entire card is reached.

Variations

In addition to the SAP Fiori for Android components that can be added to the card body, the card system also offers variants. These variants are specifically tailored to seamlessly fit within a card. The reduced horizontal and vertical spacing of the variants compared to the default components, ensuring a concise card design.

You can include the following components in the card body: 

Existing Components

A. Avatar row 

B. Header

C. Key value cell

D. Status info label

E. KPIs

F. KPI progress view

G. Illustrated message

H. Calendar

Variants for Cards

A. Card Cell

The card cell component is a simplified version of the object cell, featuring a thumbnail, title, subtitle, footnote, and right accessories. There are a few variations for the right accessories such as a small KPI, status info label, two icon buttons, or a single button.

B. Divider/Spacing 

The divider can be placed between elements to better separate them visually or by hiding the divider a white space can be applied. 

C. Text

The text component can be used to add a short description on the card. The description should provide additional information related to the content. Keep the description short and precise to prevent it from wrapping into multiple lines.

D. Custom Composable

The custom composable allows custom components to be integrated into the body container. It provides flexibility in cases where the existing components included in the body do not support the use case. For example, a diagram or “live” map can be integrated.

E. Image

You can use an image in the card body to highlight information, such as an address of a hotel.

F. Data Table

The data table provides a title for each of the two available columns. You can have up to three entries. To accommodate various use cases, you can configure entries to adjust the text color, icon, and placement of an icon. You can choose to display a divider below the table, along with a text indicating that there are more items in the data set.

Behavior and Interaction

States

Use a suitable illustrated message to communicate different states.

For example, when there is no relevant content or data to be displayed in the body, include an empty state indicator. This indicator serves as an informational message for users, notifying them that there is currently no information or data available, or that new data or information needs to be generated.

Resources

Development: Card System, Card Cell

SAP Fiori for iOS: Card Body

SAP Fiori for Web: Card Content

Related Components/Patterns: Cards Overview, Card Header, Card Footer

The step progress indicator is a progress indicator for tracking and displaying a user’s state in a user flow. It allows the user to navigate to another step in both the horizontal view and the vertical “All Steps” view.

A step can be displayed as either a regular step or a dynamic step.  

Usage

Anatomy

Horizontal View

A. Current Step Name (Optional) 

Name of the selected step. Show the current step name in the header if no step names are displayed under the step nodes. 

B. “All Steps” Button (Optional)

The “All Steps” button shows the total number of steps and directs users to an overview page of the steps. Show the “All Steps” button when the flow is long.

C. Step Node

The step node is a numeric circle that indicates the sequence of the flow. It also indicates the state of the step. You can also use letters or other simples to replace the number.

D. Line

A line is used to connect the nodes. Don’t use a line after the last node.

E. Step Name (Optional)

The step name of each step is shown below the step node. Only show step names when the header of the current step name is disabled.

Vertical View

A. Step Node

The step node is a numeric circle that indicates the sequence of the flow. It also indicates the state of the step. You can also use letters or other simples to replace the number.

B. Line

A line is used to connect the nodes. Don’t use a line after the last node. In the vertical view, the length of the line is dependent on the step name text.

C. Step Name

The step name of each step is shown next to the step node. In the vertical view, show the full text of the step name.

Behavior and Interaction

Text Wrapping

In the horizontal view, a step name allows truncation. In a vertical view, a step name allows text wrapping to show the full text. Always try to be concise for the names. Otherwise, it may distract users when they are focusing on the task on the screen.

The current step name truncates after one line. Full text is available in “All Steps” view.

A step name can wrap up to two lines. Adjust the width of the line to allow more space for the text. If any step name is longer than two lines, use the “All Steps” button to allow users to view the full text

Value States

Default

Idle state of an enabled step.

Active

Selected state of a step.

Complete

Triggered when required actions are complete and users have navigated to another step.

Error

Triggered when users already navigated to another step but required actions of this step are incomplete.

Error Active

Triggered when users tap on a step that has incomplete required actions.

Read-Only

A read-only step is a step that is not tappable.

Navigation and Interaction

Tap on the Node

When users tap on a step indicator node, they are navigated to this specific step.

If the step is already on the screen, the step node stays without moving.

If the user scrolls to tap a step beyond what was on the screen, the selected step is displayed as the first step in the indicator.

View All Steps

Users can tap on the “All Steps” button to view all steps vertically on a new screen.

If the user taps on a step from the “All Steps” list, they are navigated to the selected step. The selected step is displayed as the first step in the indicator.

Scrolling

Users can press and scroll left or right on the step progress indicator to view steps that are outside the screen. The indicator automatically comes back to the active step when users tap anywhere on the screen.

Variations

Dynamic Steps

Dynamic steps are used to indicate a sub-step or an indeterminate step. Same as regular steps, dynamic steps also have different value states: default, active, error, error active, and read-only.

Adaptive Design

A step progress indicator can adapt to both mobile and tablet sizes. For the tablet version, the horizontal step progress bar can have broader width for each step than the mobile version, and the “All Steps” view is displayed in a dialog window.

Resources

Development: StepperProgress

SAP Fiori for iOS: Step Progress Indicator

SAP Fiori for Web: Wizard Floorplan

Related Components/Patterns: Header, Persistent Footer, Dialog

A circular progress indicator is a visual element that displays the status of ongoing processes, such as logging in, uploading files, or refreshing content in a circular shape. It typically consists of a circular track and a moving indicator that fills up the track as the progress increases.

Usage

Anatomy 

Behavior and Interaction 

Variations 

Checkout Use Cases

Checkout use cases are processing states triggered by user actions. During a checkout process, any user action on the affected content is not encouraged; it may interrupt the process. Use only the indeterminate variant in these cases. A checkout use case can be one of the following types:

Resources

Development: FioriCircularProgressIndicator

SAP Fiori for iOS: Feedback Indicators

Material Design: Progress Indicator

A linear progress indicator visually represents the status of ongoing processes, such as logging in, uploading files, or refreshing content by animating an indicator along a fixed track. It communicates the state of an app and indicates available actions, such as whether users can navigate away from the current screen.  

Usage

Anatomy 

Behavior and Interaction 

Variations 

Resources

Development: FioriLinearProgressIndicator, FioriProgressBar

SAP Fiori for iOS: Linear Progress Indicator

Material Design: Progress Indicator