How to concatenate multiple property bindings

Question

How can we concatenate data in binding JSON

{
  "firstName": "John",
  "lastName": "Doe",
  "birthday": {
    "day": "01",
    "month": "05",
    "year": "1982"
  },
  "address": [
    {
      "city": "Heidelberg"
    }
  ],
  "enabled": "true"
}

I am able to bind single property to label

txt.bindText("data>/birthday/year/");

But I have do display date for that I am trying to concatenate

var dData = "data>/birthday/day/" + " : "+"data>/birthday/month/" + " : " + "data>/birthday/year/";

It is not working. What is proper way to write?

Possible duplicate of [How to concatenate multiple property bindings into one](https://stackoverflow.com/questions/56707828/how-to-concatenate-multiple-property-bindings-into-one) — Boghyon Hoffmann, Jun 26 '19 at 18:55

score 4 · Accepted Answer · answered Sep 24 '14 at 07:16

Define a formatter function. Please check and run the code snippet.

<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m,sap.ui.commons"></script>

<script id="view1" type="sapui5/xmlview">
    <mvc:View xmlns:core="sap.ui.core" xmlns:layout="sap.ui.commons.layout" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.ui.commons" controllerName="my.own.controller" xmlns:html="http://www.w3.org/1999/xhtml">
        <layout:VerticalLayout id="vl">

        </layout:VerticalLayout>
    </mvc:View>
</script>


<script>
    sap.ui.controller("my.own.controller", {

        onInit: function() {
            var data = {
                "firstName": "John",
                "lastName": "Doe",
                "birthday": {
                    "day": "01",
                    "month": "05",
                    "year": "1982"
                },
                "address": [{
                    "city": "Heidelberg"
                }],
                "enabled": "true"
            };
            var oText = new sap.m.Text();
            oText.bindProperty("text", {
                parts: [
                    "data>/birthday/year/",
                    "data>/birthday/day/",
                    "data>/birthday/month/"
                ],
                formatter: function(year, day, month) {
                    return day + ":" + month + ":" + year;
                }
            });
            var oVl = this.getView().byId("vl");
            oVl.addContent(oText);
            var oModel = new sap.ui.model.json.JSONModel();
            oModel.setData(data);
            sap.ui.getCore().setModel(oModel, "data");

        },

    });


    var myView = sap.ui.xmlview("myView", {
        viewContent: jQuery('#view1').html()
    }); // 
    myView.placeAt('content');
</script>

</head>

<body class='sapUiBody'>
    <div id='content'></div>
</body>

score 4 · Answer 2 · answered Oct 16 '14 at 11:10

4

In XMLViews you don't even need a formatter. It's as easy as:

<m:Text text="{data>/birthday/day} : {data>/birthday/month} : {data>/birthday/year}" />

Not quite sure if there is a short syntax like this for JSViews as well.

Furthermore you could make use of the UI5 Type System to get your date properly formatted for every locale.

answered Oct 16 '14 at 11:10

cschuff

5,502
7
36
52

What if you had firstname, lastname as two odata fields and you wanted to render `Firstname Lastname` - In other words, not just concatenating the fields, but also Uppercasing them. It's obvious how to do that with a JSView, but I'm not sure about an XMLView. – Paul Wieland Jun 21 '19 at 17:25

How to concatenate multiple property bindings

2 Answers2