Open UI5 framework
Understanding Open UI5 framework
Open UI5 is the foundation for all UI components and their functionalities.
We want users to open a calendar and select a date.
The name of the component is sap.m.DatePicker. In the App Designer, the default name of the component is DatePicker.
On the page, the oDatePicker component is an input field that opens a calendar and allows the user to select a date.
You can add an app and page as parent components to the HTML5 root of the app.
You can then add the DatePicker to the page.
After saving, and activating Now you can see the date picker inside the app.
Aggregations
An aggregation is a parent-child relationship between two UI elements.
| There are aggregations that do not work and cause errors. Example: Inserting a Slider component directly in a list cause an error stating that a Slider is not a valid aggregation for a list. However, a list can contain a number of children, such as a StandardListItem. This will not cause problems. |
There is an IconTabBar component with three IconTabFilters, of which one contains a text component.
In this example, there is a MenuButton parent which contains a Menu component as child. Within that child, there are five MenuItem children, with two of them as sub-children to a parent’s MenuItem.
This produces the Menu button that reflects the same structure.
The table is built using sap.m.table as parent, with sap.m.Column components as children alongside a ColumnListItem. It contains five Text components.
We provide lots of these patterns as samples. You can also generate these structures automatically using wizards, such as with this table.
Events
Many of the components within the UI5 library contain events.
A Button component has a Press event. Within the event, you can write any JavaScript functionality you want. The event will be run every time the button is pressed. In this example, the button sends the app to the nextPage, sets a Lists visibility property to True and shows a message on the screen.
The SearchField component has a LiveChange event. The LiveChange event is triggered everytime a change is made in the field, such as a key being pressed. In this event, we have implemented a search on a list, so each key press updates the list with the search results based on what is typed.
You can always click on the properties of the components to view information about them. Here you can see a description of each event and when it is triggered.
Bindings
Binding is the ability to link data to specific parts of the UI components.
There is a list with an ObjectListItem child component. You can send an array of objects to the underlying data model of the list.
Within the ObjectListItem child component, you can bind properties. Here we have bound the Intro and Title properties to the Name and CustomerNumber keys of our data set.
This results in a list that automatically generates the same number of rows as there are objects in the array, with each row showing the values based on the bounded keys.
After these bindings are set up, your components will always reflect the data automatically. That means, only two objects are returned instead. You can see that the list reflects only these two rows.