Skip to Content
-1

CSS style cannot be set dynamically (Cell color)

Hi Experts,

I am trying to achieve requirement to give status on the basis of two parameters. I am able to achieve latest status but not able to achieve cell color. XML code: <Text id="idStatus" text="{parts :['parameter','parameter1'], formatter: '.formatter.availableColor'}"></Text> Formatter js availableColor: function(available, available1) { var that = this; var idText = that.getView().byId("idStatus"); idText.removeStyleClass("yellow"); if (available === "" && available1 === "Y") { idText.addStyleClass("yellow"); return "Keep"; } else if (available === "Y" && available1 === "Y") { return "Keep"; } else if (available === "N" && available1 === "Y") { idText.addStyleClass("yellow"); return "Keep"; } else if (available === "Y" && available1 === "") { return "Keep"; } else if (available === "" && available1 === "") { return available; } else if (available === "" && available1 === "N") { idText.addStyleClass("yellow"); return "Remove"; } else if (available === "N" && available1 === "N") { return "Remove"; } else if (available === "Y" && available1 === "N") { idText.addStyleClass("yellow"); return "Remove"; } else if (available === "N" && available1 === "") { return "Remove"; } } }; CSS style sheet: .yellow { background-color: #FFFF66 !important; } Json data : { "parameter": "", "parameter1": "Y", },{},{}....

Add a comment
10|10000 characters needed characters exceeded

  • XML code :
    <Text id="idStatus" text="{parts :['parameter','parameter1'],
        formatter: '.formatter.availableColor'}"></Text>
    
    
    Formatter.js code :
    availableColor: function(available, available1) {
                    var that = this;
                    var idText = that.getView().byId("idStatus");
                    idText.removeStyleClass("yellow");
    
                    if (available === "" && available1 === "Y") {
    
                        idText.addStyleClass("yellow");
                        return "Keep";
                    } else if (available === "Y" && available1 === "Y") {
                        return "Keep";
    
                    } else if (available === "N" && available1 === "Y") {
                        idText.addStyleClass("yellow");
                        return "Keep";
                    } else if (available === "Y" && available1 === "") {
                        return "Keep";
                    } else if (available === "" && available1 === "") {
                        return available;
                    } else if (available === "" && available1 === "N") {
                        idText.addStyleClass("yellow");
                        return "Remove";
                    } else if (available === "N" && available1 === "N") {
    
                        return "Remove";
                    } else if (available === "Y" && available1 === "N") {
                        idText.addStyleClass("yellow");
                        return "Remove";
                    } else if (available === "N" && available1 === "") {
                        return "Remove";
                    }
    
    
                }
    
            };
    
    CSS Code :
    .yellow {
        background-color: #FFFF66 !important;
    }
    
    JSON file :
    
    ["results"
    {
        "parameter": "",
        "parameter1": "",
    },{
        "parameter": "",
        "parameter1": "Y",
    },
    
    {
        "parameter": "",
        "parameter1": "N",
    },
    
    {
        "parameter": "Y",
        "parameter1": "Y",
    },
    
    {
        "parameter": "N",
        "parameter1": "N",
    },
    
    {
        "parameter": "Y",
        "parameter1": "",
    },
    
    {
        "parameter": "N",
        "parameter1": "",
    },
    
    {
        "parameter": "Y",
        "parameter1": "N",
    },
    
    {
        "parameter": "N",
        "parameter1": "Y",
    }]
  • Hi Ram,
    sorry but it's really diffucult read that code.

    Use the tool CODE on the top of comment form. :)

    Sebastiano

  • ...........

Related questions

3 Answers

  • Best Answer
    Posted on Oct 15, 2019 at 03:47 AM

    hi Ram,

    in your method availableColor, try using this.removeStyleClass("yellow"); and this.addStyleClass("yellow");

    No need of getting the control by ID because as you are using it in a table, ID is not going to be static.


    Thanks,

    Vaibhav

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Oct 14, 2019 at 11:46 AM

    Hi ram mishra

    Since the JSON contains table data I assume you are using the Text field in a Table.

    The element with id="idStatus" is used as template for the table rows. So, if you change idText you only change the template and the line created next will have this change (eg styleclass added).

    You can do something like this in the formatter function to change the actual appended row - (ok for static data)

    var oDataTable = this.getView().byId("table0");
    var oTableLines = oDataTable.getItems();
    if (oTableLines.length > 0) {
    	var cells = oTableLines[oTableLines.length - 1].getCells(); //last row
    
    	if (cells[0].getValue() === "changeClass") {
    		cells[1].addStyleClass("yellow");
    	}
    }
    

    or better check the table at every update:

    <Table id="table0" items="{ path: '/MyCollection' }"
           updateFinished="onUpdateFinished">
    
    onUpdateFinished: function () {
    	var oDataTable = this.getView().byId("table0");
    	var oTableLines = oDataTable.getItems();
    	for (var line = 0; line < oTableLines.length; line++) {
    		var cells = oTableLines[line].getCells();
    
    		if(cells[0].getValue() === "changeClass") {
    			cells[2].addStyleClass("yellow");
    		}
    
    
    	}
    }
    

    regards

    Domi

    Add a comment
    10|10000 characters needed characters exceeded

    • Hi Domi,

      This approach has constraint. If your table has growing property true then it will only read default 20 items now all the available data in that way have to remove growing property that may cause performance hick cups in case of huge data. Please check and let me know if this can be done using formatted how I tried using it.

      Thanks and Regards,

      RK

  • Posted on Oct 15, 2019 at 08:44 AM

    Hi Ram,

    You don't need to assign the style color class by default, let it be assigned based on the formatter function.

    Please try the following code in your formatter function.

    Formatter js code:
    availableColor:function(param1, param2){
    var idText = this.getView().byId("idStatus");
    if(param1!===param2)
    {
    idText.addStyleClass("yellow");
    if(param1===""){
    return param2;
    }
    else{
    return "Y";
    }
    }
    else
    {
    return param1;
    }
    }

    Do let me know in case you are still not able to meet the requirement.

    Regards,

    Rohit

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.