Skip to search Skip to content
  • Home
  • Navigating the Guidelines
  • Explore SAP Fiori
  • What’s New
  • Foundation
    • SAP Fiori
    • Design Principles
    • Design-Led Development Process (external)
    • Multi-Device Support: Responsive vs. Adaptive
    • Mobile First
    • Content Density (Cozy & Compact)
    • Theming
    • Motion Design
    • Belize Colors
    • Iconography – Quartz
    • Typography – Quartz
  • General Concepts
    • SAP Fiori Launchpad
      • SAP Fiori Launchpad – Overview
      • App Finder
      • Enterprise Search
      • Home Page
      • Me Area
      • Notifications
      • SAP Fiori Launchpad Services
      • Shell Bar
      • Tile
    • Action Placement
    • Collaboration
    • Draft Handling
    • Export to Spreadsheet
    • Flag and Favorite
    • Form Field Validation
    • Formatting
      • Overview
      • Dates
      • Numbers
      • Time
      • Units of Measurement
    • Forward
    • Handling Busy States
    • How To Use Semantic Colors / Industry-Specific Colors
    • Manage Objects
      • Overview
      • Copy
      • Create with Reference
      • Global Flow
      • Local Flow
      • Mass Edit
      • Parts of an Object
      • Simple Objects
    • Message Handling – Overview
    • Mobile Integration
      • Barcode Scanning
      • Mobile Integration Concept
    • Navigation
    • Selection Controls – Overview
    • Situation Handling
    • UI Element States
    • Using Tooltips
    • Wrapping and Truncating Text
  • Layouts, Floorplans, and Frameworks
    • Overview
    • SAP Fiori Elements
    • Layouts
      • Dynamic Page
      • Dynamic Page – Semantic Page
      • Flexible Column Layout
      • Grid Layout
      • Letterboxing
      • Multi Instance
    • Floorplans
      • Analytical List Page
      • Initial Page
      • List Report
      • Object Page
      • Overview Page
      • Wizard
      • Worklist
    • Frameworks
      • Analysis Path Framework
      • SAP Smart Business Framework
  • UI Elements
    • Action
      • Action Sheet
      • Breadcrumb
      • Button
      • Link
      • Menu Button
      • Upload Collection
    • Collaboration
      • Group Feed Component
      • Timeline
    • Container
      • Carousel
      • Lightbox
      • Panel
    • Data Visualization
      • 3D Viewport
      • Analytical Card
      • Chart (VizFrame)
      • Gantt Chart
      • Interactive Chart
      • Map
      • Micro Chart
      • Network Graph
      • Progress Indicator
      • Status Indicator
      • T Account
    • Dialog
    • Display
      • Avatar
      • Currency
      • Image
      • Label
      • Object Display Components
      • Text
      • Title
    • Dynamic Side Content
    • Filter
      • Contextual Filter
      • Filter Bar
      • Info Bar
      • Visual Filter Bar
    • Form / Simple Form
    • Icon Tab Bar
    • Invisible Text
    • List
      • Overview
      • Action List Item
      • Display List Item
      • Input List Item
      • Object List Item
      • Standard List Item
    • Loading
      • Busy Dialog
      • Busy Indicator
      • Busy State
    • Messaging
      • Message Box
      • Message Page
      • Message Popover
      • Message Strip
      • Message Toast
      • Message View
    • Micro Process Flow
    • PDF Viewer
    • Popover
      • Popover
      • Quick View
    • Process Flow
    • Range Selector
    • Table
      • Overview
      • Analytical Table (ALV)
      • Grid Table
      • Personalization & Dialogs
      • Responsive Table
      • Tree Table
    • Toolbar
      • Overview
      • Chart Toolbar
      • Footer Toolbar
      • Header Toolbar
      • Table Toolbar
    • Tool Development
    • Tree
    • User Input
      • Calculation Builder
      • Calendar Date Interval
      • Checkbox
      • Combo Box
      • Date Picker
      • Date/Time Picker
      • Date Range Selection
      • Dynamic Date
      • Feed and Notes
      • Input Field
      • Mask Input
      • Multi-Combo Box
      • Multi-Input Field
      • Planning Calendar
      • Radio Button
      • Range Slider
      • Rating Indicator
      • Rich Text Editor
      • Search
      • Select
      • Select Dialog
      • Slider
      • Step Input
      • Switch
      • Table Select Dialog
      • Text Area
      • Time Picker
      • Token
      • Value Help Dialog
    • Views (Variant Management)
  • Services & Resources
    • Download Fonts
    • SAP Fiori Client
    • SAPUI5 Development
  • Ask the Community

Fiori for Web Design Guidelines

Explore SAP Fiori

Explore SAP Fiori

Categories

UI Element Types

3D Viewport

The 3D viewport control can display simple and complex 3D objects in SAP Fiori, including basic user interaction.

Category: UI Elements - SAPUI5
Type: Data Visualization

Action List Item

Action-List-Items_small_1.46

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 Card

Analytical Card article preview

Analytical cards visualize data on an overview page. Each card has a header/KPI area and a chart area.

Category: UI Elements - SAPUI5
Type: Data Visualization

Analytical List Page (SAP Fiori Element)

ALP Explore Image

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

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 - SAPUI5
Type: Data Visualization

Avatar

Avatar-Featured-image

The avatar is a control that has various display options for representing images, icons, and initials.

Category: UI Elements - SAPUI5
Type: Display

Breadcrumb

Breadcrumb - Featured image

A breadcrumb is a type of secondary navigation that indicates the position of a page in a hierarchy.

Category: UI Elements - SAPUI5
Type: Action / Navigation

Bullet Chart

Bullet chart article preview

The bullet chart is used to compare primary and secondary (comparison) values.

Category: UI Elements - SAPUI5
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 - SAPUI5
Type: Data Visualization

Busy Dialog

Busy Dialog - Featured image

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

Busy Indicator - Featured image

The busy indicator informs the user about an ongoing operation.

Category: UI Elements - SAPUI5
Type: Loading / Processing

Busy State

Busy State - Featured image

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

Calculation Builder

The calculation builder can be used to create complex arithmetic expressions using arithmetic and logical operators.

Category: UI Elements - SAPUI5
Type: Reuse Components

Calendar Date Interval

Calendar Date interval Featured Image

The calendar date interval control displays a range of days in a single row, saving on horizontal space.

Category: UI Elements - SAPUI5
Type: User Input

Carousel

Carousel - Featured image

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 – Deviation

This article explains how to visualize the deviation (difference or variance) between two measures.

Category: UI Elements - SAPUI5
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 - SAPUI5
Type: Data Visualization

Chart – Variation Over Time

This article illustrates the different ways you can visualize changes of measures through time.

Category: UI Elements - SAPUI5
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 - SAPUI5
Type: Data Visualization

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 – 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 - SAPUI5
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 - SAPUI5
Type: Data Visualization

Chart – Distribution

Overview of the charts you can use to visualize how values are distributed within a set.

Category: UI Elements - SAPUI5
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 - SAPUI5
Type: Data Visualization

Chart – Legend

Chart legend

The legend explains the meaning of all the visual elements in the chart.

Category: UI Elements - SAPUI5
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 - SAPUI5
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 - SAPUI5
Type: Data Visualization

Chart – Range Selector

Range Selector Explore Image

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

Chart – Ranking

This article explains how to choose the correct chart for ranking items based on numeric values.

Category: UI Elements - SAPUI5
Type: Data Visualization

Chart – Reference Lines

Add reference lines to highlight a particular value.

Category: UI Elements - SAPUI5
Type: Data Visualization

Chart – Selection

This article describes the different ways users can select one or more data points.

Category: UI Elements - SAPUI5
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 - 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 – Value-Based Legend

The value-based legend is used to visually represent value ranges through color shades.

Category: UI Elements - SAPUI5
Type: Data Visualization

Chart – Zoom

The zoom function enables users to change the scale of an axis on a chart.

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 Popover

Chart popover

The chart popover displays information or actions related to the selected data points.

Category: UI Elements - SAPUI5
Type: Data Visualization

Chart Toolbar

Chart Toolbar - Featured image

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

Checkbox - Featured image

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 chart article preview

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

Column Micro Chart

column-micro-chart-explore-img-1-56

A column chart uses rectangular bars to compare multiple values over time or across categories.

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

Comparison Micro Chart

The comparison chart is a bar chart for comparing the top n entries in a list.

Category: UI Elements - SAPUI5
Type: Data Visualization

Contextual Filter

The contextual filter allows you to show a prefiltered view of a large or complex list.

Category: UI Elements - SAPUI5
Type: Filter

Cumulation (Waterfall Chart)

Waterfall Chart - Featured image

Use waterfall charts to analyze a cumulative value.

Category: UI Elements - SAPUI5
Type: Data Visualization

Currency

Currency - Featured image

The currency control lets you align amounts with different currencies vertically at the decimal point.

Category: UI Elements - SAPUI5
Type: Display

Date Picker

Date Picker Featured Image

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

Date Range Selection Featured Image

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 Picker

The date/time input control allows users to select a combination of date and time.

Category: UI Elements - SAPUI5
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 - SAPUI5
Type: Data Visualization

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 Item - Featured image

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

Dynamic Date

Flexible smart control for entering fixed and dynamic dates. Available options respond to the user input.

Category: UI Elements - SAPUI5
Type: Smart Controls, User Input

Dynamic Page Layout

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

Category: Page Layouts
Type: -

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 - SAPUI5
Type: Collaboration, User Input

Filter Bar

Filter Bar - Filters

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

Flexible Column Layout (Layout + SAP Fiori Elements)

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

Category: Page Layouts
Type: -

Footer Toolbar

Footer Bar - Featured image

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 / Simple Form

Form - Explore-and-Search - 1.46

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

Gantt Chart

The Gantt chart shows the sequence in which various activities occur and the dependencies between these activities.

Category: UI Elements - SAPUI5
Type: Data Visualization

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

Group Feed Component

Collaboration - GroupFeedComponent

You can use the group feed component to offer a social timeline that is integrated with SAP Jam.

Category: UI Elements - SAPUI5
Type: Collaboration

Harvey Ball Micro Chart

You can use a Harvey Ball chart to visualize a value compared to its total.

Category: UI Elements - SAPUI5
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 - SAPUI5
Type: Toolbar

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

image - featured

You can use the image control to insert responsive images in various places within an app.

Category: UI Elements - SAPUI5
Type: Display

Info Bar

Infobar - Featured Image

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

Input Field - Featured image

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

Input List Item - Featured image

The input list item comprises a label and input UI element. This control has largely been replaced by forms.

Category: UI Elements - SAPUI5
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 - SAPUI5
Type: Data Visualization

Invisible Text

invisible text - featured

The invisible text control provides a simple hidden text that can be used by assistive technologies.

Category: UI Elements - SAPUI5
Type: Support for Assistive Technologies

Label

Label - Explore and Search - 1.46

A label is the name or title of a control or group of related controls.

Category: UI Elements - SAPUI5
Type: Display

Lightbox

Lightbox

The lightbox control allows the user to view an image in its original size.

Category: UI Elements - SAPUI5
Type: Display

Line Chart

A line chart displays information as a series of data points connected by straight lines.

Category: UI Elements - SAPUI5
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 - SAPUI5
Type: Data Visualization

Link

Link-featured_

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

List Report (Floorplan + SAP Fiori Element) - Live Update - 1.48

The list report floorplan allows the user to work with a large, filterable list of items and take action.

Category: Floorplans
Type: -

Map

Map - Featured image

A map is a symbolic visual illustration of areas, regions, and themes. Maps can be analytical or geographic.

Category: UI Elements - SAPUI5
Type: Data Visualization

Mask Input

Mask Input - Featured image

The mask input control governs what a user is allowed to enter in an input field.

Category: UI Elements - SAPUI5
Type: User Input

Menu Button

The menu button allows you to offer multiple options in a dropdown list.

Category: UI Elements - SAPUI5
Type: Action / Navigation

Message Box

Message Box - Featured image

The message box is a special dialog for displaying error, warning, information, and success messages.

Category: UI Elements - SAPUI5
Type: Dialog / Popover, Messaging

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

Message View

message-view-preview-picture

The message view control can handle multiple messages within SAP Fiori.

Category: UI Elements - SAPUI5
Type: Messaging

Micro Chart

micro-chart-explore-img-1-56

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

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

Multi-Input Field

Multi-input - Featured image

A multi-input field allows the user to enter multiple values, which are displayed as tokens.

Category: UI Elements - SAPUI5
Type: User Input

Multi-Instance Layout

Multi Instance Handling Floorplan - Featured image

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 - SAPUI5
Type: Data Visualization

Object Display Components

Object Display Components Search Image

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

Category: UI Elements - SAPUI5
Type: Display

Object List Item

Object List Item - Featured image

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 Page Floorplan

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

Category: Floorplans
Type: -

Overview Page (SAP Fiori Element)

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 allows you to build analytical tables with extensive personalization options.

Category: UI Elements - SAPUI5
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 - SAPUI5
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 - SAPUI5
Type: Display, Reuse Components

Planning Calendar

Planning Calendar - Featured image

The planning calendar allows users to see parallel appointments and create new events.

Category: UI Elements - SAPUI5
Type: User Input

Popover

Popover - Featured Image

A popover displays additional information for an object, and can also offer actions.

Category: UI Elements - SAPUI5
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 - 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

Quick View

The quick view is similar to a popover, but has a predefined structure and automatic UI rendering.

Category: UI Elements - SAPUI5
Type: Dialog / Popover

Radial Micro Chart

Radial micro chart -explore image

You can use the radial micro chart to display a single percentage value.

Category: UI Elements - SAPUI5
Type: Data Visualization

Radio Button

Radio-Button-featured

Use radio buttons if you want the user to select only one option from a group of mutually exclusive alternatives.

Category: UI Elements - SAPUI5
Type: User Input

Range Slider

The range slider enables the user to select a value range within a predefined numerical interval.

Category: UI Elements - SAPUI5
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 - SAPUI5
Type: User Input

Responsive Table

Responsive Table - Create01

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

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 - SAPUI5
Type: User Input

Search

Feed Input - User input controls 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

Select Dialog - Featured image

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

Slider featured image

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

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 - SAPUI5
Type: Data Visualization

Smart Link

SmartLink featured

The smart link triggers a popover with additional information and links to related apps.

Category: UI Elements - SAPUI5
Type: Action / Navigation, Smart Controls

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 - SAPUI5
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 - SAPUI5
Type: Data Visualization

Standard List Item

Standard List Item - Featured image

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

Status Indicator

The status indicator control shows status values as fill levels within a shape.

Category: UI Elements - SAPUI5
Type: Data Visualization, Display

Step Input

Step Input Featured image

The step input control allows the user to adjust numeric values in predefined increments (steps).

Category: UI Elements - SAPUI5
Type: User Input

Switch

The toggle switch mimics a physical switch that allows users to turn things on or off.

Category: UI Elements - SAPUI5
Type: User Input

T Account

Control that allows you to display one or more ledger accounts in T-Account format.

Category: UI Elements - SAPUI5
Type: Display

Table Personalization Dialog

Table personalization dialog - OK/Cancel

This personalization dialog for small tables allows users to show/hide columns, and sort and filter the entries.

Category: UI Elements - SAPUI5
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 - SAPUI5
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 - SAPUI5
Type: Toolbar

Text

Text - Display controls 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

Text Area - User input controls textarea

The text area is an input control that allows the user to enter multiple lines of text.

Category: UI Elements - SAPUI5
Type: User Input

Time Picker

Timepicker - Featured Image

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 - SAPUI5
Type: User Input

Timeline

Interaction - Search (1)

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

Input controls - 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

tree_final

The tree control allows you to display a basic hierarchy, for example, in a master list or dialog.

Category: UI Elements - SAPUI5
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 - SAPUI5
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 - SAPUI5
Type: Data Visualization

Upload Collection

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

Value Help Dialog - Featured image

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

View Settings Dialog - Featured image

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

Visual Filter Bar

Visual Filter Bar

The visual filter bar offers a unique way of filtering large data sets through visualisations.

Category: UI Elements - SAPUI5
Type: Filter

Wizard Floorplan

Wizard Floorplan featured

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: -
© 2025 SAP SE. All rights reserved.
  • Privacy
  • Legal Disclosure
  • Copyright
  • Terms of Use
  • Go.SAP.com
  • SAP Community Network

The SAP Fiori Design Guidelines will soon be moving to the new SAP Design System portal. Check out the new experience here.

We'd appreciate your feedback!

Processing your feedback

Thank you Your feedback has been sent to the SAP Fiori design team.

Thank you for your helping us to improve our guidelines!

 
We'd appreciate your feedback!
Please fill out the form to send us your feedback.
    • Can you tell us why?

Your feedback is anonymous, so you won't receive a reply. If you'd like help with a specific question, please visit the SAP Fiori Community