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?

Adding `data-sap-ui-compatversion="edge"` is the current best practice. See https://stackoverflow.com/a/41554735/5846045 — Boghyon Hoffmann, Dec 03 '19 at 13:13

score 14 · Accepted Answer · answered Mar 25 '14 at 06:54

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

score 9 · Answer 2 · answered Mar 11 '14 at 11:36

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

score 0 · Answer 3 · edited Mar 17 '14 at 15:20

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

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

score 0 · Answer 4 · answered Mar 26 '14 at 08:29

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.

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

4 Answers4