Here you find a selection of our standard widgets. Please take a look at the OpenUI5 Documentation if the widget you are looking for is not listed here. For guidance on how to use widgets for layouting and designing your apps please also see the FIORI Guidelines
|Button||The user triggers an action by clicking or tapping the Button or by pressing certain keyboard keys, such as Enter.|
|Bar||The Bar control consists of three areas to hold its content. It has the capability to center content, such as a title, while having other controls on the left and right side.|
|IconTabFilter||Represents a selectable item inside an IconTabBar.|
|Panel||The panel is a container that has a header and content for grouping and displaying information. It can be collapsed to save space on the screen.|
|Toolbar||Horizontal containers most commonly used to display buttons, labels, selects and various other input controls.|
|ToolbarSpacer||Adds horizontal space between the items used within a sap.m.Toolbar.|
|Image||A wrapper around the IMG tag. The image can be loaded from a remote or local server.
Density related image will be loaded if image with density awareness name in format [imageName]@[densityValue].[extension] is provided. The valid desity values are 1, 1.5, 2. If the original devicePixelRatio isn’t one of the three valid numbers, it’s rounded up to the nearest one.
There are various size setting options available, and the images can be combined with actions.
|Label||Provides a textual label for other controls. Labels are used as titles for single controls or groups of controls. Labels for required fields are marked with an asterisk.
Label appearance can be influenced by properties, such as textAlign, design, displayOnly, wrapping and wrappingType.
|Text||The Text control can be used for embedding longer text paragraphs, that need text wrapping, into your app. If the configured text value contains HTML code or script tags, those will be escaped.|
|Title||The Title control is a simple, large-sized text containing additional semantic information for accessibility purposes.|
|FlexBox||The sap.m.FlexBox control builds the container for a flexible box layout.
Note: Be sure to check the renderType setting to avoid issues due to browser inconsistencies.
|ui_layout_form_SimpleForm||The SimpleForm control provides an easy-to-use API to create simple forms. Inside a SimpleForm control, a Form control is created along with its FormContainer elements and FormElement elements, but the complexity in the API is not exposed to the user.|
|ui_layout_Grid||A layout control which positions its child controls in a 12 column flow layout.
The Grid control’s children can be specified to take on a variable amount of columns depending on available screen size. With this control, it is possible to achieve flexible layouts and line-breaks for extra large-, large-, medium- and small-sized screens, such as large desktop, desktop, tablet, and mobile.
The Grid control’s width can be percentage- or pixel-based and the spacing between its columns can be set to various predefined values.
|ui_layout_GridData||Defines layout data for the sap.ui.layout.Grid.
Note: When GridData is used for controls inside a form, the linebreak property has to be set to true if the next form element has to be displayed on a new line. Otherwise, the GridData overrides the layout provided by the Form.
|Column||The sap.m.Column allows defining column specific properties that will be applied when rendering the sap.m.Table.|
|ColumnListItem||sap.m.ColumnListItem can be used with the cells aggregation to create rows for the sap.m.Table control. The columns aggregation of the sap.m.Table should match with the cells aggregation.
Note: This control should only be used within the sap.m.Table control. The inherited counter property of sap.m.ListItemBase is not supported.
|List||The List control provides a container for all types of list items. For mobile devices, the recommended limit of list items is 100 to assure proper performance. To improve the initial rendering of large lists, use the “growing” feature. Please refer to the SAPUI5 Developer Guide for more information.|
|Table||sap.m.Table control provides a set of sophisticated and convenience functions for responsive table design. To render the sap.m.Table properly, the order of the columns aggregation should match with the order of the items cells aggregation (sap.m.ColumnListItem). Also sap.m.Table requires at least one visible sap.m.Column in columns aggregation. For mobile devices, the recommended limit of table rows is 100 (based on 4 columns) to assure proper performance. To improve initial rendering on large tables, use the growing feature.|
|ui_core_Item||A control base type.|
|Dialog||A popup that interrupts the current processing and prompts the user for an action or an input in a modal mode.|
|CheckBox||The CheckBox control consists of a box and a label that describes its purpose. If it’s checked, an indicator is displayed inside the box.
To select/deselect the CheckBox, the user has to click or tap the square box or its label. Clicking or tapping toggles the CheckBox between checked and unchecked states. The CheckBox control only has 3 states – checked, unchecked and partially selected.
|ComboBox||The control represents a drop-down menu with a list of the available options and a text input field to narrow down the options.|
|Input||Allows the user to enter and edit text or numeric values in one line.|
|Select||The sap.m.Select control provides a list of items that allows users to select an item.|
|TextArea||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.|