Action List Item
The action list item control lets the user trigger actions directly from a list. Used in dialog boxes and popovers.
The action list item control lets the user trigger actions directly from a list. Used in dialog boxes and popovers.
An action sheet lets you to display a list of actions for the user to choose from. You can also cluster actions.
Analytical cards visualize data on an overview page. Each card has a header/KPI area and a chart area.
Analytical tables offer powerful options for working with the data, including advanced grouping and aggregations.
A breadcrumb is a type of secondary navigation that indicates the position of a page in a hierarchy.
The bullet chart is used to compare primary and secondary (comparison) values.
This article provides guidelines for using color to indicate primary values in bullet charts.
The busy dialog informs the user about an ongoing operation. During the operation the entire screen is blocked.
The busy indicator informs the user about an ongoing operation.
You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI.
Buttons allow users to trigger actions – either by clicking or tapping the button, or by pressing a corresponding key.
The calendar date interval control displays a range of days in a single row, saving on horizontal space.
The carousel is a control for browsing through a set of items one item at a time.
This article explains how to visualize the deviation (difference or variance) between two measures.
This article illustrates the different ways you can visualize changes of measures through time.
This page provides all the color names in the chart palettes.
This article explains the three chart visualization color palettes and how you can leverage their unique properties.
This article will help you choose the correct chart for comparing items that do not need to be displayed in a particular order.
This article explains how to embed an SAP Fiori chart in an app to ensure the correct size and scrolling behavior.
The following gestures are available in charts: tap, press and drag, drag or slide, flick, or spread or pinch.
This article explains how numbers and time information can be configured to users’ local settings.
This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).
This article describes the different ways users can select one or more data points.
The time axis shows the variation of values through time (years, quarters, months, weeks, days, and so on).
This article describes how value labels are displayed and how you can customize them.
The value-based legend is used to visually represent value ranges through color shades.
The zoom function enables users to change the scale of an axis on a chart.
You can use the VizFrame control to display different types of chart that are both interactive and responsive.
The chart toolbar acts as a container for charts. It comes with built-in actions for the table display and personalization.
A checkbox indicates whether a state is true (checked) or false (unchecked). Users can check multiple options.
Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age or ratings).
The combo box lets users select an item from a predefined list. It has both an input field and a dropdown menu.
The contextual filter allows you to show a prefiltered view of a large or complex list.
Use the “Create Page” floorplan when you need to create a new object in a full screen or split-screen layout.
The currency control lets you align amounts with different currencies vertically at the decimal point.
The date picker lets users pick a localized date using touch, mouse, or keyboard input.
Users can type in a localized date range manually, or select a date range in the calendar.
The date/time input control allows users to select a combination of date and time.
The dialog control interrupts the current app process to prompt the user for information or a response.
Display list items are simple list items comprising a label and a text. They have largely been replaced by forms.
A combination of controls to input and post plain text, and to display the text alongside the user’s name.
The filter bar lets users filter item lists and tables by various criteria, and create custom filter variants.
The footer toolbar at the bottom of the screen is used for key actions that impact the whole page.
Forms display other UI elements (such as labels, input fields, checkboxes, and sliders) in a structured layout.
Use the full screen layout to display large amounts of data, large visualizations, or wide tables.
The Gantt chart shows the sequence in which various activities occur and the dependencies between these activities.
A grid table can handle large numbers of items and columns, but is not fully responsive.
The header toolbar is always visible at the top of the page, and contains actions that are relevant for the entire page.
The icon tab bar comprises a series of tabs that each link to a different content area or view.
You can use the image control to insert responsive images in various places within an app.
The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings.
Use the “Initial Page” floorplan if the user needs to navigate to a single object in as few steps as possible.
A text input field allows users to enter and edit text or numeric values in one line.
The input list item comprises a label and input UI element. This control has largely been replaced by forms.
The invisible text control provides a simple hidden text that can be used by assistive technologies.
A label is the name or title of a control or group of related controls.
The lightbox control allows the user to view an image in its original size.
A link is a clickable text element that can be used for navigation or to trigger an event.
The list control displays a simple data set that the user can sort, filter, or group.
The SAP Fiori element “List Report” is an implementation of the list report floorplan as a reusable template.
The list report floorplan allows the user to work with a large, filterable list of items and take action.
A map is a symbolic visual illustration of areas, regions, and themes. Maps can be analytical or geographic.
The mask input control governs what a user is allowed to enter in an input field.
The menu button allows you to offer multiple options in a dropdown list.
The message box is a special dialog for displaying error, warning, information, and success messages.
Message pages give feedback to the user when an app or list is empty, or when an error has occurred.
The message popover control can display multiple messages without interrupting the user.
A message toast is a non-disruptive popup for success messages, which disappears after a few seconds.
Micro charts help you visualize a small number of data points, and can be embedded in other controls.
The multi-combo box lets users select one or more options from a predefined list, and has an input box for filtering.
A multi-input field allows the user to enter multiple values, which are displayed as tokens.
The multi instance handling floorplan allows users to open multiple documents in a tabbed view.
Object display components represent key object attributes, such as the object ID or status.
An object header is the first element on a page for a single object (object view or flat object view).
The object list item provides a quick overview of an object in a list, typically in the master list of a split-screen app.
The snapping header is the top element of the object page floorplan, and contains key information on an object.
The object page floorplan is the recommended floorplan for displaying, creating, and editing business objects.
The object view is a floorplan for displaying objects (predecessor to the object page floorplan).
A reusable component for managing the output process for business documents (such as sales orders or billing documents).
The overview page is a data-driven Fiori app that provides all the information a user needs in a single page.
The P13n dialog allows you to build analytical tables with extensive personalization options.
The panel is a container for grouping and displaying information. It can be collapsed to save space.
The planning calendar allows users to see parallel appointments and create new events.
A popover displays additional information for an object, and can also offer actions.
You can use the process flow control to represent the stages in a business process (such as approval).
The progress indicator shows the current completion status for a business process (static value).
The quick view is similar to a popover, but has a predefined structure and automatic UI rendering.
Use radio buttons if you want the user to select only one option from a group of mutually exclusive alternatives.
The range slider enables the user to select a value range within a predefined numerical interval.
You can use the rating indicator to let users rate content, or to display a content rating.
Add reference lines to highlight a particular value.
The responsive table is the default table in SAP Fiori. It supports various features at line item level.
The search field enables users to search for information or filter data by entering key words as text.
The select control (also known as a dropdown) allows users to select an item from a predefined list.
The select dialog enables users to select one or more items from a comprehensive and searchable list.
The property “autoAdjustHeight” helps to correctly manage the sizes of charts contained in a chart container.
A slider is a control that enables the user to adjust single values within a specified numerical range.
The smart link triggers a popover with additional information and links to related apps.
The smart table is a wrapper for SAP Fiori tables that lets you reuse back-end data structures and generic features.
The split-screen layout is optimized for working on a list of items (master list on the left, selected item on the right).
You can use the standard list item to display a simple set of data in a select dialog or (non-object) master list.
The step input control allows the user to adjust numeric values in predefined increments (steps).
The toggle switch mimics a physical switch that allows users to turn things on or off.
This personalization dialog for small tables allows users to show/hide columns, and sort and filter the entries.
The table select dialog is a table-based selection list. It allows you to show comprehensive data for each item.
The table toolbar appears above a table and is used for key actions that impact the entire table.
You can use the text control to display text inside a form, table, or any other content area.
The text area is an input control that allows the user to enter multiple lines of text.
The time picker allows the user to select a localized time, an exact duration, or a time range (with two time pickers).
The timeline control shows objects, events, or posts in chronological order, with the most recent entry on top.
The title control is a simple, one-line text with additional semantic information for accessibility purposes.
Tokens visualize previously selected items, and are similar to tags. Users can add, remove, select, or deselect tokens.
The tree control allows you to display a basic hierarchy, for example, in a master list or dialog.
A tree table contains a hierarchical set of data that is structured in rows and columns and grouped into nodes.
The upload collection control allows users to upload single or multiple files to an SAP Fiori app.
The value help dialog helps the user find and select single or multiple values, based on different attributes.
Variant management allows users to save and load different sets of filter or table settings.
The view settings dialog allows the user to sort, filter, or group data within a (master) list or a table.
You can use the wizard floorplan to guide users through a long or unfamiliar task by dividing it into sections.
Processing your feedback
Thank you for your helping us to improve our guidelines!