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;
  }
});

Answer 3

1. would be to use a Calculated Column from the view by creating a new column and adding the new field.

2. would be to use the formatter property. please refer to the example below:

   new sap.ui.commons.TextView ({ 
       text: {  path: o.value, // o is an object in my local scope
           formatter: function(i) {
               // after getting your col1 and col2 values you could do the following
               var yourConcatValue = col + col2;
               return yourConcatValue;
           }                                
      }                          
   });
   

Answer 4

Both Qualitue and Nikolay's solutions work fine. For simple combined binding case, ie, just put two strings together, Nikolay's is better as it is simple to do. The key point is to set the data-sap-ui-xx-bindingSyntx="complex", otherwise, it wno't work. For more complicated binding cases, ie, need to change the data type first and then binding, Qualiture's is worth doing. It is more general solution but also more complex to do.