In this example we will see how can we change the view bar background conditionally using Open UI View level PR customization.
This is how grey tab theme looks out of the box for Manifest File view :
 |
| Open UI Manifest File View |
And this is how Manifest Administration view looks with Open UI PR Customization:
 |
| Open UI Manifest Administration View |
May be savvy developers would like to have pale yellow for read only views or red for administration screens???
Part 1 : Create CSS class
This customization requires extending the theme in theme.js and creating new class to add different color. New Class should look something like :
 |
| custom-theme.css |
Part 2: Create View PR Customization
Now the task left is to find the view bar element in the DOM and assigning the class, this can be done with these two commands:
$("#s_sctrl_tabView").addClass("custom_viewbar");
$("#s_sctrl_tabScreen").find("li.ui-tabs-active[role='tab']").find("a").addClass("custom_viewbar");
Additionally we need to handle the browser resize event and reassign the class on change of size of browser. Sadly resize event is not passed on the View level PR as described in bookshelf and it has to be done with help of jQuery bind function. Code handling resize event looks like :
$(window).bind("resize", OnPRResize);
At last we need to handle the cleaanup in the EndLife event of jQuery bind and the class allocation.
$(".custom_viewbar").removeClass("custom_viewbar");
$(window).unbind("resize", OnPRResize);
The final code of PR looks like:
if (typeof(SiebelAppFacade.testPR) === "undefined") {
SiebelJS.Namespace("SiebelAppFacade.testPR");
define("siebel/custom/testPR", ["siebel/viewpr"],function () {
SiebelAppFacade.testPR = (function () {
function testPR(pm) {
SiebelAppFacade.testPR.superclass.constructor.apply(this, arguments);
}
SiebelJS.Extend(testPR, SiebelAppFacade.ViewPR);
testPR.prototype.Init = function () {
$(window).bind("resize", OnPRResize);
SiebelAppFacade.testPR.superclass.Init.apply(this, arguments);
}
testPR.prototype.ShowUI = function () {
SiebelAppFacade.testPR.superclass.ShowUI.apply(this, arguments);
}
testPR.prototype.BindData = function (bRefresh) {
SiebelAppFacade.testPR.superclass.BindData.apply(this, arguments);
}
var OnPRResize = function OnResize(){
$("#s_sctrl_tabView").addClass("custom_viewbar");
$("#s_sctrl_tabScreen").find("li.ui-tabs-active[role='tab']").find("a").addClass("custom_viewbar");
};
testPR.prototype.BindEvents = function () {
SiebelAppFacade.testPR.superclass.BindEvents.apply(this, arguments);
}
testPR.prototype.EndLife = function () {
$(".custom_viewbar").removeClass("custom_viewbar");
$(window).unbind("resize", OnPRResize);
SiebelAppFacade.testPR.superclass.EndLife.apply(this, arguments);
}
testPR.prototype.Setup = function () {};
testPR.prototype.SetRenderer = function () {
$("#s_sctrl_tabView").addClass("custom_viewbar");
$("#s_sctrl_tabScreen").find("li.ui-tabs-active[role='tab']").find("a").addClass("custom_viewbar");
};
return testPR;
}()
);
return "SiebelAppFacade.testPR";
})
}
Part3: Configure Manifest
Now when this PR script is associated to any view in Open UI Manifest, view bar color and screen tab color of that view will change to blue.
Hope it helps, if you like this article and would like to see more articles like this please leave a comment or +1
