How to concatenate multiple property bindings into one

Question

I have an OData source that gives result rows that contain first_name & last_name.

I want to display these in a table with a column called Full Name.

I'm trying to use a JSView (It seems less kludgy than XML).

I can do a 1:1 binding like this:

var template = new sap.m.ColumnListItem({
  // ...,
  cells: [
    new sap.m.Text({
      text: "{first_name}"
    })
  ]
});

But I cannot figure out how to bind / concatenate multiple fields to the Text control, or alternatively how to put multiple Text controls into one cell.

EDIT: This is not the exact same as the other suggested solution because this is for JSView instead of XMLView.

Answer 1

You can just use below format to concatenate the two values using simply binding.

XML

<Text text="{first_name} {last_name}" />

JS

new sap.m.Text({
  text: "{first_name}  {last_name}"
});

Prerequisite

In order to enable complex binding syntax (aka CompositeBinding), the following bootstrap setting is required:

<script id="sap-ui-bootstrap" src="https://.../resources/sap-ui-core.js"
  data-sap-ui-compatversion="edge"
  ...
>

^{From: https://stackoverflow.com/a/41554735/5846045}

Answer 2

This took me several hours of searching and trial and error, but I finally figured out out to use a formatter callback:

    var template = new sap.m.ColumnListItem({
        id: "column_template",
        type: "Navigation",
        visible: true,
        cells: [
            new sap.m.Text("activity", {
                text:  {
                    parts: [
                        {path: "first_name"},
                        {path: "last_name"}
                    ],
                    formatter: function(a,b){
                        return a+" "+b;
                    }
                }
            })
        ]
    });

parts must apparently be an array of objects with a path property. The path value must match the odata source.

These values will then be passed to the formatter callback as arguments.

EDIT: you can also do simple concatenation with a template, but there is a trick - you must add data-sap-ui-compatVersion="edge" to your bootstrap and then the following will work:

new sap.m.Text("activity", {
    text: "{first_name} {last_name}"
});