Skip to search Skip to content
  • Home
  • Get Started
    • Why Design Guidelines?
    • Navigating the Guidelines
    • Best Practices for Designing SAP Fiori Apps
  • Explore SAP Fiori
  • What’s New
  • SAP Fiori Design System
    • Overview
    • Design Principles
    • Design-Led Development
    • Accessibility
    • Multi-Device Support
    • Responsive Spacing
  • Look, Feel, and Wording
    • Overview
    • Design Tokens
    • Theming
    • Colors
      • Morning Horizon
      • Evening Horizon
      • Quartz Light
      • Quartz Dark
      • Belize
      • ———————————–
      • Chart Color Palettes
      • Chart Color Palettes – Values and Names
      • ———————————–
      • How To Use Semantic Colors / Industry Colors
    • Iconography
      • Horizon
      • Quartz
    • Motion Design
    • Typography
      • Horizon
      • Quartz
    • UX Illustrations
    • UI Texts and In-App Help
      • UI Text Guidelines for SAP Fiori
      • Overview Page – UI Text Guidelines
      • Situation Handling Framework – UI Text Guidelines
      • SAP Companion
  • SAP Fiori Launchpad
    • Overview
    • Shell Bar
      • Overview
      • Enterprise Search
      • Notifications
      • Services
    • Home Page
    • Spaces
    • My Home
    • App Finder
    • Tile
  • AI and Joule Design
    • Overview
    • Guidelines
      • Design Principles
      • Building Trust
      • ———————————–
      • Explainable AI
      • Matching
      • Ranking
      • Recommendations
      • Situation Handling
      • User Feedback
    • Glossary
    • Helpful Links on SAP AI
    • Get in Touch with Us
  • General Patterns
    • Overview
    • Action Placement
    • Busy States
    • Collaboration
    • Content Density (Cozy & Compact)
    • Drafts
    • Empty States
    • Export to Spreadsheet
    • Flag and Favorite
    • Form Field Validation
    • Formatting
      • Overview
      • Dates
      • Numbers
      • Time
      • Units of Measurement
    • Navigation
    • Message Handling
      • Overview
      • Processing Multiple Items
    • Mobile Integration
    • Object Handling (Create, Edit, Delete)
      • Overview
      • Simple Objects (Create, Edit)
      • Complex Objects – Global Flow (Create, Edit)
      • Complex Objects – Local Flow (Create, Edit)
      • Copy
      • Create with Reference
      • Partial Edit
      • Mass Edit
      • Delete
    • Placeholder Loading
  • Page Layouts and Floorplans
    • Overview
    • When to Use Which Floorplan
    • Page Layouts
      • Comparison Pattern
      • Dynamic Page
      • Semantic Page
      • Flexible Column Layout
      • Letterboxing
      • Multi Instance
    • Floorplans
      • Analytical List Page
      • Initial Page
      • List Report
      • Object Page
      • Overview Page
      • Wizard
      • Worklist
  • UI Elements – SAPUI5
    • Overview
    • When to Use
      • Semantic States / Industry Colors
      • Tooltips
      • Which Selection Control?
      • Which UI Element State?
      • Wrapping and Truncation
    • Action / Navigation
      • Action Sheet
      • Breadcrumb
      • Button
      • Icon Tab Bar
      • Link
      • Smart Link
    • Collaboration
      • Feed and Notes
      • Group Feed Component
      • Timeline
    • Data Visualization
      • 3D Viewport
      • Analytical Card
      • Calendar Card
      • Chart (VizFrame)
      • Gantt Chart
      • Interactive Chart
      • Map
      • Micro Chart
      • Micro Process Flow
      • Network Graph
      • Process Flow
      • Status Indicator
      • Timeline
    • Dialog / Popover
      • Dialog
      • Cloud File Browser
      • Message Box
      • Select Dialog
      • Table Select Dialog
      • Value Help Dialog
      • ———————————–
      • Popover
      • Quick View
    • Display
      • Avatar
      • Avatar Group
      • Carousel
      • Currency
      • Expandable Text
      • Formatted Text
      • Generic Tag
      • HTML
      • Image
      • Infobar
      • Label
      • Lightbox
      • Object Display Components
      • PDF Viewer
      • Progress Indicator
      • Status Indicator
      • T Account
      • Text
      • Tile
      • Title
      • Token
    • Filter
      • Filter Bar
      • Icon Tab Bar
      • Infobar
      • Smart Filter Bar
      • Token
      • Visual Filter Bar
      • Views
        (Variant Management)
    • Form / Layout / Container
      • Card
      • Carousel
      • Dynamic Side Content
      • Flexible Grid
      • Form / Simple Form
      • Icon Tab Bar
      • Panel
      • Scroll Container
      • Side Panel
      • Smart Form
    • Loading / Processing
      • Busy Dialog
      • Busy Indicator
      • Busy State
    • Messaging
      • Illustrated Message
      • Message Box
      • Message Popover
      • Message Strip
      • Message Toast
      • Message View
    • Table / List / Tree
      • Overview
      • ———————————–
      • Analytical Table (ALV)
      • Grid Table
      • Responsive Table
      • Smart Table
      • Tree Table
      • ———————————–
      • Table Personalization
      • ———————————–
      • Grid List
      • List
      • Smart List
      • Tree
    • Toolbar
      • Overview
      • Chart Toolbar
      • Footer Toolbar
      • Header Toolbar
      • Table Toolbar
      • Tree Toolbar
    • User Input
      • Input Field
      • Multi-Input Field
      • Combo Box
      • Multi-Combo Box
      • Select
      • Smart Field
      • Mask Input
      • ———————————–
      • Select Dialog
      • Table Select Dialog
      • Value Help Dialog
      • ———————————–
      • Checkbox
      • Radio Button
      • Rating Indicator
      • Slider
      • Range Slider
      • Step Input
      • Switch
      • ———————————–
      • Date Picker
      • Time Picker
      • Date/Time Picker
      • Date Range Selection
      • Dynamic Date Range
      • Calendar Date Interval
      • Calendar
      • Planning Calendar
      • Single Planning Calendar
      • ———————————–
      • Color Palette
      • Color Palette Popover
      • Color Picker
      • Color Picker Popover
      • ———————————–
      • Feed and Notes
      • Rich Text Editor
      • Search
      • Text Area
      • Upload Set
    • Reuse Components
      • Calculation Builder
    • Smart Controls
      • Smart Field
      • Smart Filter Bar
      • Smart Form
      • Smart Link
      • Smart List
      • Smart Table
    • Support for Assistive Technologies
      • Invisible Message
      • Invisible Text
  • UI Elements – SAP Web Components
    • Overview
    • Interaction Design Foundations
      • States
      • Wrapping and Truncation
    • Avatar
    • Avatar Group
    • Bar
    • Breadcrumbs
    • Busy Indicator
    • Button
    • Calendar
    • Card
    • Carousel
    • Checkbox
    • Color Palette
    • Color Palette Popover
    • Color Picker
    • Combobox
    • Date Picker
    • Date Range Picker
    • Date/Time Picker
    • Dialog
    • Dynamic Side Content
    • Flexible Column Layout
    • Form
    • Icon
    • Illustrated Message
    • Input
    • Label
    • Link
    • List
    • Menu
    • Menu Button
    • Message Strip
    • Multi Combobox
    • Multi Input
    • Page
    • Panel
    • Popover
    • Progress Indicator
    • Radio Button
    • Range Slider
    • Rating Indicator
    • Responsive Popover
    • Segmented Button
    • Select
    • Slider
    • Split Button
    • Step Input
    • Switch
    • Tab Bar
    • Table
    • Text
    • Text Area
    • Time Picker
    • Title
    • Toast
    • Toggle Button
    • Toolbar
    • Tree
  • SAP S/4HANA Only
    • Integration of Classic SAP UIs
      (SAP Fiori Elements List Report)
    • SAP S/4HANA Product Home Page – My Home
    • System Information Bar
  • SAP Fiori Elements Framework
    • Overview
    • Analytical List Page / Overview Page
    • List Report / Worklist
      • Header
      • Content Area
      • Worklist
      • Integration of Classic SAP UIs
        (SAP Fiori Elements List Report)
    • Object Page
      • Overview
      • Header
      • Content Area
      • Footer Bar
    • Table / List
      • Table Types
      • Table Toolbar
      • Table Features
      • Table Rows
      • List
    • Replacing Placeholder Text
    • Terminology
  • Analytical Frameworks
    • Overview
    • Analysis Path Framework
    • SAP Smart Business
  • Designer Toolkit
    • Overview
    • UI Kit
      • Download Fonts
      • SAP Fiori for Web UI Kit
      • SAP S/4HANA Web UI Kit
    • User Research Resources
    • Ask the Community

Fiori for Web Design Guidelines

Explore SAP Fiori

Explore SAP Fiori

Categories

UI Element Types

Action List Item

Action List Item - Featured image

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

Action Sheet - Featured image

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 Table (Alv)s - Featured image

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

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

Button - Featured image

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

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

Chart - Featured image

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

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

Combo Box featured

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

Create Page Floorplan - Featured image

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

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 Input

Date Time Input - Featured image

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

Dialog - Featured image

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

Edit Page Floorplan

Edit Page Floorplan - Featured image
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

Edit with Subpages - Featured image
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

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

Flat Object View Floorplan

Flat Object View Floorplan - Featured image

The flat object view floorplan displays all the information for an object on one long scrollable page.

Category: Floorplans
Type: -

Form

Form - Featured image

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

Full Screen Layout - Featured image

Use the full screen layout to display large amounts of data, large visualizations, or wide tables.

Category: Floorplans
Type: -

Grid Table

Grid Table - Featured image

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

Icon Tab Bar - Featured image

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

Infobar

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

Initial Page Floorplan - Featured image

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

Label

label-featured_

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

Category: UI Elements - SAPUI5
Type: Display

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

List - Featured Image

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

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

Category: Floorplans
Type: -

Master List

Master List - Featured image

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

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

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

Message Popover - Featured image

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

Mini Chart - Mini charts

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

Multi-Combo Box - Featured image

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

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

Object View Floorplan - Featured image

The object view is a floorplan for displaying objects (predecessor to the object page floorplan).

Category: Floorplans
Type: -

Panel

sFIN Analytics Template powered by SAP Lumira, Studio Edition - container controls 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

Progress Indicator - Featured Image

The progress indicator shows the current completion status for a business process (static value).

Category: UI Elements - SAPUI5
Type: Display

Rating Indicator

Rating Indicator - Featured image

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

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

Select - User input controls 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

Split-Screen Layout

Split-Screen Layout - Featured image

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

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

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

Timeline

Timeline - Featured image

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

Title - Featured Image

The title control is a simple, one-line text with additional semantic information for accessibility purposes.

Category: UI Elements - SAPUI5
Type: Display

Token

sFIN Analytics Template powered by SAP Lumira, Studio Edition - user 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 Table

Tree Table - Featured image

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

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

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

Worklist Floorplan

Work List Floorplan - Featured image

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