How to directly bind two data properties into one control property using OData model?

Question

I am using an OData model to bind UI controls to GW services. In the service metadata, there are, say, "FirstName" and "LastName" in the data structure. On the UI, say, I am using a Label control.

Now the question is how to bind the Text property of Label to a string of "FullName" (which is "FirstName"+"LastName") using OData Model directly? If I use the JSON model, I can create a local variable, FullName = FirstName + LastName, and bind the Text property to FullName. But how could I do this using OData Model?

Answer 1

Additionally, you can enable complex data binding in sap-ui-core.js:

<script src="resources/sap-ui-core.js"
        id="sap-ui-bootstrap"
        data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.ui.ux3"
        data-sap-ui-xx-bindingSyntax="complex"></script>

And then use both properties:

var oLabel = new sap.ui.commons.Label({
        text : "{firstName} {lastName}"
});

Answer 2

You could use calculated fields for data binding, for instance:

var oLabel = new sap.ui.commons.Label()
.bindProperty("text", {
  parts: [
    {path: "/firstName", type: new sap.ui.model.type.String()},
    {path: "/lastName", type: new sap.ui.model.type.String()}
  ],
  formatter: function(firstName, lastName){
    return firstName + " " + lastName;
  }
});