How can customData can be binded with JavaScript

Question

In the affected application is a responsive table whose ColumnListItems are added via JavaScript code. Now the lines should be highlighted by the highlighting mechanism depending on their state. The first idea was to control the whole thing via a normal controller function. I quickly discarded the idea, since the formatter is intended for such cases. So I created the appropriate Formatter function and referenced it in the JavaScript code. The call seems to work without errors, because the "console.log" is triggered in each case. Also the transfer of fixed values is possible without problems. However, the values I would have to transfer are located within customData of each line... No matter how I try to form the path I get an "undefined" or "null" output.

I have already tried the following paths:

"/edited"
"/customData/edited"
"mAggregations/customData/0/mProperties/value"
"/mAggregations/items/0/mAggregations/customData/0/mProperties/value"

The code from Controller.js (with consciously differently indicated paths):

var colListItem = new sap.m.ColumnListItem({
   highlight: {
        parts: [{
            path: "/mAggregations/items/0/mAggregations/customData/0/mProperties/value"
            }, {
            path: "/edited"
            }],
        formatter: Formatter.setIndication
    },
    cells: [oItems]
});
// first parameter to pass while runtime to the formatter
colListItem.data("editable", false);
// second paramter for the formatter function
colListItem.data("edited", false);
oTable.addItem(colListItem);

The code from Formatter.js:

setIndication: function (bEditable, bEdited) {
    var sReturn;
    if (bEditable && bEdited) {
        // list item is in edit mode and edited
        sReturn = "Error";
    } else if (bEditable || bEdited) {
        // list item is in edit mode or edited
        sReturn = "Success";
    } else {
        sReturn = "None";
    }
    return sReturn;
}

The goal would also be for the formatter to automatically use the value of the model in order to avoid its own implementation of a listener, etc. I hope one of you has a good/new idea that might bring me a solution :) Many thanks in advance!

I think you should bind your item to a model. Custom data seems like the wrong approach here. — Marc

futu futu · Accepted Answer · 2019-04-23T15:33:46

You cannot bind against the customData. Because the customData is located in the element, it is like a property.

Thats why you defined it here on colListItem: colListItem.data("key", value)

You only can bind against a model.

So I see three solutions

Store the information in a separate local JSON model whereof you can speficy your binding path to supply the values to your formatter
Do not supply the information via a binding path to the formatter, but read a model/object/array from a global variable in the controller holding the information via this (=controller) in formatter function
Store the information in the customData of each element and access the element reference in the formatter function via this(=ColumnListItem).data(). Passing the context to the formatter similar to this formatter: [Formatter.setIndication, colListItem]

Cons of 1. and 2: you need a key for a respective lookup in the other model or object.

From what I understand I would solve it with solution 3.

How can customData can be binded with JavaScript

1 Answers