The 3D viewport control can display simple and complex 3D objects in SAP Fiori, including basic user interaction.
The 3D viewport control can display simple and complex 3D objects in SAP Fiori, including basic user interaction.
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.
The analytical list page offers step-by-step analysis with data visualization for investigating root causes and taking action.
Analytical tables offer powerful options for working with the data, including advanced grouping and aggregations.
An area micro chart is a trend chart, which provides information for actual and target values for a specific time range.
The avatar is a control that has various display options for representing images, icons, and initials.
The avatar group displays a set of avatars that represent people.
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.
A bullet chart is a variation of a bar graph, and serves as a replacement for dashboard gauges and meters.
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 the button, or by pressing a corresponding key.
The calculation builder can be used to create complex arithmetic expressions using arithmetic and logical operators.
The calendar control lets users select a single date, multiple days, entire weeks, or a date range.
The calendar card shows a schedule for a single entity (such as a person) for a selected time interval.
The calendar date interval control displays a range of days in a single row, saving on horizontal space.
A card represents an app or page. It can be used to launch the app or navigate to the page content.
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 explains how to use patterns like dashes, dots or hatches to distinguish actual, projected, and reference values.
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.
The article explains how to use different charts to visualize the relationship between sets of numerical values.
Overview of the charts you can use to visualize how values are distributed within a set.
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.
The legend explains the meaning of all the visual elements in the chart.
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 explains how to choose the correct chart for ranking items based on numeric values.
Add reference lines to highlight a particular value.
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 popover displays information or actions related to the selected data points.
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.
The color palette allows the user to choose a color from a predefined set of colors.
The color palette popover combines the color palette and color picker.
The color picker popover consists of a color picker within a popover.
Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age or ratings).
A column chart uses rectangular bars to compare multiple values over time or across categories.
The combo box lets users select an item from a predefined list. It has both an input field and a dropdown menu.
The comparison chart is a bar chart for comparing the top n entries in a list.
The comparison pattern displays information from multiple items side by side on the same page.
Use waterfall charts to analyze a cumulative value.
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 delta micro chart helps to visualize a delta value (difference) between two main key figures.
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.
Standalone control that offers a choice of absolute and relative dates.
The dynamic page is a flexible, responsive layout control designed to support various floorplans and use cases.
The expandable text control provides access to truncated text.
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 flexible column layout displays multiple floorplans on a single page for faster and more fluid navigation.
The flexible grid control allows you to divide a layout into multiple columns and rows in which you can place UI elements.
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.
The formatted text control displays HTML text. You can format the text using HTML tags, or embed formatted text.
The Gantt chart shows the sequence in which various activities occur and the dependencies between these activities.
The generic tag displays complementary information that relates to the current page, such as KPIs and situations.
A grid list displays items using images, charts, object cards, or other formats that benefit from more height (but less width).
A grid table can handle large numbers of items and columns, but is not fully responsive.
You can use the group feed component to offer a social timeline that is integrated with SAP Jam.
You can use a Harvey Ball chart to visualize a value compared to its total.
The header toolbar is always visible at the top of the page, and contains actions that are relevant for the entire page.
The HTML control allows you to display rich text or add freestyle HTML to your apps.
The icon tab bar comprises a series of tabs that each link to a different content area or view.
An illustrated message is a combination of a solution-oriented message and a UX illustration.
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.
…the examples below, the input field is shown in combination with the tabular autocomplete feature for different device sizes. Note that when tabular suggestions are used, the column headers stay sticky when scrolling within the suggestion list. Size S (Smartphones) Cozy mode: When the user clicks the input field, a…
The input list item comprises a label and input UI element. This control has largely been replaced by forms.
The interactive chart is used for visual-based filtering in the visual filter bar within the analytical list page.
The invisible message control provides a hidden message that can be used by assistive technologies.
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 letterboxing layoput restricts the user interface to a certain width to preserve the original aspect ratio.
The lightbox control allows the user to view an image in its original size.
A line chart displays information as a series of data points connected by straight lines.
The line micro chart shows as a series of data points connected by a line. It is typically used to visualize a trend over time.
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 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 message box is a special dialog for displaying error, warning, information, and success messages.
The message popover can display multiple messages without interrupting the user.
An embedded message bar that contains information about an object or a status.
A message toast is a non-disruptive popup for success messages, which disappears after a few seconds.
The message view can display multiple messages triggered by a user action (not related to form/table fields).
Micro charts help you visualize a small number of data points, and can be embedded in other controls.
The micro process flow visualizes the state of individual items in a workflow, and can be embedded in a list or a table.
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 floorplan allows users to open multiple documents in a tabbed view.
The network graph displays a large amount of data by highlighting relationships between individual records.
Object display components represent key object attributes, such as the object ID or status.
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 object page floorplan is the recommended floorplan for displaying, creating, and editing business objects.
The overview page is a data-driven SAP Fiori app that provides all the information a user needs in a single page.
The panel is a container for grouping and displaying information. It can be collapsed to save space.
The PDF Viewer control enables PDF documents to be displayed, printed and downloaded within your app.
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.
You can use the radial micro chart to display a single percentage value.
Use radio buttons if you want the user to select only one option from a group of mutually exclusive alternatives.
The range selector is a user interface control that enables the user to select a range of data points in a data set.
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.
…smartphones. Comparing items is a major use case. In this case, the analytical table or grid table might be more appropriate because each cell contains only one data point. By contrast, the responsive table offers greater flexibility within line items, including the ability to add more data points per cell…
The rich text editor is a text input control that lets users format the text and insert different types of elements.
The scroll container is an empty area that can be filled with content, such as other UI elements.
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.
Area that can be expanded on the side of an app page to show related information and actions.
The single planning calendar displays the calendar of a single person or resource over a day, work week, or week.
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 chart is a wrapper around existing chart types, which can be used together with all existing chart types within VizFrame.
The smart field creates different user input controls automatically based on an OData service and its annotations.
The smart form control creates a form, including a toolbar and title. It is typically used together with smart fields.
The smart link triggers a popover with additional information and links to related apps.
You can use the smart list control to create lists or trees.
The smart table is a wrapper for SAP Fiori tables that lets you reuse back-end data structures and generic features.
The stacked bar micro chart can be used to visualize single values as part of a whole.
You can use the standard list item to display a simple set of data in a select dialog or (non-object) master list.
The status indicator control shows status values as fill levels within a shape.
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.
Control that allows you to display one or more ledger accounts in T-Account format.
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.
Treemaps display hierarchical data as a cluster of rectangles varying in size and color, depending on their data value.
The upload set 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.
The view settings dialog allows the user to sort, filter, or group data within a (master) list or a table.
Variant management allows users to save and load different sets of filter or table settings.
The visual filter bar offers a unique way of filtering large datasets through vizualisations.
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!