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 - SAPUI5 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 - SAPUI5 Type: Action / Navigation
Analytical Table (ALV) Analytical tables offer powerful options for working with the data, including advanced grouping and aggregations. Category: UI Elements - SAPUI5 Type: Table / List / Tree
Bullet Chart The bullet chart is used to compare primary and secondary (comparison) values. Category: UI Elements - SAPUI5 Type: Data Visualization
Bullet Chart – Color Use for Primary Values This article provides guidelines for using color to indicate primary values in bullet charts. Category: UI Elements - SAPUI5 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 - SAPUI5 Type: Loading / Processing
Busy Indicator The busy indicator informs the user about an ongoing operation. Category: UI Elements - SAPUI5 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 - SAPUI5 Type: Loading / Processing
Button Buttons allow users to trigger actions – either by clicking or tapping the button, or by pressing a corresponding key. Category: UI Elements - SAPUI5 Type: Action / Navigation
Carousel The carousel is a control for browsing through a set of items one item at a time. Category: UI Elements - SAPUI5 Type: Display, Form / Layout / Container
Chart – Number and Time Format This article explains how numbers and time information can be configured to users’ local settings. Category: UI Elements - SAPUI5 Type: Data Visualization
Chart – Value Display This article describes how value labels are displayed and how you can customize them. Category: UI Elements - SAPUI5 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 - SAPUI5 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 - SAPUI5 Type: Toolbar
Checkbox A checkbox indicates whether a state is true (checked) or false (unchecked). Users can check multiple options. Category: UI Elements - SAPUI5 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 - SAPUI5 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 - SAPUI5 Type: User Input
Contextual Filter The contextual filter allows you to show a prefiltered view of a large or complex list. Category: UI Elements - SAPUI5 Type: Filter
Create Page Floorplan Use the “Create Page” floorplan when you need to create a new object in a full screen or split-screen layout. Category: Floorplans Type: -
Currency The currency control lets you align amounts with different currencies vertically at the decimal point. Category: UI Elements - SAPUI5 Type: Display
Date Picker The date picker lets users pick a localized date using touch, mouse, or keyboard input. Category: UI Elements - SAPUI5 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 - SAPUI5 Type: User Input
Date/Time Input The date/time input control allows users to select a date, time, or both. However, SAP Fiori uses this control for time input only. Used up to SAPUI5 version 1.30. Category: UI Elements - SAPUI5 Type: User Input
Dialog The dialog control interrupts the current app process to prompt the user for information or a response. Category: UI Elements - SAPUI5 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 - SAPUI5 Type: -
Edit Page Floorplan Simple edit (compact mode) on split screen The edit page floorplan offers various options for editing an existing object or page. You can use this floorplan for standalone apps, full screen apps, or as part of a split-screen layout. The edit page contains forms and numerous other controls. There are two ways in which a user can set an app [...] Category: Floorplans Type: -
Edit with Subpages SAP Fiori distinguishes between two edit flows: Local edit flow is an edit mode that applies to a single page. The user edits one page at a time. Global edit flow is an edit mode that allows the user to edit multiple subpages in one editing session. The subpages are all linked to one main page. [...] Category: Floorplans Type: -
Filter Bar / Smart Filter Bar The filter bar lets users filter item lists and tables by various criteria, and create custom filter variants. Category: UI Elements - SAPUI5 Type: Filter, User Input
Flat Object View Floorplan The flat object view floorplan displays all the information for an object on one long scrollable page. Category: Floorplans Type: -
Footer Toolbar The footer toolbar at the bottom of the screen is used for key actions that impact the whole page. Category: UI Elements - SAPUI5 Type: Toolbar
Form Forms display other UI elements (such as labels, input fields, checkboxes, and sliders) in a structured layout. Category: UI Elements - SAPUI5 Type: Form / Layout / Container
Full Screen Layout Use the full screen layout to display large amounts of data, large visualizations, or wide tables. Category: Floorplans Type: -
Grid Table A grid table can handle large numbers of items and columns, but is not fully responsive. Category: UI Elements - SAPUI5 Type: Table / List / Tree
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 - SAPUI5 Type: Action / Navigation, Filter, Form / Layout / Container
Image You can use the image control to insert responsive images in various places within an app. Category: UI Elements - SAPUI5 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 - SAPUI5 Type: Display, Filter, Toolbar
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 A text input field allows users to enter and edit text or numeric values in one line. Category: UI Elements - SAPUI5 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 - SAPUI5 Type: -
Label A label is the name or title of a control or group of related controls. Category: UI Elements - SAPUI5 Type: Display
Link A link is a clickable text element that can be used for navigation or to trigger an event. Category: UI Elements - SAPUI5 Type: Action / Navigation
List The list control displays a simple data set that the user can sort, filter, or group. Category: UI Elements - SAPUI5 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: -
Master List The master list is part of the split-screen layout. It allows users to scan, select, and navigate the list items. Category: Floorplans Type: -
Message Box The message box is a special dialog for displaying error, warning, information, and success messages. Category: UI Elements - SAPUI5 Type: Dialog / Popover, Messaging
Message Popover The message popover control can display multiple messages without interrupting the user. Category: UI Elements - SAPUI5 Type: Messaging
Message Toast A message toast is a non-disruptive popup for success messages, which disappears after a few seconds. Category: UI Elements - SAPUI5 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 - SAPUI5 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 - SAPUI5 Type: User Input
Object Header An object header is the first element on a page for a single object (object view or flat object view). Category: UI Elements - SAPUI5 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 - SAPUI5 Type: -
Object View Floorplan The object view is a floorplan for displaying objects (predecessor to the object page floorplan). Category: Floorplans Type: -
Panel The panel is a container for grouping and displaying information. It can be collapsed to save space. Category: UI Elements - SAPUI5 Type: Form / Layout / Container
Process Flow You can use the process flow control to represent the stages in a business process (such as approval). Category: UI Elements - SAPUI5 Type: Data Visualization
Progress Indicator The progress indicator shows the current completion status for a business process (static value). Category: UI Elements - SAPUI5 Type: Display
Rating Indicator You can use the rating indicator to let users rate content, or to display a content rating. Category: UI Elements - SAPUI5 Type: User Input
Reference Lines Add reference lines to highlight a particular value. Category: UI Elements - SAPUI5 Type: Data Visualization
Responsive Table The responsive table is the default table in SAP Fiori. It supports various features at line item level. Category: UI Elements - SAPUI5 Type: Table / List / Tree
Search The search field enables users to search for information or filter data by entering key words as text. Category: UI Elements - SAPUI5 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 - SAPUI5 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 - SAPUI5 Type: Dialog / Popover, 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 - SAPUI5 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 - SAPUI5 Type: User Input
Split-Screen Layout The split-screen layout is optimized for working on a list of items (master list on the left, selected item on the right). Category: Floorplans Type: -
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 - SAPUI5 Type: -
Table Toolbar The table toolbar appears above a table and is used for key actions that impact the entire table. Category: UI Elements - SAPUI5 Type: Toolbar
Text You can use the text control to display text inside a form, table, or any other content area. Category: UI Elements - SAPUI5 Type: Display
Text Area The text area is an input control that allows the user to enter multiple lines of text. Category: UI Elements - SAPUI5 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 - SAPUI5 Type: Collaboration, Data Visualization
Title The title control is a simple, one-line text with additional semantic information for accessibility purposes. Category: UI Elements - SAPUI5 Type: Display
Token Tokens visualize previously selected items, and are similar to tags. Users can add, remove, select, or deselect tokens. Category: UI Elements - SAPUI5 Type: Display, Filter
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 - SAPUI5 Type: Table / List / Tree
Upload Collection The upload collection control allows users to upload single or multiple files to an SAP Fiori app. Category: UI Elements - SAPUI5 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 - SAPUI5 Type: Dialog / Popover, User Input
Variant Management Variant management allows users to save and load different sets of filter or table settings. Category: UI Elements - SAPUI5 Type: Filter
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 - SAPUI5 Type: Table / List / Tree
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: -