Explore SAP Fiori

Analytical List Page Floorplan

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 - SAPUI5

Type: Table / List / Tree

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 – Color Palettes – Values and Names

This page provides all the color names in the chart palettes.

Category: UI Elements - SAPUI5

Type: Data Visualization

Chart – 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 - SAPUI5

Type: Data Visualization

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

Comparison Pattern

The comparison pattern displays information from multiple items side by side on the same page.

Category: Page Layouts

Type: -

Dynamic Page Layout

The dynamic page is a flexible, responsive layout control designed to support various floorplans and use cases.

Category: Page Layouts

Type: -

Flexible Column Layout

The flexible column layout displays multiple floorplans on a single page for faster and more fluid navigation.

Category: Page Layouts

Type: -

…threshold) is usually also based on the performance of the service, it should be safe to assume that the minimum selection limit is twice this size. In this case, loading the data would take as long as scrolling down and loading exactly one more block. Nevertheless, we recommend using larger…

Category: UI Elements - SAPUI5

Type: Table / List / Tree

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

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 - SAPUI5

Type: User Input

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

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 Display Components

Object display components represent key object attributes, such as the object ID or status.

Category: UI Elements - SAPUI5

Type: Display

Object Page Floorplan

The object page floorplan is the recommended floorplan for displaying, creating, and editing business objects.

Category: Floorplans

Type: -

Overview Page (OVP) Floorplan

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: -

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 - SAPUI5

Type: Table / List / Tree

Smart Field

…controlType, value: dropDownList Select Edm.String Configuration: controlType, value: selection Multi-line text Text Text area Edm.String MultiLineText Decimal numbers Text Object number One or two input fields (for number and unit) Edm.Int16, Edm.Int32, Edm.Int64, Edm.SByte, Edm.Byte, Edm.Single, Edm.Float, Edm.Double, Edm.Decimal Precision, Scale Status information Object status Edm.String criticality, criticalityRepresentationType Text and…

Category: UI Elements - SAPUI5

Type: Smart Controls, User Input