3D Viewport The 3D viewport control can display simple and complex 3D objects in SAP Fiori, including basic user interaction. Category: UI Elements Type: Data Visualization
Action List Item The action list item control lets the user trigger actions directly from a list. Used in dialog boxes and popovers. Category: UI Elements Type: -
Action Sheet An action sheet lets you to display a list of actions for the user to choose from. You can also cluster actions. Category: UI Elements Type: Action / Navigation
Analytical Card Analytical cards visualize data on an overview page. Each card has a header/KPI area and a chart area. Category: UI Elements Type: Data Visualization
Analytical List Page The analytical list page offers step-by-step analysis with data visualization for investigating root causes and taking action. Category: Floorplans Type: -
Analytical Table (ALV) Analytical tables offer powerful options for working with the data, including advanced grouping and aggregations. Category: UI Elements Type: Table / List / Tree
Area Micro Chart An area micro chart is a trend chart, which provides information for actual and target values for a specific time range. Category: UI Elements Type: Data Visualization
Avatar The avatar is a control that has various display options for representing images, icons, and initials. Category: UI Elements Type: Display
Avatar Group The avatar group displays a set of avatars that represent people. Category: UI Elements Type: Display
Breadcrumb A breadcrumb is a type of secondary navigation that indicates the position of a page in a hierarchy. Category: UI Elements Type: Action / Navigation
Bullet Chart The bullet chart is used to compare primary and secondary (comparison) values. Category: UI Elements Type: Data Visualization
Bullet Micro Chart A bullet chart is a variation of a bar graph, and serves as a replacement for dashboard gauges and meters. Category: UI Elements Type: Data Visualization
Busy Dialog The busy dialog informs the user about an ongoing operation. During the operation the entire screen is blocked. Category: UI Elements Type: Loading / Processing
Busy Indicator The busy indicator informs the user about an ongoing operation. Category: UI Elements Type: Loading / Processing
Busy State You can set a busy state for each SAPUI5 control. This function adapts to the space available on the UI. Category: UI Elements Type: Loading / Processing
Button Buttons allow users to trigger actions – either by clicking the button, or by pressing a corresponding key. Category: UI Elements Type: Action / Navigation
Calculation Builder The calculation builder can be used to create complex arithmetic expressions using arithmetic and logical operators. Category: UI Elements Type: Reuse Components
Calendar The calendar control lets users select a single date, multiple days, entire weeks, or a date range. Category: UI Elements Type: User Input
Calendar Card The calendar card shows a schedule for a single entity (such as a person) for a selected time interval. Category: UI Elements Type: Data Visualization
Calendar Date Interval The calendar date interval control displays a range of days in a single row, saving on horizontal space. Category: UI Elements Type: User Input
Card A card represents an app or page. It can be used to launch the app or navigate to the page content. Category: UI Elements Type: Form / Layout / Container
Carousel The carousel is a control for browsing through a set of items one item at a time. Category: UI Elements Type: Display, Form / Layout / Container
Chart – Deviation This article explains how to visualize the deviation (difference or variance) between two measures. Category: UI Elements Type: Data Visualization
Chart – Semantic Patterns This article explains how to use patterns like dashes, dots or hatches to distinguish actual, projected, and reference values. Category: UI Elements Type: Data Visualization
Chart – Variation Over Time This article illustrates the different ways you can visualize changes of measures through time. Category: UI Elements Type: Data Visualization
Chart – Color Palette – Values and Names This page provides all the color names in the chart palettes. Category: UI Elements Type: Data Visualization
Chart – Color Palettes This article explains the three chart visualization color palettes and how you can leverage their unique properties. Category: UI Elements Type: Data Visualization
Chart – Comparison This article will help you choose the correct chart for comparing items that do not need to be displayed in a particular order. Category: UI Elements Type: Data Visualization
Chart – Correlation The article explains how to use different charts to visualize the relationship between sets of numerical values. Category: UI Elements Type: Data Visualization
Chart – Distribution Overview of the charts you can use to visualize how values are distributed within a set. Category: UI Elements Type: Data Visualization
Chart – Embedding This article explains how to embed an SAP Fiori chart in an app to ensure the correct size and scrolling behavior. Category: UI Elements Type: Data Visualization
Chart – Gestures The following gestures are available in charts: tap, press and drag, drag or slide, flick, or spread or pinch. Category: UI Elements Type: Data Visualization
Chart – Legend The legend explains the meaning of all the visual elements in the chart. Category: UI Elements Type: Data Visualization
Chart – Number and Time Format This article explains how numbers and time information can be configured to users’ local settings. Category: UI Elements Type: Data Visualization
Chart – Part to Whole This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage). Category: UI Elements Type: Data Visualization
Chart – Ranking This article explains how to choose the correct chart for ranking items based on numeric values. Category: UI Elements Type: Data Visualization
Chart – Reference Lines Add reference lines to highlight a particular value. Category: UI Elements Type: Data Visualization
Chart – Selection This article describes the different ways users can select one or more data points. Category: UI Elements Type: Data Visualization
Chart – Time Axis The time axis shows the variation of values through time (years, quarters, months, weeks, days, and so on). Category: UI Elements Type: Data Visualization
Chart – Value Display This article describes how value labels are displayed and how you can customize them. Category: UI Elements Type: Data Visualization
Chart – Value-Based Legend The value-based legend is used to visually represent value ranges through color shades. Category: UI Elements Type: Data Visualization
Chart – Zoom The zoom function enables users to change the scale of an axis on a chart. Category: UI Elements Type: Data Visualization
Chart (VizFrame) You can use the VizFrame control to display different types of chart that are both interactive and responsive. Category: UI Elements Type: Data Visualization
Chart Popover The chart popover displays information or actions related to the selected data points. Category: UI Elements Type: Data Visualization
Chart Toolbar The chart toolbar acts as a container for charts. It comes with built-in actions for the table display and personalization. Category: UI Elements Type: Toolbar
Checkbox A checkbox indicates whether a state is true (checked) or false (unchecked). Users can check multiple options. Category: UI Elements Type: User Input
Color Palette The color palette allows the user to choose a color from a predefined set of colors. Category: UI Elements Type: User Input
Color Palette Popover The color palette popover combines the color palette and color picker. Category: UI Elements Type: User Input
Color Picker Popover The color picker popover consists of a color picker within a popover. Category: UI Elements Type: User Input
Column Chart Column charts are used to compare multiple values over time, or values that have an intrinsic order (such as age or ratings). Category: UI Elements Type: Data Visualization
Column Micro Chart A column chart uses rectangular bars to compare multiple values over time or across categories. Category: UI Elements Type: Data Visualization
Combo Box The combo box lets users select an item from a predefined list. It has both an input field and a dropdown menu. Category: UI Elements Type: User Input
Comparison Micro Chart The comparison chart is a bar chart for comparing the top n entries in a list. Category: UI Elements Type: Data Visualization
Comparison Pattern The comparison pattern displays information from multiple items side by side on the same page. Category: Page Layouts Type: -
Cumulation (Waterfall Chart) Use waterfall charts to analyze a cumulative value. Category: UI Elements Type: Data Visualization
Currency The currency control lets you align amounts with different currencies vertically at the decimal point. Category: UI Elements Type: Display
Date Picker The date picker lets users pick a localized date using touch, mouse, or keyboard input. Category: UI Elements Type: User Input
Date Range Selection Users can type in a localized date range manually, or select a date range in the calendar. Category: UI Elements Type: User Input
Date/Time Picker The date/time input control allows users to select a combination of date and time. Category: UI Elements Type: User Input
Delta Micro Chart The delta micro chart helps to visualize a delta value (difference) between two main key figures. Category: UI Elements Type: Data Visualization
Dialog The dialog control interrupts the current app process to prompt the user for information or a response. Category: UI Elements Type: Dialog / Popover
Display List Item Display list items are simple list items comprising a label and a text. They have largely been replaced by forms. Category: UI Elements Type: -
Dynamic Date Range Standalone control that offers a choice of absolute and relative dates. Category: UI Elements Type: User Input
Dynamic Page The dynamic page is a flexible, responsive layout control designed to support various floorplans and use cases. Category: Page Layouts Type: -
Expandable Text The expandable text control provides access to truncated text. Category: UI Elements Type: Display
Feed and Notes A combination of controls to input and post plain text, and to display the text alongside the user’s name. Category: UI Elements Type: Collaboration, User Input
Filter Bar The filter bar lets users filter item lists and tables by various criteria, and create custom filter variants. Category: UI Elements Type: Filter, User Input
Flexible Column Layout The flexible column layout displays multiple floorplans on a single page for faster and more fluid navigation. Category: Page Layouts Type: -
Flexible Grid The flexible grid control allows you to divide a layout into multiple columns and rows in which you can place UI elements. Category: UI Elements Type: Form / Layout / Container
Footer Toolbar The footer toolbar at the bottom of the screen is used for key actions that impact the whole page. Category: UI Elements Type: Toolbar
Form / Simple Form Forms display other UI elements (such as labels, input fields, checkboxes, and sliders) in a structured layout. Category: UI Elements Type: Form / Layout / Container
Formatted Text The formatted text control displays HTML text. You can format the text using HTML tags, or embed formatted text. Category: UI Elements Type: Display
Gantt Chart The Gantt chart shows the sequence in which various activities occur and the dependencies between these activities. Category: UI Elements Type: Data Visualization
Generic Tag The generic tag displays complementary information that relates to the current page, such as KPIs and situations. Category: UI Elements Type: Display
Grid List A grid list displays items using images, charts, object cards, or other formats that benefit from more height (but less width). Category: UI Elements Type: Table / List / Tree
Grid Table A grid table can handle large numbers of items and columns, but is not fully responsive. Category: UI Elements Type: Table / List / Tree
Group Feed Component You can use the group feed component to offer a social timeline that is integrated with SAP Jam. Category: UI Elements Type: Collaboration
Harvey Ball Micro Chart You can use a Harvey Ball chart to visualize a value compared to its total. Category: UI Elements Type: Data Visualization
Header Toolbar The header toolbar is always visible at the top of the page, and contains actions that are relevant for the entire page. Category: UI Elements Type: Toolbar
HTML The HTML control allows you to display rich text or add freestyle HTML to your apps. Category: UI Elements Type: Display
Icon Tab Bar The icon tab bar comprises a series of tabs that each link to a different content area or view. Category: UI Elements Type: Action / Navigation, Filter, Form / Layout / Container
Illustrated Message An illustrated message is a combination of a solution-oriented message and a UX illustration. Category: UI Elements Type: Messaging
Image You can use the image control to insert responsive images in various places within an app. Category: UI Elements Type: Display
Infobar The infobar is a type of toolbar that appears above a list or panel, and shows filter or selection settings. Category: UI Elements Type: Display, Filter
Initial Page Floorplan Use the “Initial Page” floorplan if the user needs to navigate to a single object in as few steps as possible. Category: Floorplans Type: -
Input Field …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… Category: UI Elements Type: User Input
Input List Item The input list item comprises a label and input UI element. This control has largely been replaced by forms. Category: UI Elements Type: -
Interactive Chart The interactive chart is used for visual-based filtering in the visual filter bar within the analytical list page. Category: UI Elements Type: Data Visualization
Invisible Message The invisible message control provides a hidden message that can be used by assistive technologies. Category: UI Elements Type: Support for Assistive Technologies
Invisible Text The invisible text control provides a simple hidden text that can be used by assistive technologies. Category: UI Elements Type: Support for Assistive Technologies
Label A label is the name or title of a control or group of related controls. Category: UI Elements Type: Display
Letterboxing The letterboxing layoput restricts the user interface to a certain width to preserve the original aspect ratio. Category: Page Layouts Type: -
Lightbox The lightbox control allows the user to view an image in its original size. Category: UI Elements Type: Display
Line Chart A line chart displays information as a series of data points connected by straight lines. Category: UI Elements Type: Data Visualization
Line Micro Chart 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. Category: UI Elements Type: Data Visualization
Link A link is a clickable text element that can be used for navigation or to trigger an event. Category: UI Elements Type: Action / Navigation
List The list control displays a simple data set that the user can sort, filter, or group. Category: UI Elements Type: Table / List / Tree
List Report Floorplan The list report floorplan allows the user to work with a large, filterable list of items and take action. Category: Floorplans Type: -
Map A map is a symbolic visual illustration of areas, regions, and themes. Maps can be analytical or geographic. Category: UI Elements Type: Data Visualization
Mask Input The mask input control governs what a user is allowed to enter in an input field. Category: UI Elements Type: User Input
Message Box The message box is a special dialog for displaying error, warning, information, and success messages. Category: UI Elements Type: Dialog / Popover, Messaging
Message Popover The message popover can display multiple messages without interrupting the user. Category: UI Elements Type: Dialog / Popover, Messaging
Message Strip An embedded message bar that contains information about an object or a status. Category: UI Elements Type: Messaging
Message Toast A message toast is a non-disruptive popup for success messages, which disappears after a few seconds. Category: UI Elements Type: Messaging
Message View The message view can display multiple messages triggered by a user action (not related to form/table fields). Category: UI Elements Type: Messaging
Micro Chart Micro charts help you visualize a small number of data points, and can be embedded in other controls. Category: UI Elements Type: Data Visualization
Micro Process Flow The micro process flow visualizes the state of individual items in a workflow, and can be embedded in a list or a table. Category: UI Elements Type: Data Visualization
Multi-Combo Box The multi-combo box lets users select one or more options from a predefined list, and has an input box for filtering. Category: UI Elements Type: User Input
Multi-Input Field A multi-input field allows the user to enter multiple values, which are displayed as tokens. Category: UI Elements Type: User Input
Multi-Instance Layout The multi-instance floorplan allows users to open multiple documents in a tabbed view. Category: Page Layouts Type: -
Network Graph The network graph displays a large amount of data by highlighting relationships between individual records. Category: UI Elements Type: Data Visualization
Object Display Components Object display components represent key object attributes, such as the object ID or status. Category: UI Elements Type: Display
Object List Item The object list item provides a quick overview of an object in a list, typically in the master list of a split-screen app. Category: UI Elements Type: -
Object Page Floorplan The object page floorplan is the recommended floorplan for displaying, creating, and editing business objects. Category: Floorplans Type: -
Overview Page The overview page is a data-driven SAP Fiori app that provides all the information a user needs in a single page. Category: Floorplans Type: -
P13n Dialog The P13n dialog control tabs allow users to personalize table and smart chart attributes. Table Personalization Tabs Columns: Visibility and order of columns Sort: Sort criteria for table items Filter: Filter criteria for table items Group: Grouping table items by specific attributes The tabs can be shown in any combination, as required by the use [...] Category: UI Elements Type: Table / List / Tree, User Input
Panel The panel is a container for grouping and displaying information. It can be collapsed to save space. Category: UI Elements Type: Form / Layout / Container
PDF Viewer The PDF Viewer control enables PDF documents to be displayed, printed and downloaded within your app. Category: UI Elements Type: Display, Reuse Components
Planning Calendar The planning calendar allows users to see parallel appointments and create new events. Category: UI Elements Type: User Input
Popover A popover displays additional information for an object, and can also offer actions. Category: UI Elements Type: Dialog / Popover
Process Flow You can use the process flow control to represent the stages in a business process (such as approval). Category: UI Elements Type: Data Visualization
Progress Indicator The progress indicator shows the current completion status for a business process (static value). Category: UI Elements Type: Display
Quick View The quick view is similar to a popover, but has a predefined structure and automatic UI rendering. Category: UI Elements Type: Dialog / Popover
Radial Micro Chart You can use the radial micro chart to display a single percentage value. Category: UI Elements Type: Data Visualization
Radio Button Use radio buttons if you want the user to select only one option from a group of mutually exclusive alternatives. Category: UI Elements Type: User Input
Range Selector The range selector is a user interface control that enables the user to select a range of data points in a data set. Category: UI Elements Type: Data Visualization
Range Slider The range slider enables the user to select a value range within a predefined numerical interval. Category: UI Elements Type: User Input
Rating Indicator You can use the rating indicator to let users rate content, or to display a content rating. Category: UI Elements Type: User Input
Responsive Table …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… Category: UI Elements Type: Table / List / Tree
Rich Text Editor The rich text editor is a text input control that lets users format the text and insert different types of elements. Category: UI Elements Type: User Input
Scroll Container The scroll container is an empty area that can be filled with content, such as other UI elements. Category: UI Elements Type: Form / Layout / Container
Search The search field enables users to search for information or filter data by entering key words as text. Category: UI Elements Type: User Input
Select The select control (also known as a dropdown) allows users to select an item from a predefined list. Category: UI Elements Type: User Input
Select Dialog The select dialog enables users to select one or more items from a comprehensive and searchable list. Category: UI Elements Type: Dialog / Popover, User Input
Side Panel Area that can be expanded on the side of an app page to show related information and actions. Category: UI Elements Type: Form / Layout / Container
Single Planning Calendar The single planning calendar displays the calendar of a single person or resource over a day, work week, or week. Category: UI Elements Type: User Input
Size of the Chart Container The property “autoAdjustHeight” helps to correctly manage the sizes of charts contained in a chart container. Category: UI Elements Type: Data Visualization
Slider A slider is a control that enables the user to adjust single values within a specified numerical range. Category: UI Elements Type: User Input
Smart Chart The smart chart is a wrapper around existing chart types, which can be used together with all existing chart types within VizFrame. Category: UI Elements Type: Data Visualization
Smart Field The smart field creates different user input controls automatically based on an OData service and its annotations. Category: UI Elements Type: Smart Controls, User Input
Smart Form The smart form control creates a form, including a toolbar and title. It is typically used together with smart fields. Category: UI Elements Type: Form / Layout / Container, Smart Controls
Smart Link The smart link triggers a popover with additional information and links to related apps. Category: UI Elements Type: Action / Navigation, Smart Controls
Smart List You can use the smart list control to create lists or trees. Category: UI Elements Type: Smart Controls, Table / List / Tree
Smart Table The smart table is a wrapper for SAP Fiori tables that lets you reuse back-end data structures and generic features. Category: UI Elements Type: Smart Controls, Table / List / Tree
Stacked Bar Micro Chart The stacked bar micro chart can be used to visualize single values as part of a whole. Category: UI Elements Type: Data Visualization
Standard List Item You can use the standard list item to display a simple set of data in a select dialog or (non-object) master list. Category: UI Elements Type: -
Status Indicator The status indicator control shows status values as fill levels within a shape. Category: UI Elements Type: Data Visualization, Display
Step Input The step input control allows the user to adjust numeric values in predefined increments (steps). Category: UI Elements Type: User Input
Switch The toggle switch mimics a physical switch that allows users to turn things on or off. Category: UI Elements Type: User Input
T Account Control that allows you to display one or more ledger accounts in T-Account format. Category: UI Elements Type: Display
Table Personalization Dialog This personalization dialog for small tables allows users to show/hide columns, and sort and filter the entries. Category: UI Elements Type: User Input
Table Select Dialog The table select dialog is a table-based selection list. It allows you to show comprehensive data for each item. Category: UI Elements Type: Dialog / Popover, User Input
Table Toolbar The table toolbar appears above a table and is used for key actions that impact the entire table. Category: UI Elements Type: Toolbar
Text You can use the text control to display text inside a form, table, or any other content area. Category: UI Elements Type: Display
Text Area The text area is an input control that allows the user to enter multiple lines of text. Category: UI Elements Type: User Input
Time Picker The time picker allows the user to select a localized time, an exact duration, or a time range (with two time pickers). Category: UI Elements Type: User Input
Timeline The timeline control shows objects, events, or posts in chronological order, with the most recent entry on top. Category: UI Elements Type: Collaboration, Data Visualization
Title The title control is a simple, one-line text with additional semantic information for accessibility purposes. Category: UI Elements Type: Display
Token Tokens visualize previously selected items, and are similar to tags. Users can add, remove, select, or deselect tokens. Category: UI Elements Type: Display, Filter
Tree The tree control allows you to display a basic hierarchy, for example, in a master list or dialog. Category: UI Elements Type: Table / List / Tree
Tree Table A tree table contains a hierarchical set of data that is structured in rows and columns and grouped into nodes. Category: UI Elements Type: Table / List / Tree
Treemap Chart Treemaps display hierarchical data as a cluster of rectangles varying in size and color, depending on their data value. Category: UI Elements Type: Data Visualization
Upload Set The upload set control allows users to upload single or multiple files to an SAP Fiori app. Category: UI Elements Type: User Input
Value Help Dialog The value help dialog helps the user find and select single or multiple values, based on different attributes. Category: UI Elements Type: Dialog / Popover, User Input
View Settings Dialog The view settings dialog allows the user to sort, filter, or group data within a (master) list or a table. Category: UI Elements Type: Table / List / Tree
Views (Variant Management) Variant management allows users to save and load different sets of filter or table settings. Category: UI Elements Type: Filter
Visual Filter Bar The visual filter bar offers a unique way of filtering large datasets through vizualisations. Category: UI Elements Type: Filter
Wizard Floorplan You can use the wizard floorplan to guide users through a long or unfamiliar task by dividing it into sections. Category: Floorplans Type: -
Worklist Floorplan The worklist floorplan shows a list of items the user needs to process. The focus is on completing the tasks. Category: Floorplans Type: -