CODEWITHSUNDEEP
javascriptsapui5
Dr. Dong Zhu
Dr. Dong Zhu

Reputation: 101

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

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?

Upvotes: 6

Views: 18476

Answers (4)

Dr. Dong Zhu
Dr. Dong Zhu

Reputation: 101

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.

Upvotes: 0

Nikolay Nadorichev
Nikolay Nadorichev

Reputation: 901

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

Upvotes: 14

Sergio Guerrero
Sergio Guerrero

Reputation: 1

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

Upvotes: 0

Qualiture
Qualiture

Reputation: 4920

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

Upvotes: 9

Related Questions