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.

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 third snippet acquires a reference to the object that is bound to the newly selected item for further processing of other attributes, e.g. value .

<Select id="selectId" items="{modelPath>/arrayName}" change="onSelectionChanged">
  <core:ListItem key="{modelPath>name}" text="{modelPath>name}" />
// model
var model = new sap.ui.model.json.JSONModel();
  arrayName: [
      name: "First Item",
      value: 100
      name: "Second Item",
      value: 123

this.getView().setModel(model, "modelPath");

Getting the value attribute when the onSelectionChanged event is fired.

onSelectionChanged: function(oEventArgs) {
  var selectedItem = oEventArgs.getSource().getSelectedItem();
  var context = selectedItem.getBindingContext("modelPath");
  // get binding object (reference to an object of the original array)
  var arrayObject = context.oModel.getProperty(context.sPath).data;
  var value = arrayObject.value;

Table from Array of Objects

The following two snippets fill an entire table (sap.m.Table) dynamically, that includes a variable number of columns and rows. The table content is stored in an object with two attributes, namely columns and rows . Columns is an array of strings representing the column heading, while rows holds objects with attributes representing the cells of the final table.

SAPUI5 sap.m.Table
The sap.m.Table element.
function initTable(wrapper, modelName, bindingPath) {
  var table = new sap.m.Table({ width: 'auto' });
  // table header
    "columns", modelName + ">/" + bindingPath + "/columns", 
    function(index, context) {
      return new sap.m.Column({
    	header: new sap.m.Label({ text: context.getObject() }),
    	demandPopin: true,
    	minScreenWidth: "Large"
  // table rows  
    "items", modelName + ">/" + bindingPath + "/rows", 
    function(index, context) {
      var obj = context.getObject();
      var row = new sap.m.ColumnListItem();
      for (var k in obj) { // columns
        row.addCell(new sap.m.Text({ text: obj[k] }));
      return row;

  return table;
// model
var model = new sap.ui.model.json.JSONModel();
  outputTableContent: {
    columns: ["First column", "Second header"],
    rows: [
      { first_col: "cell content", second_col: "second cell" }
      { first_col: "second row", second_col: "B2" }
      { first_col: "C1", second_col: "C2" }

this.getView().setModel(model, "modelPath");

this.outputTable = initTable(
  this.getView().byId("outputTableWrapper"), // wrapper element
  "modelPath", // model
  "outputTableContent" // binding path

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 *