ui5 conditional format table cell

Question

Currently I have a table that pulls through data and formats the text if the number returned is green.

I cannot figure out how to change the background colour of the table cell depending on the cell value.

Is anyone able to point me in the right direction as I have no idea where to start and couldn't find any information on google.

This is what I have done previously to format the cell text.

Table Column:

<ObjectStatus 
    text="{dataModel>CurrentPerformanceIndicator}"
    state="{
        path: 'dataModel>CurrentPerformanceIndicator',
        formatter: '.formatter.statusText'
    }" />

Formatter:

statusText: function (sStatus) {
    switch (sStatus) {
        case 80:
            return "Success";
        default:
            return "None";
    }
}

Does this answer your question? [Binding in Control with "class" Attribute](https://stackoverflow.com/questions/42221962/binding-in-control-with-class-attribute) — Boghyon Hoffmann, Aug 23 '20 at 15:01

Ian MacGregor · Answer 1 · 2016-02-23T23:19:39.523

0

If your column position is fixed you could try something like this...

<ColumnListItem>
    <customData>
       <core:CustomData key="my-cell-background" value="{dataModel>CurrentPerformanceIndicator}" writeToDom="true" />
    </customData>
    <cells>
        <ObjectStatus text="{dataModel>CurrentPerformanceIndicator}" />
    </cells>
</ColumnListItem>

... and then add the following CSS to your stylesheet, replacing the 1 with the position of your column

[data-my-cell-background="80"] > td:nth-child(1) {
    background-color: #007833;
}

... or if you wanted to set the background of the entire row then change the CSS to

[data-my-cell-background="80"] {
    background-color: #007833 !important;
}

edited Feb 23 '16 at 23:19

answered Feb 23 '16 at 23:12

Ian MacGregor

513
1
4
11

thanks for your reply, I am getting this error: `CustomData with key my-cell-background should be written to HTML of Element sap.m.ColumnListItem#__item0-__xmlview1--tblWorkOrders-0 but the value is not a string` – neeko Feb 24 '16 at 08:58
Seems pretty obvious to me.. it's not a string, but it has to be a string. See https://openui5.hana.ondemand.com/docs/api/symbols/sap.ui.core.CustomData.html#getValue – Marc Feb 24 '16 at 10:57
As Marc mentioned the value needs to be a string so in your binding you can do this value="{= ${dataModel>CurrentPerformanceIndicator}.toString() }" or you can do similar via a formatter function – Ian MacGregor Feb 24 '16 at 23:39

Henry Caparas · Answer 2 · 2020-08-23T10:41:46.763

Had this same requirement and since SAPUI5 doesn't have the table property yet to directly change the cell color, I just made a workaround.

First of, if you are using sap.ui.table.Table, then you cannot directly add style class in your xml view template since it is cell aggregation we want to apply css to and not column aggregation.

Second, I put HBox(VBox will also do) in the template of rows before putting the Text control. In this approach, I can now add style class to the HBox since it will eat up the entire space of the cell thus, it will look like the cell is colored but the fact is, it is the HBox control that is colored.

CSS

.green {
background-color: #66FF33!important;}

View xml (table row)

<table:Column
    autoResizable="true"
    id="projecNameCol"
    width="17rem"
    filterProperty="ProjectName"
    sortProperty="ProjectName">
    <Label text="Project Name" class="customFontSizeSmall"/>
    <table:template>
        <HBox>
             <Text text="{ProjectName}" tooltip="{ProjectName}" wrapping="true"/>
             <customData> 
             <core:CustomData 
                key="bgcolor" 
                value="{= ${ProjectHealthCode} === 'Success' ? 'green' : ${ProjectHealthCode} === 'Warning' ? 'yellow' : ${ProjectHealthCode} === 'Error' ? 'red' : 'normal'}" 
                writeToDom="true" />
             </customData>
        </HBox>
    </table:template>
</table:Column>

ui5 conditional format table cell

2 Answers2