Modifying Labels in List Applets: Applying Color Coding

Hello All,

Recently i got a query from one of my friend, where in he wanted to have header labels in list applets to be in different color.

i.e. Suppose in Contact List Applet , first 5 fields that have Personal Information appear with red Label,
Next 5 with Address Information appear in Green label and last 5 with Random Information appear in blue label.

Seems pretty simple isn't it.

Well actually it is a bit tricky, why? you might ask and will only know the catch when you try to achieve this.

The issue is with the Id's(Dynamic Id) siebel generated for the labels , one time id will be say jqgr_2_1_first_name and at the next login it will be jqgr_2_4_first_name 

So any hard coded Id's will not work :-( , Now we need to traverse the applet to always fetch current Id's for the label and then apply any CSS changes,

below snippet of code needs to be used.

var pm = this.GetPM();var appletFullId = this.GetPM().Get("GetFullId");var appletPlaceHolder = $("#s_" + appletFullId + "_div"); // example: "s_S_A5"


$(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[1].childNodes[1].id; // label of first element in list applet

$(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[2].childNodes[1].id; // label of second element in list applet

• Here we are first finding the applet Id (appletPlaceHolder )
• then we are searching for the labels in Label row (ui-jqgrid-labels') ,
• then finding the Id for the label sequentially, .childNodes[1].childNodes[1].id; for 1st and .childNodes[2].childNodes[1].id; for 2nd

the last step is to apply css of formatting 

this can be done via 2 ways , 

1. Inline CSS 

var Label1 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[1].childNodes[1].id; /$("#" + Label1).css({'color':'red'});

2. Add Class Method (Need a custom css or need to add teh new style in existing css

var Label1 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[1].childNodes[1].id;

$("#" + Label1).addClass('label-color-red');

Link to PR file,

https://drive.google.com/open?id=1d7tVkp4DMd1ROC423BHdXooWUx13rIgv

or you can use below PR file, 

if (typeof (SiebelAppFacade.ModifyControl) === "undefined") { SiebelJS.Namespace("SiebelAppFacade.ModifyControl"); define("siebel/custom/ModifyControl", ["siebel/jqgridrenderer"], function () { SiebelAppFacade.ModifyControl = (function () { function ModifyControl(pm) { SiebelAppFacade.ModifyControl.superclass.constructor.apply(this, arguments); } SiebelJS.Extend(ModifyControl, SiebelAppFacade.JQGridRenderer); ModifyControl.prototype.ShowUI = function () { var pm = this.GetPM(); SiebelAppFacade.ModifyControl.superclass.BindEvents.apply(this, arguments); } ModifyControl.prototype.BindEvents= function () { var pm = this.GetPM(); var placeHolder = "s_" + pm.Get("GetFullId") + "_div"; var appletFullId = this.GetPM().Get("GetFullId"); //var pm = this.GetPM(); var appletPlaceHolder = $("#s_" + appletFullId + "_div"); // example: "s_S_A5"            //     $("#" + placeHolder).find("Complaint Number")       var Label1 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[1].childNodes[1].id;                 $("#" + Label1).addClass('color-control'); var Label2 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[2].childNodes[1].id;                 $("#" + Label2).addClass('color-control'); var Label3 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[3].childNodes[1].id;                 $("#" + Label3).addClass('color-control'); var Label4 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[4].childNodes[1].id;                 $("#" + Label4).addClass('color-control'); var Label5 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[5].childNodes[1].id;                 $("#" + Label5).addClass('color-controlblue'); var Label6 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[6].childNodes[1].id;                 $("#" + Label6).addClass('color-controlblue'); var Label7 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[7].childNodes[1].id;                 $("#" + Label7).addClass('color-controlblue'); var Label8 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[8].childNodes[1].id;                 $("#" + Label8).addClass('color-controlblue'); var Label9 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[9].childNodes[1].id;                 $("#" + Label9).addClass('color-controlgreen'); var Label10 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[10].childNodes[1].id;                 $("#" + Label10).addClass('color-controlgreen'); var Label11 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[11].childNodes[1].id;                 $("#" + Label11).addClass('color-controlgreen'); var Label12 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[12].childNodes[1].id;                 $("#" + Label12).addClass('color-controlgreen'); SiebelAppFacade.ModifyControl.superclass.BindEvents.apply(this, arguments); } return ModifyControl; }()); return "SiebelAppFacade.ModifyControl"; }) }