CODEWITHSUNDEEP
sapui5
Kitty
Kitty

Reputation: 187

How to concatenate multiple property bindings

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?

Upvotes: 1

Views: 14056

Answers (2)

cschuff
cschuff

Reputation: 5542

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.

Upvotes: 4

Haojie
Haojie

Reputation: 5713

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>

Upvotes: 4

Related Questions