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: List
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
Analysis Path Framework You can use this framework to create chart-based drilldown apps for analyzing KPIs from different sources. Category: Layouts, Floorplans and Frameworks Type: -
Analytical Table (ALV) Analytical tables offer powerful options for working with the data, including advanced grouping and aggregations. Category: UI Elements Type: Table
Bullet Chart The bullet chart is used to compare primary and secondary (comparison) values. Category: UI Elements 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 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: Popover
Busy Indicator The busy indicator informs the user about an ongoing operation. Category: UI Elements Type: Loading
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
Button Buttons allow users to trigger actions – either by clicking or tapping the button, or by pressing a corresponding key. Category: UI Elements Type: Action
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
Carousel The carousel is a control for browsing through a set of items one item at a time. Category: UI Elements Type: Container
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 – 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 – 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 – Selection This article describes the different ways users can select one or more data points. 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 (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 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
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
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
Contextual Filter The contextual filter allows you to show a prefiltered view of a large or complex list. Category: UI Elements 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: Layouts, Floorplans and Frameworks Type: -
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
Dialog The dialog control interrupts the current app process to prompt the user for information or a response. Category: UI Elements Type: 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: List
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: User Input
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 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: Layouts, Floorplans and Frameworks 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 Type: Action, Toolbar
Form Forms display other UI elements (such as labels, input fields, checkboxes, and sliders) in a structured layout. Category: UI Elements Type: Container
Full Screen Layout Use the full screen layout to display large amounts of data, large visualizations, or wide tables. Category: Layouts, Floorplans and Frameworks Type: -
Grid Table A grid table can handle large numbers of items and columns, but is not fully responsive. Category: UI Elements Type: Table
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: -
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: 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: Layouts, Floorplans and Frameworks Type: -
Input Field A text input field allows users to enter and edit text or numeric values in one line. 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: List
Label A label is the name or title of a control or group of related controls. Category: UI Elements Type: Display
Link A link is a clickable text element that can be used for navigation or to trigger an event. Category: UI Elements Type: Action
List The list control displays a simple data set that the user can sort, filter, or group. Category: UI Elements Type: List
List Report (Smart Templates/SAP Fiori Elements) The SAP Fiori element “List Report” is an implementation of the list report floorplan as a reusable template. Category: Layouts, Floorplans and Frameworks Type: -
List Report Floorplan The list report floorplan allows the user to work with a large, filterable list of items and take action. Category: Layouts, Floorplans and Frameworks 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
Master List The master list is part of the split-screen layout. It allows users to scan, select, and navigate the list items. Category: Layouts, Floorplans and Frameworks Type: -
Message Box The message box is a special dialog for displaying error, warning, information, and success messages. Category: UI Elements Type: Popover
Message Page Message pages give feedback to the user when an app or list is empty, or when an error has occurred. Category: UI Elements Type: Display
Message Popover The message popover control can display multiple messages without interrupting the user. Category: UI Elements Type: Popover
Message Toast A message toast is a non-disruptive popup for success messages, which disappears after a few seconds. Category: UI Elements Type: Display
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
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
Object Display Components Object display components represent key object attributes, such as the object ID or status. Category: UI Elements Type: Display
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 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: List
Object Page (Floorplan + SAP Fiori Element) The object page floorplan is the recommended floorplan for displaying, creating, and editing business objects. Category: Layouts, Floorplans and Frameworks Type: -
Object View Floorplan The object view is a floorplan for displaying objects (predecessor to the object page floorplan). Category: Layouts, Floorplans and Frameworks Type: -
Overview Page (Smart Templates/SAP Fiori Elements) The overview page is a data-driven Fiori app that provides all the information a user needs in a single page. Category: Layouts, Floorplans and Frameworks Type: -
P13n-Dialog The P13n dialog allows you to build analytical tables with extensive personalization options. Category: UI Elements Type: Table, User Input
Panel The panel is a container for grouping and displaying information. It can be collapsed to save space. Category: UI Elements Type: Container
Popover A popover displays additional information for an object, and can also offer actions. Category: UI Elements Type: 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: Data Visualization, Display
Quick View The quick view is similar to a popover, but has a predefined structure and automatic UI rendering. Category: UI Elements Type: Popover
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
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
Reference Lines Add reference lines to highlight a particular value. Category: UI Elements 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 Type: Table
SAP Smart Business Framework SAP Smart Business is a framework for analytical drilldown apps based on key performance indicators (KPIs). Category: Layouts, Floorplans and Frameworks Type: -
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: 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 Link The smart link triggers a popover with additional information and links to related apps. Category: UI Elements Type: Action, Popover
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: Table
Snapping Header The snapping header is the top element of the object page floorplan, and contains key information on an object. Category: UI Elements Type: -
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: Layouts, Floorplans and Frameworks 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 Type: List
Switch The toggle switch mimics a physical switch that allows users to turn things on or off. Category: UI Elements Type: User Input
Table Personalization (Overview) Table personalization allows users to modify the display and settings of a table. Category: UI Elements Type: Table
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 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: 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: User Input
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
Upload Collection The upload collection control allows users to upload single or multiple files to an SAP Fiori app. Category: UI Elements Type: Action
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: User Input
Variant Management Variant management allows users to save and load different sets of filter or table settings. Category: UI Elements 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 Type: Table
Wizard Floorplan You can use the wizard floorplan to guide users through a long or unfamiliar task by dividing it into sections. Category: Layouts, Floorplans and Frameworks Type: -
Worklist Floorplan The worklist floorplan shows a list of items the user needs to process. The focus is on completing the tasks. Category: Layouts, Floorplans and Frameworks Type: -
