Change CSS based on status value using Formatter Function XML View

[AbhishekSharma]

Hi Gurus,

I am asking question and similar which is already asked many times but not what I need help on...

I want to apply css class to control based on some status column value dynamically. I am using XML view and want to use Formatter function to check status and return CSS class name. This is not happening.

Wanted to know if this is even Possible with Formatter function. When I tried to change text using Formatter function it is working fine. I do not want to use Javascript to create these control dynamically and add Style...

Below is my current code:

<GenericTile header="{SHIP_TO_PARTY}" visible="true"  frameType="TwoByOne" class="Y">
<TileContent unit="" footer="{DOCKED_AT_DOOR}" >
                                <HBox class="sapUiTinyMarginTop">
                                    <VBox class="marginleft">
                                        <HBox>
                                            <VBox>
                                                <Text id="lbldate1” text="Enrolled Date" class="{path: 'DOCKED_AT_DOOR', formatter : '.formatter.formatColor'}"></Text>
                                            </VBox>
                                        </HBox>
                                    </VBox>
                                </HBox>
                            </TileContent>
                        </GenericTile>

 Formatter.js

sap.ui.define([], function () {
    "use strict";

    return {
        formatColor: function (v) {
            // if (v === "Y") {
            //  this.addStyleClass("green");
            // } else {
            //  this.addStyleClass("red");
            // }
            // return v;
            var sResult = "";
            if (v === 'Y') {
                sResult = "green";
            } return sResult;
        }
    };
});

Please help...

Thanks-

[Ryan-Crosby]

Wouldn't it be easy to confirm by debugging in the browser?

[junwu · Accepted solution]

<Text id="lbldate1” text="Enrolled Date" >
 <customData>
                                <core:CustomData key="anynameyoulike" value="{DOCKED_AT_DOOR}" writeToDom="true" />
                                </customData>
</Text>
                                            

your css

[data-anynameyoulike='Y']{
    color: #FFFF00;
}

you can figure out the rest
you may need to adjust the css a bit.

[AbhishekSharma · Accepted solution]

Thank you for helping me...