SAPUI5 Data Binding Examples

This post lists several examples of simple and more complex data binding use-cases in SAP’s web technology SAPUI5. For more examples you should definitely check out the SAPUI5 Explored page.

Hello World!

One major strength of SAPUI5 is data binding. The sample connects the value of an input field with a heading via two-way data binding: Any change of the input’s value is immediately changing the heading.

Select from Array of Objects

This sample code feeds a sap.m.Select element from an array of objects. The displayed text is an attribute of the object, in this example called name . On selection change the onSelectionChanged method gets a reference to the object that is bound to the newly selected item for further processing of other attributes, e.g. value .

Table from Array of Objects

The following snippet fills an entire table (sap.m.Table) dynamically. The table content is stored in an object with an attribute holding all table rows. Each row has a button which can be pressed in order to get additional information about the object that the row corresponds to.