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"; }) }

Custom Login Page in Siebel Open UI

Hello All,


In this Post i want to demonstrate how we can change login page in Siebel Application.
Login page is specified for every application and can be seen in Object Explore --> Application


Below are the high level Steps

1. Identify the Login Web Page from Application






2. Open The Web Page in Object Explore and find the Web Page, clone the existing page and Provide a new Web Template





3. Clone the Existing Web Template, in my case i named it Login Custom, change the definition of web template to refer new custom CSS and JS files
<link href="files/login_custom.css" rel="stylesheet"> --- line 8

<div od-type="include-script" file="login_custom.js"/> --- line 16





4. Now we have New Web Page and Web Template, replace Web Page for the application and test your changes






Vanilla Login Page:


Modified Login Page:




link to CSS file :

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

Navigation One Record at a time in Siebel IP17/18

Hello All,


In this post i will share one of the enhancement or probably i should call it fix for enabling navigation to one record at a time that has been removed in siebel IP17 onwards.

In Open UI we have now navigation controls in bottom of applet In IP 13 to IP 16, we have below controls

1. Next Record
2. Previous Record
3. Next Record Set
4. Previous Record Set

In IP17 onwards there is change in navigation controls, now there is no option of Next and Previous record in list applet, we now have

1. Next Record Set
2. Previous Record Set
3. Last Record Set
4. First Record Set

Now with the below code we can mimic the buttons to act like IP 13 to IP 16

Major Points:

1. Remove/Supress the actual functionality of Buttons,

$('[id^="next_pager_s_"]').attr('id', '');

$('[id^="last_pager_s_"]').attr('id', '');

$('[id^="first_pager_s"]').attr('id', '');

$('[id^="prev_pager_s_"]').attr('id', '');

2. Bind Click event with the Icons to perform the naviation

$('[title="Next record"]').on("click", function (e) {

if (pm.ExecuteMethod("CanInvokeMethod", "GotoNext")) {

pm.ExecuteMethod("InvokeMethod", "GotoNext");

}

e.stopImmediatePropagation();

});

if (typeof (SiebelAppFacade.DefaultNavigationPR) === "undefined") { SiebelJS.Namespace("SiebelAppFacade.DefaultNavigationPR"); define("siebel/custom/DefaultNavigationPR", ["siebel/jqgridrenderer"], function () { SiebelAppFacade.DefaultNavigationPR = (function () { function DefaultNavigationPR(pm) { SiebelAppFacade.DefaultNavigationPR.superclass.constructor.apply(this, arguments); } SiebelJS.Extend(DefaultNavigationPR, SiebelAppFacade.JQGridRenderer); DefaultNavigationPR.prototype.BindEvents = function () { $('[id^="next_pager_s_"]').removeClass('ui-state-disabled'); $('[id^="last_pager_s_"]').removeClass('ui-state-disabled'); $('[id^="first_pager_s"]').removeClass('ui-state-disabled'); $('[id^="prev_pager_s_"]').removeClass('ui-state-disabled'); $('[id^="next_pager_s_"]').attr('id', ''); $('[id^="last_pager_s_"]').attr('id', ''); $('[id^="first_pager_s"]').attr('id', ''); $('[id^="prev_pager_s_"]').attr('id', ''); var pm = this.GetPM(); var placeHolder = "s_" + pm.Get("GetFullId") + "_div"; var that = this; var appletFullId = this.GetPM().Get("GetFullId"); //var pm = this.GetPM(); var appletPlaceHolder = $("#s_" + appletFullId + "_div"); // example: "s_S_A5"  $('[title="Next record"]').on("click", function (e) { if (pm.ExecuteMethod("CanInvokeMethod", "GotoNext")) { pm.ExecuteMethod("InvokeMethod", "GotoNext"); } e.stopImmediatePropagation(); }); $('[title="Previous record"]').on("click", function (e) { if (pm.ExecuteMethod("CanInvokeMethod", "GotoPrevious")) { pm.ExecuteMethod("InvokeMethod", "GotoPrevious"); } e.stopImmediatePropagation(); }); $('[title="Previous record set"]').on("click", function (e) { if (pm.ExecuteMethod("CanInvokeMethod", "GotoPreviousSet")) { pm.ExecuteMethod("InvokeMethod", "GotoPreviousSet"); } e.stopImmediatePropagation(); }); $('[title="Next record set"]').on("click", function (e) { if (pm.ExecuteMethod("CanInvokeMethod", "GotoNextSet")) { pm.ExecuteMethod("InvokeMethod", "GotoNextSet"); } e.stopImmediatePropagation(); }); SiebelAppFacade.DefaultNavigationPR.superclass.BindEvents.apply(this, arguments); } return DefaultNavigationPR; }()); return "SiebelAppFacade.DefaultNavigationPR"; }) }

there was a miss in the PR file as reported by one reader,  this has been catered in related post 

<<  Part 2 >>

Bringing back HI like navigation in Siebel IP 18

Hello All,

As explained in my previous Post Scrolling In List Applet , i explained how can we get scrolling in list applet from mouse scroll.
In previous post we were calling Next Record Set and Previous Record Set on scroll.

Here we will use the same approach but will navigate to Next Record and Previous Record not Full Record set.

The Code is almost the same, just a minor change in method.

pm.ExecuteMethod("InvokeMethod", "GotoNext");

Sample code:

$(appletPlaceHolder).bind('mousewheel', function (e) {
if (e.originalEvent.wheelDelta / 200 > 0) {
//console.log('scrolling up !');
e.preventDefault();
if (pm.ExecuteMethod("CanInvokeMethod", "GotoPrevious")) {
pm.ExecuteMethod("InvokeMethod", "GotoPrevious");
}
e.stopImmediatePropagation();


} else {
//console.log('scrolling down !');
e.preventDefault();
if (pm.ExecuteMethod("CanInvokeMethod", "GotoNext")) {
pm.ExecuteMethod("InvokeMethod", "GotoNext");
}
e.stopImmediatePropagation();

}
});

<<Parent Post >>