UI5 application (in WebIDE): sap.m.ColumnListItem: Change entire row color depending on a value in one column: What is wrong?

Question

I googled how to change the color of a row inside a table ( ColumnListItem ) based on a value inside a column. I found a lot of google results and from all of the results I chose the one, which avoids to use predefined ( or individually defined ) css's inside my project folder. BTW, even inside the F12-browser-tools (modifying the css orsuch stuff at the frontend) seems not to work as expected.

I followed this approach ( quite old post ) and cannot get it working:

https://archive.sap.com/discussions/thread/3360580

The table line simply should become green, yellow, or red.

This is my code so far, inside onInit ( first part, creating the template )

var oTable = this.byId("companySecret"); 
        var oView = this.getView();

        var oTemplate = new sap.m.ColumnListItem({
            cells: [
                new sap.m.Text({
                    text: "{Col1}"
                }),
                new sap.m.Text({
                    text: "{Col2}"
                }),
                new sap.m.Text({
                    text: "{Col3}"
                }),
                //
                // ALL OTHER COLUMNS
                // 
                // The only difference is that I do this inside the "loop".

                new sap.ui.commons.TextView({
                text: "{Color}"
                }).bindProperty("text", "Color",function(cellValue)
                    {
                        var backgroundColor = "red";         

                        var cellId = this.getId();

                        var row_col = $("#"+cellId);

                        // As You see, I am quite desperate
                        $("#"+cellId).css("background-color","#FF0000");
                        $("#"+cellId).parent().css("background-color","#FF0000");
                        $("#"+cellId).parent().parent().css("background-color",'#FF0000');
                        $("#"+cellId).parent().parent().parent().css("background-color","#FF0000");
                        $("#"+cellId).parent().parent().parent().parent().css("background-color","#FF0000");
                        $("#"+cellId).parent().parent().parent().parent().parent().css("background-color","#FF0000");


                        return cellValue;
                    })

            ]
        });

Immediately after these lines, the binding is initiated like this:

        var sUrl = "/sap/opu/odata/sap/Z_COMPANY_SECRET/";
        var oModel = new sap.ui.model.odata.v2.ODataModel(sUrl, false);
        oTable.setModel(oModel);
        oTable.bindAggregation("items", {path: "/Company_Secret", template: oTemplate });

So, what am I missing ? In the referred link the adopted answer is flagged as "helpful" so it MUST work. Any hints ? Thx in advance.

Answer 1

I know this is already an old question, but might be able to help others.

Jorg's answer is probably the cleaner approach. I use the same approach as well.

Generally, it's cleaner and a lot safer to avoid using and accessing auto-generated Control-IDs (especially with the jQuery selector) as these IDs are most likely to change whenever the model it's bound to is refreshed.

By using the CustomData-CSS approach, you get to take advantage of the binding and not worrying about changing IDs or finding the right ID for a list/row item that's bound to change anyway, when the model is refreshed.

You just have to maintain some CSS. Which is simpler and much cleaner. :)

If it helps, I converted your code to conform to Jorg's answer. See below:

new sap.ui.commons.TextView({
    text: "{Color}"
}).addCustomData(new sap.ui.core.CustomData({
    key: "color",
    value: "{= $(argument) ? 'red' : 'green'}",
    writeToDom: true
}));

And in CSS, should be the same as Jorg's:

tr[data-color="red"] {
   background-color: red;
}

I hope this helps!

Answer 2

To manipulate a table line, I generally use a custom attribute on the row via XML:

<Table>
  <columns>
    <Column><Text text="value"/></Column>
  </columns>
  <items>
    <ColumnListItem type="Active">
      <customData>
        <core:CustomData key="color" value="{= ${MyArgument} ? 'red' : 'green'}" writeToDom="true" />
      </customData>          
      <cells>
        <ObjectIdentifier text="{Value}"/>
      </cells>
    </ColumnListItem>
  </items>
</Table>

This writes a data attribute called data-color to the tr element on the DOM with value either red or green. Expand this with your own logic, or use a formatter like you would on any other value if the check is to long or unwieldy.

You can then manipulate the attribute via your included CSS file:

tr[data-color="red"] {
   background-color: red;
}

Works for me.

You might be able to do something like

document.querySelectorAll('tr[data-color="red"]').forEach(s => s.style.backgroundColor = 'red');