Conditional formatting in table line

Question

Hello dear colleagues,

I want to bold the total line and set highlight to red.

I am using the event modelContextChange:

                    <ColumnListItem vAlign="Middle" modelContextChange="onModelContextChange">
                    <cells>
                        <!--<ObjectIdentifier title="{Name}" text="{year}"/>
                        <Text text="{month}"/>-->
                        <Text text="{salesOrganization}" modelContextChange="onTextContextChange" />
                        <Text text="{product}" />

The event code:

        onModelContextChange: function (oEvent) {
        debugger
        var oListItems = oEvent.getSource();
        var oObject = oListItems.getBindingContext().getObject();
        if (oObject.salesOrganization === "Total") {
            // debugger
            oListItems.setHighlight("Error");
            // oText.addStyleClass("boldText");
        } else {
            oListItems.setHighlight("Information");
        }
    },

The issue with this approach is that when the context does not change the Highlight does not work properly. I´ve tried using custom formatted, but I could not make it work. Also, I could not find a way to read the row value to do the same logic above.

Would you give me any hint on how achieve it?

Thanks a lot Pietro

Answer 1

View:

<Table mode="SingleSelectMaster" select="selectItem">

Controller:

selectItem: function(oEvent){
    const oSelectedItem = oEvent.getSource().getSelectedItem();
    oEvent.getSource().getItems().forEach(oItem => oItem.removeStyleClass("boldText")); //Remove bold class from all items
    oSelectedItem.addStyleClass("boldText"); //Add class to selected item
},

CSS:

.boldText>td>span{
    font-weight: bold !important;
}