SAPUI5 Data Binding Examples

This post lists several examples of simple and more complex data binding use-cases in SAP’s web technology SAPUI5.

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}" />
</Select>
// model
var model = new sap.ui.model.json.JSONModel();
model.setData({ 
  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 bindingContext = 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
  table.bindAggregation(
    "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  
  table.bindAggregation(
    "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;
    }
  );

  table.placeAt(wrapper);
  return table;
}
// model
var model = new sap.ui.model.json.JSONModel();
model.setData({ 
  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
);

Leave a Reply

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