Basics

Most commonly used elements

A simple Button with Text and/or Icon.

A Button that contains several sub-buttons, allowing the user to pick one out of many options.

Simple Checkbox with a Label.

A DatePicker, including a popup calender to select a date.

A dropdown field that allows selection of one option out of multiple options.

A simple Icon that can display all the icons that are available on OpenUI5’s Icon Explorer.

Displays an Image from the Image Explorer/Assets section of your application or from external sources.

A simple Input Field where the user can insert values (text, numbers).

A Hyperlink control used to navigate to other apps or web pages or to trigger actions.

An element to display a Message, embedded on the application screen. The message container can be set to specific states (Information, Success, Warning and Error) and can be closed via button.

The RadioButton is a control similar to a checkbox, but it allows you to choose only one of the predefined set of options.

A Switch is a control that represents a binary state, like on/off or true/false.

The Text control can be used for embedding longer text paragraphs, that need text wrapping, into your app

The text area is used to enter multiple lines of text. When empty, it can hold a placeholder similar to an input. You can define the height and width of the text area and also determine specific behavior when handling long texts.

A simple, large-sized text with explicit header/title semantics.

Cards

A card represents an app or page. It can be used to launch the app or navigate to the page content. Integration cards are a way of making application content available to end users in a consistent manner.

A Card that displays an image on the upper area, and a text and a footer on the lower area.

A Card that is structured like a business card. It displays an employee’s profile picture, name, contact and company information.

This widget group is structured like a comment section. In the upper part, you can insert your comment inside the Feed Input widget. In the lower part, a Card widget is displaying existing comments.

A Card that is displaying the details of a product. The Card includes a header with a title and subtitle, a detail section with an image and text, and a footer with an action button.

Container Element that displays header, subheader, and a customizable main area in a tile format.

Charts

Different types of charts. Charts contain and display large sets of values in an interactively rich and responsive way.

A Bar Chart to present your data in a visual form. The data is represented as vertical bars.
Based on the JavaScript library ChartJS (version 3.9.1).

A Doughnut Chart to present your data in a visual form. The chart is divided into segments, the arc of each segment shows the proportional value of each piece of data. In a Doughnut Chart, the segments of data look like the pieces of a doughnut.
Based on the JavaScript library ChartJS (version 3.9.1).

A Line Chart to present your data in a visual form. The data is plotted as data points on a line.
Based on the JavaScript library ChartJS (version 3.9.1).

A Pie Chart to present your data in a visual form. The chart is divided into segments, the arc of each segment shows the proportional value of each piece of data. In a Pie Chart, the segments of data look like the pieces of a pie.
Based on the JavaScript library ChartJS (version 3.9.1).

A Radar Chart to present your data in a visual form. The data is plotted as data points on lines around a center point.
Based on the JavaScript library ChartJS (version 3.9.1).

Dialogs

A Date and Time Picker, including a popup calendar to select a date and a time.

A popup Dialog for displaying messages or other content, like forms, in a screen overlay.

A simple Dialog with a title, a text message and an OK-button.

A small, non-disruptive popup for messages that disappears automatically after a few seconds

Forms

A form is used to present data to the user and to allow users to enter data in a structured way.
The form acts as a container for other UI elements (such as labels, input fields, checkboxes, and sliders), while structuring these into a specific layout.

A Simple Form to display an address.

A Simple Form to display contact data (e.g, mail, phone, mobile).

The Simple Form provides an easy-to-use way to create basic forms. A Label inside the form indicates a new row, and all other controls following the Label will be placed inside the same row.

Layouts

Layouts are used to build and structure application pages.

A Header Bar for your application screen that includes a title, an avatar and a logout button.

A 3-column Base Layout for your application. Also includes a header and a footer bar.

A layout consisting of responsive blocks of different sizes. You can place images, texts, etc. inside the blocks.

A Center Layout for positioning an element in the center of an application screen.

The Dynamic Page is a base structure for your application that comes with empty content containers (page header, page content) and built-in responsive behavior.

A Base Layout for arranging content in a grid-like structure. Use this widget group to create flexible, responsive application layouts.

A Base Layout to display elements in a row (horizontally).

A Container with scroll functionality that can be used for text and other controls (e.g., buttons). The Panel does not layout the embedded controls.

A Layout that is divided into three parts: the Toolbar, the Side Menu and the Main Content.
Based on OpenUI5’s ‘tnt.ToolPage’ with ‘tnt.SideNavigation’.

The widget group Tabs represents a collection of tabs with associated content for navigating and structuring content without switching screens.

A Layout that is divided into three columns, which are seperated with a small margin.

A Footer Bar for your application screens. Includes a Button to trigger an action.

A Header Bar with a left, middle and right area where content can be placed.

A Layout that is divided into two columns, which are seperated with a small margin.

A Base Layout to display elements vertically in a column.

Lists

Includes Tables, Lists and more. Usually contains homogeneous data displayed in rows.

A Simple List to display multiple data entries.

An element for searching values, with an additional option to scan a barcode (on mobile devices only).

An input field to search for a specific value.

Table for displaying multiple records, with filter and sorting functions – optimized for responsive designs on mobile devices.

Maps

Maps are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes.

A mobile-friendly and interactive map based on the JavaScript library Leaflet.

Media

An element to present images and other content like a slideshow.

Displays an Image that is clickable. The displayed image will be opened in a dialog when clicked.

Use this widget group to embed Videos from well known Video Providers (e.g., YouTube).

Wizard

Enables users to accomplish a single goal which consists of multiple sub-tasks. Guides the user through these sub-tasks step-by-step.

Represents a sub-task in the Wizard widget group.
This container includes a DatePicker so that the user can, for example, select an appointment date or their birth date.

Represents a sub-task in the Wizard widget group.
This container includes a Form so that the user can, for example, insert their contact data.

Represents a sub-task in the Wizard widget group.
This container includes multiple Texts that can be used to give the user some information/instructions.

Represents a sub-task in the Wizard widget group.
This container includes a List to give the user an overview on all available options to select from.

Represents a sub-task in the Wizard widget group.
This container includes RadioButtons, Checkboxes and Dropdown menus, which can all be used to let the user select one/multiple options.