How to highlight the table cell color in respective colors as needed per the requirements??

[Former Member]

var aData = [

    {notificationNo: "10000000", description: "Maintenance for boiler", location: "G001-STG-UTLR-BLR", equipmentNo: "100000053", orderStatus: "ordered"},

    {notificationNo: "10000010", description: "Genreal Maintenance for boiler", location: "G001-STG-UTLR-BLR", equipmentNo: "100000053", orderStatus: "notordered"},

    {notificationNo: "10000011", description: "boiler Maintenance", location: "G001-STG-UTLR-BLR", equipmentNo: "100000053", orderStatus: "ordered"},

    {notificationNo: "10000012", description: "Pump breakdown", location: "G001-STG-UTLR-BLR", equipmentNo: "100000053", orderStatus: "ordered"},

    {notificationNo: "10000013", description: "External service boiler", location: "G001-STG-UTLR-BLR", equipmentNo: "100000053", orderStatus: "notordered"},

];

jQuery.sap.require("sap.ui.model.json.JSONModel");

var oEnterpriseAsset_NotificationConsole;

sap.ui.model.json.JSONModel.extend("EAM_Notification_Console", {

    CreateNotificationConsole:function(){

        oEnterpriseAsset_NotificationConsole = this;

            var oTable = new sap.ui.table.Table({

            //title: "Table Example",

            visibleRowCount: 7,

            firstVisibleRow: 3,

            selectionMode: sap.ui.table.SelectionMode.Single,

        /*    toolbar: new sap.ui.commons.Toolbar({items: [

                new sap.ui.commons.Button({text: "Button in the Toolbar", press: function() { alert("Button pressed!"); }})

            ]}),

            extension: [

                new sap.ui.commons.Button({text: "Button in the Extension Area", press: function() { alert("Button pressed!"); }})

            ]*/

        }).addStyleClass("tableform");;

        oTable.addColumn(new sap.ui.table.Column({

        label: new sap.ui.commons.Label({text: "Notification"}),

        template: new sap.ui.commons.Link().bindProperty("text", "notificationNo").bindProperty("href", "href",

                function(aValue)

                    { 

                    }

                ),

        //    sortProperty: "notificationNo",

            //filterProperty: "notificationNo",

            width: "200px"

        }));

        oTable.addColumn(new sap.ui.table.Column({

            label: new sap.ui.commons.Label({text: "Description"}),

            template: new sap.ui.commons.Link().bindProperty("text", "description").bindProperty("href", "href"),

            //sortProperty: "notificationNo",

            //filterProperty: "notificationNo",

            //width: "200px"

        }));

        var oModel = new sap.ui.model.json.JSONModel();

        oModel.setData({modelData: aData});

        oTable.setModel(oModel);

        oTable.bindRows("/modelData");

    var idForTable= "DimTable"

        //alert("id of tbale " + idForTable);

        var htmlOutput = '<table id=' + idForTable + ' name="DimTab" style="border: 1px solid black;margin-left:15px;" cellpadding=6 cellspacing=0><tr style="background-color:#E5E5E5"><td><b>Dimension</b></td><td><b>Value</b></td></tr>';

        for(var i=0;i<aData.length;i++)

        {

         alert(aData[i].notificationNo);

        htmlOutput += '<tr style="display:none;"><td style="border-right:1px solid #e5e5e5;">Contract No</td><td>'+ aData[i].notificationNo+'</td></tr>';

        htmlOutput += '<tr style="display:none;"><td  style="border-right:1px solid #e5e5e5;">Unit No</td><td>'+ aData[i].description+'</td></tr>';

        }

        htmlOutput += '</table>';   

         var html2 = new sap.ui.core.HTML({

             // static content

             //content : "<div style='position:relative;background-color:white;'>Weather</div><script src='//www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/builtin_weather.xml&synd=open&w=320&h=200&title=__MSG_weather_title...'></script>",

        content : htmlOutput,

              //2 wrkng sydney content : '<div id="cont_Mzc0NjN8NXwxfDF8NHxlZGY1ZjV8M3xGRkZGRkZ8Y3wx"><div id="spa_Mzc0NjN8NXwxfDF8NHxlZGY1ZjV8M3xGRkZGRkZ8Y3wx"><a id="a_Mzc0NjN8NXwxfDF8NHxlZGY1ZjV8M3xGRkZGRkZ8Y3wx" href="http://www.weather-wherever.co.uk/australia/sydney_v37463/" target="_blank" style="color:#333;text-decoration:none;">Weather forecast</a> © weather</div><script type="text/javascript" src="http://widget.weather-wherever.co.uk/js/Mzc0NjN8NXwxfDF8NHxlZGY1ZjV8M3xGRkZGRkZ8Y3wx"></script></div>',

              //content : '<div style="margin-left:-10px;margin-top:10px;width:100%;"><LINK rel="StyleSheet" href="http://weatherandtime.net/new_wid/w_5/style.css" type="text/css" media="screen"><div class="ww_5" id="ww_5_2119"><div class="l_b"></div><div class="c_b"><div class="day" id="d_0"><span class="den"></span><br><span class="date"></span><br><span class="temp"></span><div class="pict"></div><span class="press"></span><br><span class="hum"></span><br><span class="vet"></span><br></div><div class="day" id="d_1"><span class="den"></span><br><span class="date"></span><br><span class="temp"></span><div class="pict"></div><span class="press"></span><br><span class="hum"></span><br><span class="vet"></span><br></div><div class="day" id="d_2"><span class="den"></span><br><span class="date"></span><br><span class="temp"></span><div class="pict"></div><span class="press"></span><br><span class="hum"></span><br><span class="vet"></span><br></div><div class="cl"></div><div class="links"><a target="_blank" title="Pune Weather forecast" href="http://weatherandtime.net/en/Asia/India/Pune-weather.html">Pune Weather forecast</a><br><a style="font-size:12px !important;color:#12A0D7 !important;text-decoration:none !important;" href="http://weatherandtime.net/en/widgets-gallery.html" title="weather"></a></div></div><div class="r_b"></div></div><script type="text/javascript" src="http://weatherandtime.net/w_5.js?city=2119&lang=en&type=2&day=3"></script></div>',

          // initially behaves the same as Sample 1

             preferDOM : false,

             // use the afterRendering event for 2 purposes

     });

    return     oTable;

    }

});

/* In the screen shot as u can see.. I have to highlight the table cell in green color and red color for ordered and unordered status(which is binded to a json data) respectively....anyone please help??

[former_member182862 · Accepted solution]

Hi Abhi

there are many ways to do this. Here is one.

Thanks

-D

[aarif_baig]

Hi Abhi,

               Check this link it may help

[former_member293602]

Hi Abhi,

To color table cells, you might find the answers here http://scn.sap.com/message/14174703#14174703 helpful.

Regards, Frank