Learning and Knowledge Management

Module 9: Presentation
Model/Physical Renderer –
List Applet

Accenture CSI Confidential Material. Do not duplicate or distribute

Module Objectives
At the end of this module, you will be able to:
• Describe the structure of Presentation Model for List Applet
• Describe the structure of Physical Renderer for List Applet
• Identify the JavaScript APIs available for customizing List Applet

Copyright © 2017 Accenture All Rights Reserved.

Topic List

List Applet Components

Accessing List Applet Components through Code

List Applet PM and PR

Looping through Record Set

BindData() Method in List Applet

List Applet PM and PR Example

Copyright © 2017 Accenture All Rights Reserved.

Topic List

List Applet Components

Accessing List Applet Components through Code

List Applet PM and PR

Looping through Record Set

BindData() Method in List Applet

List Applet PM and PR Example

Copyright © 2017 Accenture All Rights Reserved.

List Applet Components
Overview
• List Applet holds data in a two-dimensional Array
• Each record is displayed as a Row
• Each field is displayed as Column
• Open UI JavaScript APIs are available to access or manipulate
• Group of Records displayed in a List Applet
• Specific Record/Row in a List Applet
• Specific Field value in a Record/Row
• List Applet Components
• Two-Dimensional Array
• Placeholder (PR)
• Record Set (PM)
• Individual Row
• Row (PR)
• Record (PM)
• Individual Field
• Column (PR)
• Field (PM)

Copyright © 2017 Accenture All Rights Reserved.

Topic List

List Applet Components

Accessing List Applet Components through Code

List Applet PM and PR

Looping through Record Set

BindData() Method in List Applet

List Applet PM and PR Example

Copyright © 2017 Accenture All Rights Reserved.

Accessing List Applet Components through Code (1)
Two-Dimensional Array (1)
• Placeholder – Physical Renderer
• Is a container for list applet
• It is HTML Table which uses <tr> tag for rows and <td> tag for columns
• To Access the ID of the placeholder in a Physical Renderer (PR)
this.GetPM().Get("GetPlaceholder");

var pH = this.GetPM().Get("GetPlaceholder");
$("#"+pH).before("<span style='color:red'>BEFORE PHOLD</span>");
$("#"+pH).after("<span style='color:red'>AFTER PHOLD</span>");

Copyright © 2017 Accenture All Rights Reserved.

Accessing List Applet Components through Code (2)
Two-Dimensional Array (2)
• Record Set – Presentation Model
• Is a group of records currently available in List Applet
• To Access the Record Set in a Presentation Model (PM)
Get("GetRecordSet")
• Returns a two-dimensional array

Copyright © 2017 Accenture All Rights Reserved.

Accessing List Applet Components through Code (3)
Individual Row (1)
• Row – Physical Renderer
• Is a row in the HTML Table
• Using Jquery, access each row using HTML ID
• HTML ID is one-based, so it is 1 greater than the row number
• Syntax : $('#'+(row_number+1))
• Example : $(“#1”)

Copyright © 2017 Accenture All Rights Reserved.

Accessing List Applet Components through Code (4)
Individual Row (2)
• Record – Presentation Model
• Each row in the record set is a Record
• The Record Set index starts at Zero (0)
• Syntax : recordSet[row_number]
• Example : PM.Get("GetRecordSet")[0]

Copyright © 2017 Accenture All Rights Reserved.

Accessing List Applet Components through Code (5)
Individual Field (1)
• Column – Physical Renderer
• Each a Column in HTML Table
• Syntax : $('#'+(row_number+1)+“ListColumn_Name")
• Example : $("#1Account")

Copyright © 2017 Accenture All Rights Reserved.

Accessing List Applet Components through Code (6)
Individual Field (2)
• Field – Presentation Model
• Access Column value using Field Name
• Syntax : recordSet[row_number]["Field Name"]
• Example : recordSet[1]["Account"]

Copyright © 2017 Accenture All Rights Reserved.

Topic List

List Applet Components

Accessing List Applet Components through Code

List Applet PM and PR

Looping through Record Set

BindData() Method in List Applet

List Applet PM and PR Example

Copyright © 2017 Accenture All Rights Reserved.

List Applet PM and PR (1)
List Applet Presentation Model
• Custom Presentation Model for list applets inherits from ListPresentationModel Object
• ListPresentationModel Object is defined in listpmodel.js

if( typeof( SiebelAppFacade.TemplateListPM ) === "undefined"){

SiebelJS.Namespace( "SiebelAppFacade.TemplateListPM" );
define("siebel/custom/templateListPM",["siebel/listpmodel"],
function () {
SiebelAppFacade.TemplateListPM = ( function(){
function TemplateListPM( proxy ){
SiebelAppFacade.TemplateListPM.superclass.
constructor.call( this, proxy );
}
SiebelJS.Extend( TemplateListPM,
SiebelAppFacade.ListPresentationModel );
...

Copyright © 2017 Accenture All Rights Reserved.

List Applet PM and PR (2)
List Applet Physical Renderer
• Custom Physical Renderer for list applets inherits from JQGridRenderer Object
• JQGridRenderer Object is defined in jqgridrenderer.js

if(typeof(SiebelAppFacade.TemplateListPR ) === "undefined") {

SiebelJS.Namespace( "SiebelAppFacade.TemplateListPR" );
define("siebel/custom/templateListPR", ["siebel/jqgridrenderer"], function () {
SiebelAppFacade.TemplateListPR = ( function(){
function TemplateListPR( pm ){
SiebelAppFacade.TemplateListPR.superclass.constructor.call( this, pm );
}
SiebelJS.Extend(TemplateListPR,SiebelAppFacade.JQGridRenderer);
return TemplateListPR;
}() );
return "SiebelAppFacade.TemplateListPR";
});
}

Copyright © 2017 Accenture All Rights Reserved.

Topic List

List Applet Components

Accessing List Applet Components through Code

List Applet PM and PR

Looping through Record Set

BindData() Method in List Applet

List Applet PM and PR Example

Copyright © 2017 Accenture All Rights Reserved.

Looping through Record Set (1)
for Loop
• Get reference to the Presentation Model Object using the GetPM()
• Use PM Object to get the Record Set which is currently displayed in List Applet
• Loop through the Record Set and perform the required actions on the HTML Table rows

var PM = this.GetPM();
var rs = PM.Get("GetRecordSet");
var ph = PM.Get("GetPlaceholder"); Zero-Based Loop
for (var r=0; r < rs.length; r++){
var id = r+1;
$("#"+ph+" #"+id)...
}

var PM = this.GetPM();
var rs = PM.Get("GetRecordSet");
for (var r=1; r <= rs.length; r++){ One-Based Loop
$("#"+r)...
}

Copyright © 2017 Accenture All Rights Reserved.

Looping through Record Set (2)
for/in Loop
• Loop through the record set using for/in loop
• Search for a required value in a specific Field within a row

var PM = this.GetPM();
var rs = PM.Get("GetRecordSet");
var ph = PM.Get("GetPlaceholder");
for (r in rs){
if (rs[r]["FieldName"] == value) {
... do something ...
}

var PM = this.GetPM();
var rs = PM.Get("GetRecordSet");
for (r in rs){
var id = parseInt(r)+1;
$("#"+id)...
}

Copyright © 2017 Accenture All Rights Reserved.

Topic List

List Applet Components

Accessing List Applet Components through Code

List Applet PM and PR

Looping through Record Set

BindData() Method in List Applet

List Applet PM and PR Example

Copyright © 2017 Accenture All Rights Reserved.

BindData() Method in List Applet
About BindData() Method
• The BindData() method in List Applet have an additional Boolean parameter bRefresh
• The default value for bRefresh parameter is true
• bRefresh parameter makes sure that the paging works correctly in list applet by clearing
the data before adding items from a new record set
• Runs every time the result set in the list applet gets updated

TemplateListPR.prototype.BindData = function (bRefresh) {

SiebelAppFacade.TemplateListPR.superclass.BindData.call
(this, bRefresh);
...
}

Copyright © 2017 Accenture All Rights Reserved.

Topic List

List Applet Components

Accessing List Applet Components through Code

List Applet PM and PR

Looping through Record Set

BindData() Method in List Applet

List Applet PM and PR Example

Copyright © 2017 Accenture All Rights Reserved.

List Applet PM and PR Example (1)
Steps involved in List Applet PM/PR Example

1. Create a Custom PR File

2. Add code in Custom PR

3. Perform Manifest Administration

4. Test the Results

Example
Highlight the rows in Opportunity List Applet in which the total revenue is grater than $500,000

Copyright © 2017 Accenture All Rights Reserved.

List Applet PM and PR Example (2)
1. Create a Custom PR File
• Create a custom Physical Renderer
• Include BindData(bRefresh) method

...
define("siebel/custom/CustOppListAppletPR", ["siebel/jqgridrenderer"], function () {
...
SiebelJS.Extend(CustOppListAppletPR, SiebelAppFacade.JQGridRenderer);

CustOppListAppletPR.prototype.BindData = function (bRefresh) {

SiebelAppFacade.CustOppListAppletPR.superclass.BindData.apply(this, arguments);
}
return CustOppListAppletPR;
}());
return "SiebelAppFacade.CustOppListAppletPR"; })}

Copyright © 2017 Accenture All Rights Reserved.

List Applet PM and PR Example (3)
2. Add code in Custom PR
• Loop through each record in the record set
• Compare the Revenue Field and highlight the row in HTML Table as required

...
var rs = PM.Get("GetRecordSet");
for (rowNum in rs) { // This will range from 0 to 9
var amount = rs[rowNum]["Primary Revenue Amount"];
var amountAsNumber=parseFloat(amount.replace(/[$,]+/g,""));
if (amountAsNumber>500000) {
recNum = Number(rowNum)+1;
$("#"+recNum).css({"background-color":"red"});
}
}

Copyright © 2017 Accenture All Rights Reserved.

List Applet PM and PR Example (4)
3. Perform Manifest Administration
Use Manifest Administration View to register the JavaScript File and map the UI Object

Copyright © 2017 Accenture All Rights Reserved.

List Applet PM and PR Example (5)
4. Test the Results
Log out and login to test the changes made.

Copyright © 2017 Accenture All Rights Reserved.

Knowledge Checks
Choose the right answer
Custom PR for List Applet inherits which Object?
• ListPresentationModel

• JQGridRenderer

• PhysicalRenderer

• ListPhysicalRenderer

Copyright © 2017 Accenture All Rights Reserved.

Knowledge Checks
Choose the right answer
Which PR method runs every time when the result set in List Applet get updated?
• ShowUI()

• BindEvents()

• Init()

• BindData()

Copyright © 2017 Accenture All Rights Reserved.

Module Summary
Now, you should be able to:
• Describe the structure of Presentation Model for List Applet
• Describe the structure of Physical Renderer for List Applet
• Identify the JavaScript APIs available for customizing List Applet

Copyright © 2017 Accenture All Rights Reserved.