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

SAPUI5 sap.m.SelectThis 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.

Custom Data Type

Custom data types can be used to automatically format and validate input fields. Here is an example, where an IBAN input field is validated: SAPUI5 Custom Data Type.

Published by

Timo Denk

Software developer at SAP and Denk Development, student of Applied Computer Science at Baden-Württemberg Cooperative State University. Interested in programming, math, microcontrollers, and sports.

Leave a Reply

Your email address will not be published. Required fields are marked *