Add Widgets to the Screen
To fill your screen with UI elements like text fields, charts or action buttons, use the widget panel on the left side. First, select the OpenUI5 version.
Via the filter, only the compatible widgets matching the stored UI5 version of the application are displayed.
Search for a specific widget using the name or just browse the list, then add the widget to the screen via the plus icon. The widget will appear in the content area of the selected screen.
Sort Widgets in the right order
|Widgets can also be nested in a structured hierarchy – representing the positions within the document structure. For example, a table must have columns and rows – so the columns and rows have to be added nested underneath the table element. So in the first step, add the table to the existing screen. After that, select the table and then add columns.|
The column widget is now nested under the table widget.
You can also use the arrow keys to structure the widgets in the content area into a hierarchy, or alternatively use WASD on your keyboard.
|W or||moves the widget upwards|
|A or||de-nests the widget|
|S or||moves the widget downwards|
|D or||nests the widget underneath the one above (if possible)|
With the arrow keys on your keyboard, you can navigate through the content area as follows:
|Up ↑||Navigates up|
|Down ↓||Navigates down|
|Right →||Opens the currently selected tree item (if possible)|
|Left ←||Closes the currently selected tree item (if possible)|
Copy Widgets within the Screen Content
|You can copy Widgets and insert them on a different Screen or even another Application. For that, use the Copy, Cut and Paste function.|
Edit Widget Properties
Every widget has properties to configure how the widget behaves. In the following example the properties of a button widget are shown.
In this example, the text property represents the text shown on the button in the user interface.
If you want to set an icon to a widget, use the following syntax:
Client Validation of Default Properties
The data type of default properties in application items can now be overwritten, but only domain types with the same basic type can be used.
You can find the settings in the Properties panel of the UI Designer. The button opens a popover, which lets you define the data type and the validation event. If the validation is enabled (checkbox), an indicator will be displayed. You can change the valueState and valueStateText as result.
In this example, we wanted to make sure, that the input field will be filled with the correct data, a ZIP Code. Therefore we added the validation for the predefined Datatype “ZIP” (a String with exactly 5 numbers) on the change Event.
|Now, if you open the application in the preview and type in anything else than 5 numbers, the valueState of the input field would change to “ERROR” and the valueState text “Wrong Input” is displayed.|