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.
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.
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.
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 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.
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.
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.
A Line Chart to present your data in a visual form. The data is plotted as data points on a line.
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.
A Radar Chart to present your data in a visual form. The data is plotted as data points on lines around a center point.
A Date and Time Picker, including a popup calendar to select a date and a time.
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
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.
A layout consisting of responsive blocks of different sizes. You can place images, texts, etc. inside the blocks.
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’.
A Layout that is divided into three columns, which are seperated with a small margin.
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.
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 are used to visualize data in an easy and intuitive way. A map is a symbolic visual illustration of areas, regions, and themes.
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.
Enables users to accomplish a single goal which consists of multiple sub-tasks. Guides the user through these sub-tasks step-by-step.