Updated: February 23, 2023

SAPUI5 Version 1.100

UI Elements

Intro

This article provides an overview of the UI elements used in SAP Fiori. UI elements range from simple controls to complex controls, and include reuse components, smart controls, and controls designed specifically for assistive technologies.

Simple controls are the very basic UI elements, such as buttons or links.
Complex controls themselves use other controls. For example, a toolbar contains buttons and a smart table contains a title, a toolbar, and items.
Reuse components were originally built for a specific use case and line of business. If you have a similar scenario, you may also be able to use them for your app.
Smart controls offer additional features to the standard SAPUI5 features, such as OData metadata support. That’s why they are typically used with SAP Fiori elements. However, smart controls can also be used for regular freestyle apps.
Controls to support assistive technologies are needed to make the interface accessible to everyone, including people with disabilities.

Quick Access

The list below provides an overview of our UI element categories and the UI elements you can expect to find in each one. For tips on when and how to use specific elements, also check the When to Use section under UI Elements in the navigation structure. To get a visual overview of all UI elements, check out the Explore page.

Action / Navigation

Collaboration

Group Feed Component

Data Visualization

Analytical Card

Chart (VizFrame)

Interactive Chart

Micro Process Flow

Status Indicator

Dialog / Popover

Table Select Dialog

Display

Expandable Text

Object Display Components

Progress Indicator

Status Indicator

Filter

Visual Filter Bar

Variant Management

Form / Layout / Container

Dynamic Side Content

Form / Simple Form

Scroll Container

Loading / Processing

Messaging

Illustrated Message

Message Popover

Table / List / Tree

Analytical Table (ALV)

Responsive Table

Table Personalization

Toolbar

User Input (Fields, Combo Boxes)

Multi-Input Field

Multi-Combo Box

User Input (Dialog, Visual)

Table Select Dialog

Value Help Dialog

Rating Indicator

User Input (Date, Time, Calendar)

Date/Time Picker

Date Range Selection

Dynamic Date (Smart Filter Bar)

Dynamic Date Range

Calendar Date Interval

Planning Calender

Single Planning Calendar

User Input (Colors, Texts, Files)

Color Palette Popover

Rich Text Editor

Support for Assistive Technologies

Invisible Message

Smart Controls

Smart Filter Bar

Reuse Components

Calculation Builder

We'd appreciate your feedback!

Processing your feedback

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.

This topic was helpful
This topic was not helpful
- Can you tell us why?
- The information I need is missing
- The content is incorrect / out of date
- The content is unclear / hard to follow
- Other

Include screenshot

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