UI Elements (SAPUI5)

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.

Intro

Quick Access

Action / Navigation

Collaboration

Data Visualization

Dialog / Popover

Display

Filter

Form / Layout / Container

Loading / Processing

Messaging

Table / List / Tree

Toolbar

User Input (Fields, Combo Boxes)

User Input (Dialog, Visual)

User Input (Date, Time, Calendar)

User Input (Colors, Texts, Files)

Support for Assistive Technologies

Smart Controls

Reuse Components

User Input
(Fields, Combo Boxes)

User Input
(Dialog, Visual)

User Input
(Date, Time, Calendar)

User Input
(Colors, Texts, Files)