Requirement:
To modify navigation controls of List Applet (First
Page,Previous Set,Next Set &Last Page) to Previous Set , Previous,next,next
set.
Development:
1. Create PR file like below and place in
..Siebel\Client..(Also Attaching file here)..\..\..\Siebel\Client\public\SCRIPTS\siebel\custom\AddCtrolPR.js
=============================================
if (typeof(SiebelAppFacade.AddCtrolPR) ===
"undefined")
{
SiebelJS.Namespace("SiebelAppFacade.AddCtrolPR");
define("siebel/custom/AddCtrolPR",
["siebel/jqgridrenderer"],
function()
{
SiebelAppFacade.AddCtrolPR = (function()
{
function AddCtrolPR(pm)
{
SiebelAppFacade.AddCtrolPR.superclass.constructor.apply(this,
arguments);
}
SiebelJS.Extend(AddCtrolPR,
SiebelAppFacade.JQGridRenderer);
AddCtrolPR.prototype.Init =
function()
{
// Init is called each time
the object is initialised.
// Add code here that
should happen before default processing
SiebelAppFacade.AddCtrolPR.superclass.Init.apply(this, arguments);
// Add code here that
should happen after default processing
}
AddCtrolPR.prototype.ShowUI =
function()
{
// ShowUI is called when
the object is initially laid out.
// Add code here that
should happen before default processing
SiebelAppFacade.AddCtrolPR.superclass.ShowUI.apply(this, arguments);
var
appletId = this.GetPM().Get("GetPlaceholder");
var
PreviousRecordElement="<td id='Previous_Record_"+appletId+"'
class='ui-pg-button ui-corner-all' style='cursor: default'><span
class='ui-icon ui-icon-seek-Previous-Record'
title='Previous'></span></td>";
var
nextRecordElement="<td id='Next_Record_"+appletId+"'
class='ui-pg-button ui-corner-all' style='cursor: default'><span
class='ui-icon ui-icon-seek-next-Record'
title='Next'></span></td>";
var
PreviousSetElement="<td id='Previous_Set_"+appletId+"'
class='ui-pg-button ui-corner-all' style='cursor: default'><span
class='ui-icon ui-icon-seek-Previous-Record-set' title='Previous
Set'></span></td>";
var
nextSetElement="<td id='Next_Set_"+appletId+"'
class='ui-pg-button ui-corner-all' style='cursor: default'><span
class='ui-icon ui-icon-seek-next-Record-set' title='Next
Set'></span></td>";
$("#first_pager_"+appletId).replaceWith(PreviousSetElement);
$("#prev_pager_"+appletId).replaceWith(PreviousRecordElement);
$("#next_pager_"+appletId).replaceWith(nextRecordElement);
$("#last_pager_"+appletId).replaceWith(nextSetElement);
// Add code here that
should happen after default processing
}
AddCtrolPR.prototype.BindData =
function(bRefresh)
{
// BindData is called each
time the data set changes.
// This is where you'll
bind that data to user interface elements you might have created in ShowUI
// Add code here that
should happen before default processing
SiebelAppFacade.AddCtrolPR.superclass.BindData.apply(this,
arguments);
// Add code here that
should happen after default processing
}
AddCtrolPR.prototype.BindEvents
= function()
{
// BindEvents is where we
add UI event processing.
// Add code here that
should happen before default processing
SiebelAppFacade.AddCtrolPR.superclass.BindEvents.apply(this, arguments);
// Add code here that
should happen after default processing
var pm = this.GetPM();
var appletId =
pm.Get("GetFullId");
var placeholder =
pm.Get("GetPlaceholder");
var that = this;
$(".ui-icon-seek-next-Record")
.on("click",
function()
{
SiebelJS.Log("Inside GotoNextNew
Method");
if(pm.ExecuteMethod("CanInvokeMethod", "GotoNext"))
pm.ExecuteMethod("InvokeMethod", "GotoNext");
})
.end()
$(".ui-icon-seek-Previous-Record")
.on("click",
function()
{
SiebelJS.Log("Inside GotoPreviousNew
Method");
if(pm.ExecuteMethod("CanInvokeMethod",
"GotoPrevious"))
pm.ExecuteMethod("InvokeMethod", "GotoPrevious");
})
.end()
$(".ui-icon-seek-next-Record-set")
.on("click",
function()
{
SiebelJS.Log("Inside GotoNextNew
Method");
if(pm.ExecuteMethod("CanInvokeMethod",
"GotoNextSet"))
pm.ExecuteMethod("InvokeMethod",
"GotoNextSet");
})
.end()
$(".ui-icon-seek-Previous-Record-set")
.on("click",
function()
{
SiebelJS.Log("Inside GotoPreviousNew
Method");
if(pm.ExecuteMethod("CanInvokeMethod",
"GotoPreviousSet"))
pm.ExecuteMethod("InvokeMethod", "GotoPreviousSet");
})
.end()
}
AddCtrolPR.prototype.EndLife =
function()
{
// EndLife is where we
perform any required cleanup.
// Add code here that
should happen before default processing
SiebelAppFacade.AddCtrolPR.superclass.EndLife.apply(this, arguments);
// Add code here that
should happen after default processing
}
return AddCtrolPR;
}());
return "SiebelAppFacade.AddCtrolPR";
})
}
==============================================
Modify theme CSS file to generate new icons by adding below code.
.ui-icon-seek-next-Record::before
{
content:"\e659";
font-family:oracle;
font-size:10;
}
.ui-icon-seek-Previous-Record::before
{
content:"\e65b";
font-family:oracle;
font-size:10;
}
.ui-icon-seek-next-Record-set::before
{
content:"\e65d";
font-family:oracle;
font-size:10;
}
.ui-icon-seek-Previous-Record-set::before
{
content:"\e65c";
font-family:oracle;
font-size:10;
}
3.
Add Manifest Entry
Sample Screenshot after
modifying
Thanks for reading. Please test and let us know in comments
section.
===
https://www.w3schools.com/howto/howto_css_notification_button.asp.
.icon-button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
color: #333333;
background: #dddddd;
border: none;
outline: none;
border-radius: 50%;
}
.icon-button:hover {
cursor: pointer;
}
.icon-button:active {
background: #cccccc;
}
.icon-button__badge1 {
position: absolute;
top: -10px;
right: -10px;
width: 20px;
height: 20px;
background: red;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 75%;
}
======
0 Comments