CODEWITHSUNDEEP
sapui5
Nafees Abbasi
Nafees Abbasi

Reputation: 377

How to change css class runtime in SAPUI5

Tile Container

I've a custom tile. I want to add class/Change color on top HBox which is right now light green. so that color should be according to score (red,brown,dark green or light green) shown below. if score is above 80 it should be dark green. How can I do that.

Upvotes: 0

Views: 5632

Answers (2)

Stephen S
Stephen S

Reputation: 3994

You could use CSS with custom data assigned to the HBox control. A formatter would help to assign appropriate classes to the HBox based on the value.

XML:

<HBox width="200px" height="150px" backgroundDesign="Solid" >
        <items>
            ...
        </items>
        <customData>
            <core:CustomData 
                key="style-class" 
                value="{path:'/props/DLES', formatter:'.formatter.formatStyle'}" 
                writeToDom="true"/>
        </customData>
</HBox>

Formatter:

formatStyle : function(v){
        if(v>80){
            return "darkgreen";
        }
        else if(v > 60){
            return "green"
        }
        else if(v > 50){
            return "yellow"
        }
        else if(v > 40){
            return "brown"
        }
        else{
            return "red"
        }
    }

CSS:

[data-style-class=darkgreen] {
 background-color: #01870e !important
}
[data-style-class=green] {
 background-color: #7fc257 !important
}
[data-style-class=yellow] {
 background-color: #ffc300 !important
}
[data-style-class=brown] {
 background-color: #b73209 !important
}
[data-style-class=red] {
 background-color: #e00404!important
}

Upvotes: 2

PRADEEP Kumar
PRADEEP Kumar

Reputation: 243

You can do like this:- This works if we have static id 

$("#hbox_id").toggleClass('change_me newClass');

Upvotes: 0

Related Questions