Siebel Open Practice Exercises.

Practice 5-1: Customizing the Presentation Model

Goals
• To modify the presentation model to create and update a property based on a field value

Time

45 - 60 minutes

Overview

In this practice you will first examine a customization that was already performed on the
classroom image. You then create a presentation model JavaScript file that creates the
necessary property used to implement the customization. Finally, you will modify the manifest and mapping
files to include the JavaScript file and confirm that the property is being updated as expected. Note that
because you are not modifying the physical renderer in this practice, you will not see a visible change in
the application at the end of this practice, though you will confirm your results using the inspector.

Tasks

1. Explore the contact form applet.

a. If necessary, start the Siebel Call Center Developer Web Client by double-clicking the shortcut on
the desktop.
b. Navigate to Contacts > My Contacts.
Due to some of the customizations that have been added to the contact applets in the classroom,
you may have to click this link twice.
c. Drill down on the first record; for example, Ray Aamos.
d. Notice that the Job Title field has a value; for example, Technical Engineer.
e. Notice that the Work # and Main Fax # fields are visible.
f. Select the Job Title.
g. Use the browser's Cut feature (CTRL+X) to cut the Job Title to the clipboard.
h. Click in another record or elsewhere on the page. ("Step off the record".)
i. Notice that the Work # and Main Fax # fields are no longer visible.
This is not as-delivered behavior for Siebel Open UI. This customization was included in your
classroom image to demonstrate possible customizations. These fields are being hidden in the
client, not in the server, by runtime logic in the client.
j. Use the browser's Paste feature (CTRL+V) to put the Job Title back in.
k. Step off the record.
l. Verify that the Work # and Main Fax # fields reappear.
m. Use Google Chrome's inspector to confirm the downloaded custom JavaScript
files.
1) Right-click anywhere in the (top) form applet and select "Inspect element A second pane opens
below the first displaying the HTML code for the applet.
2) In the lower pane, click Sources.
3) Click Show Navigator.
4) Scroll down to locate 23030/scripts/siebel/custom.
5) Notice the two files partialrefreshpm.js and partialrefreshpr.js. These are the custom files that
implement this customization.
6) In the upper right corner of the inspector, click the X to close it.

17 | P a g e
Siebel Open Practice Exercises.

2. Verify that the account form applet does not have a similar behavior.
a. Navigate to Accounts > My Accounts.
b. Drill down on the first record; for example, 3 Com.
c. Notice that the Address field has a value; for example, 2000 West Embarcadero Rd.
d. Notice that the City, Zip Code, Site, State, and Country fields are all visible.
e. Click the Select icon in the Address field.
f. In the Account Addresses window, click Remove All.
g. Click OK.
h. Notice that the City, Zip Code, Site, State, and Country fields remain visible.
i. Use the inspector to verify that there are no account customization JavaScript files.
1) Right-click anywhere in the (top) form applet and select "Inspect element".
2) In the lower pane, click Sources.
3) Click Shown Navigator.
4) Scroll down to locate 23030/scripts/siebel/custom.
5) Verify that there are no files beginning with "Account" in the custom folder.
6) In the upper right corner of the inspector, click the X to close it.
j. Determine the name of the applet you are examining.
1) From the applet-level menu, select Help > About View.
2) Verify that the first applet listed is SIS Account Entry Applet.
3) Click OK to dismiss the About View dialog box.
k. Log out and clear the cache to ensure the next step uses the most recent manifest mapping, and
JavaScript files.
1) From the application-level menu, select File > Log Out.
2) In the upper right corner, click the "Customize and control Google Chrome" icon
3) Select Tools > Clear browsing data.
4) Set Obliterate the following items from = the beginning of time .
5) Verify that "Delete cookies and other site and plug-in data" is checked.
The other checkboxes are not important to this practice.
6) Click Clear browsing data.
7) Close the browser.

3. Create an AccountFormPM.js file to represent the account form presentation model.

If you prefer to test the solution without creating a new file, or if you are unfamiliar with JavaScript and
prefer to review a commented solution, copy AccountFormPM.js from
D:\Labs\OUI\PresentationModel to D:\sea\Client\public\enu\23030\SCRIPTS\siebel\custom
and work with that file. Your code will include two SiebelJS.Log() lines to allow you to verify that your code
is running as expected. More details on SiebelJS.Log() are in the lesson on debugging.
a. If necessary select Start > All Programs > Notepad++ > Notepad++.
b. If necessary, from the application-level menu, select File > New to create a new text file.
c. From the application-level menu, select File > Save as.
d. Save the file as
D:\sea\Client\public\enu\23030\SCRIPTS\siebel\custom\accountformpm.js.
e. Add the line that checks whether the Account Form PM class already exists:

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

f. Add the line that adds Account Form PM to the Siebel App Facade namespace:

SiebelJS.Namespace( "SiebelAppFacade.AccountFormPM" );

g. Add the line that registers AccountFormPM against manifests

define("siebel/custom/ accountformpm", [], function(){

h. Add the line that declares the AccountFormPM constructor:

18 | P a g e
Siebel Open Practice Exercises.

SiebelAppFacade.AccountFormPM = ( function(){

i. Call the superclass constructor:

function AccountFormPM( proxy ){

SiebelAppFacade.AccountFormPM.superclass.constructor.call
(this, proxy );
}

j. Declare this class as an extension of the presentation model:

SiebelJS.Extend(AccountFormPM,SiebelAppFacade.PresentationModel);

k. Create the Init() function. This function adds one property (ShowAddressRelatedField)
and two methods (ShowSelection and FieldChange) to the as-delivered applet.

AccountFormPM.prototype.Init = function(){
SiebelAppFacade.AccountFormPM.superclass.Init.call( this );
this.AddProperty( "ShowAddressRelatedField", "" );
this.AddMethod( "ShowSelection", SelectionChange, { sequence :
false, scope : this } );
this.AddMethod( "FieldChange", OnFieldChange, { sequence :
false, scope: this } );
};
l. Create the SelectionChange() function. This function determines whether or
not the street address field is populated, and sets the ShowAddressRelatedField property to true
or false accordingly.

function SelectionChange(){
var controls = this.Get( "GetControls" );
var control = controls[ "StreetAddress" ];
var value = this.ExecuteMethod( "GetFieldValue", control );
this.SetProperty( "ShowAddressRelatedField", ( value ? true:
false ) );
SiebelJS.Log("The value of ShowAddressRelatedField is " +
this.GetProperty( "ShowAddressRelatedField"));
}

m. Create the OnFieldChange() function. This function checks whether the street address field
changed and, if it did, sets ShowAddressRelatedField to true or false depending on whether it has
a value.

function OnFieldChange( control, value ){

if( control.GetName() === "StreetAddress" ){
this.SetProperty( "ShowAddressRelatedField", ( value ? true:
false ) );
SiebelJS.Log("The value of ShowAddressRelatedField is " +
this.GetProperty( "ShowAddressRelatedField"));
}
}

n. Return the AccountFormPM object:

return AccountFormPM;
}());

19 | P a g e
Siebel Open Practice Exercises.

o. Your final code (without comments) should be:

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

SiebelJS.Namespace( "SiebelAppFacade.AccountFormPM" );
define("siebel/custom/accountformpm", [], function(){
SiebelAppFacade.AccountFormPM = ( function(){
function AccountFormPM( proxy ){
SiebelAppFacade.AccountFormPM.superclass.constructor.call(this, proxy );
}
SiebelJS.Extend( AccountFormPM, SiebelAppFacade.PresentationModel );
AccountFormPM.prototype.Init = function(){
SiebelAppFacade.AccountFormPM.superclass.Init.call( this );
this.AddProperty( "ShowAddressRelatedField", "");
this.AddMethod( "ShowSelection", SelectionChange, { sequence : false, scope : this });
this.AddMethod( "FieldChange", OnFieldChange, { sequence : false, scope: this });
};
function SelectionChange(){
var controls = this.Get( "GetControls" );
var control = controls[ "StreetAddress" ];
var value = this.ExecuteMethod( "GetFieldValue", control );
this.SetProperty( "ShowAddressRelatedField", ( value ? true: false ) );
SiebelJS.Log("The value of ShowAddressRelatedField is " + this.Get(
"ShowAddressRelatedField"));
}
function OnFieldChange( control, value ){
if( control.GetName() === "StreetAddress" ){
this.SetProperty( "ShowAddressRelatedField", ( value ? true: false ) );
SiebelJS.Log("The value of ShowAddressRelatedField is " + this.Get(
"ShowAddressRelatedField"));
}
}
return AccountFormPM;
}());
return "SiebelAppFacade.PartialRefreshPM";
});
}

The solution code includes comments, and will look somewhat different.
p. Save and close accountformpm.js.

4. Modify the mapping in the Manifest Administration to include the JavaScript file.
In the Application, Navigate to Manifest Files/Manifest Administration to create a new record for
the Account Form Applet(SIS Account Entry Applet) and add the PM file to the same as did
earlier in the partial refresh lab.

5. Verify that the account form applet now loads the custom presentation model.
a. Start the Siebel Developer Web Client by double-clicking the shortcut on the desktop.
b. Navigate to Accounts > My Accounts.

20 | P a g e
Siebel Open Practice Exercises.

c. Drill down on the first record; for example, 3 Com.

d. Use the inspector to verify the custom JavaScript has been downloaded.
1) Right-click anywhere in the (top) form applet and select "Inspect element".
2) In the lower pane, click Sources.
3) Click Show Navigator.
4) Scroll down to locate 23030/scripts/siebel/custom.
5) Verify that accountformpm.js is now included.
6) Click the Console tab.
7) Verify that you see a message somewhere in the console that shows the value of
ShowAddressRelatedField. It should be false because the address isn't set.
e. Notice that the Address field is empty.
f. Click the Select icon in the Address field.
g. In the Account Addresses window, click Show Available.
h. Query for Street Address = 2000 West Embarcadero. You should see the address you
removed.
i. Click Add
j. Click OK.
k. In the console, notice that ShowAddressRelatedField = true. This verifies that your presentation
model is reading the address field and setting the ShowAddressRelatedField property correctly.
l. In the upper right corner of the inspector, click the X to close it.
m. From the application-level menu, select File > Log Out.
n. Close the browser window. In a subsequent practice you will use the
ShowAddressRelatedField property to show or hide fields in the applet.

21 | P a g e
Siebel Open Practice Exercises.

Practice 6-1: Hiding Fields Based on a Presentation Model Property

Goals
• To create a custom physical renderer that shows or hides fields based on the value of a
presentation model property

Time

45 - 60 minutes

Overview

In a previous practice, you modified the presentation model of the SIS Account Entry Applet to create a
property named ShowAddressRelatedField, and to set it to True or False depending on whether the
account's Street Address field was populated.

In this practice, you will modify the physical renderer of the SIS Account Entry Applet to hide fields related
to the Street Address field; for example, City and State, if
ShowAddressRelatedField is False. Finally, you will modify the manifest and mapping files to include the
JavaScript files and confirm the customization now works as expected.

Assumptions

This practice assumes you successfully completed the activity on customizing the presentation model.

Tasks

1. If necessary, start the Siebel Call Center Developer Web Client by double-clicking the
shortcut on the desktop.
2. Determine the names of the controls you want to hide.
You would normally start Siebel Tools and explore the applet control names there. This step shows
you that it is possible to get the control names from within the Siebel Open UI application, possibly
saving you time if you do not have access to Siebel Tools.
a. Navigate to Accounts > My Accounts.
b. Drill down on the first record; for example, 3 Com.
c. Right-click the Address field and select Inspect Element.
d. Notice that, in the HTML element highlighted in the inspector, aria-
labelledby="StreetAddress_label".

Most applet controls in the application have a label whose name is of the form
"<Control Name>_Label", providing a convenient way to quickly determine control names.
e. In the form applet, right-click the City field and select Inspect Element.
f. Notice that the label for this control is City_Label, implying that the control's name is City.
g. Repeat these steps to determine the control names for Zip Code, Site, State, and
Country, confirming:
Field Label Probable Control Name
Address StreetAddress

22 | P a g e
Siebel Open Practice Exercises.

City City
Zip Code PostalCode
Site Location
State State
Country Country
h. Close the Inspector.
i. Log out and clear the cache.
1) From the application-level menu, select File > Log Out.
2) In the upper right corner, click the "Customize and control Google Chrome" icon.
3) Select Tools > Clear browsing data.
4) Click Clear browsing data.
5) Close the browser.

3. Start Siebel Tools by double-clicking the shortcut on the desktop.

4. Use Siebel Tools to confirm the control names.

a. In the left pane, select Applet.
b. Click the Query button .
c. Enter Name = SIS Account Entry Applet .
d. Click the Execute Query button .
e. In the left pane, expand Applet and select Control.
f. On the right, in the Controls pane, right-click and select Columns Displayed.
g. Arrange the columns so that Caption and Name are the first two columns shown.

h. Click ok
i. Scroll down the Caption column to locate the captions you saw in the application, confirming:
Caption Name
City City
Country Country
Address* StreetAddress
Site Location
Zip Code PostalCode
State State
*Note: There are multiple fields with a caption of "Address". In this situation, a developer familiar
with Siebel Tools should edit the web layout to determine which of these controls is being
displayed. In this case, it is StreetAddress.
j. From the application-level menu, select File > Exit.

23 | P a g e
Siebel Open Practice Exercises.

5. Use your custom presentation model file as the base for your physical renderer file.
This is not a recommended practice, but because of the similarity of the two files in this particular situation,
it will save you a bit of typing.
a. If necessary, select Start > All Programs > Accessories > Windows Explorer.
b. Create a copy of the accountformpm.js file with name accountformpr.js and select Edit with
Notepad++.
d. Minimize, but do not close, Windows Explorer.

6. Edit the first few sections of the file to correspond to the structure of a physical renderer. Be sure that
you modify existing lines anywhere the instruction says, "Modify". Only add lines where the instructions
specifically tell you to add them.
You may use this file you do not wish to perform the file modifications listed below.
a. Modify the first line of code (Line 2) to check for AccountFormPR instead of
AccountFormPM in the namespace:

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

b. Modify the second line of code (Line 5) to register AccountFormPR in the namespace:

SiebelJS.Namespace( "SiebelAppFacade.AccountFormPR " );

c. Modify the third line of code (Line 8) to register AccountFormPR against the rendering key
AccountFormPRenderer:

define("siebel/custom/accountformpr", [], function(){

d. Modify the fourth line of code (Line 11) to register the AccountFormPR cons

SiebelAppFacade.AccountFormPR = ( function(){

e. Modify the fifth and sixth lines of code (Lines 14-15) to call the superclass constructor for
AccountFormPR:

function AccountFormPR ( proxy ){ SiebelAppFacade.AccountFormPR .superclass.constructor.call(

this, proxy );

f. Within the constructor, add a binding from the presentation model's

ShowAddressRelatedField property to the physical renderer's Modify Layout() meth Bindings call
methods in the physical renderer when properties from the presentation model are modified.

this.GetPM().AttachPMBinding( "ShowAddressRelatedField",
ModifyLayout, { scope: this });

g. Delete the Init(), SelectionChange(), and OnFieldChange() functions. The first section of your code,
including comments, should look like:
// Determine whether or not the class has already been added to
// the namespace
if( type of( SiebelAppFacade.AccountFormPR ) === "undefined" ){

// Add the class to the namespace

SiebelJS.Namespace( "SiebelAppFacade.AccountFormPR " );

SiebelAppFacade.AccountFormPR = ( function(){

24 | P a g e
Siebel Open Practice Exercises.

// Declare the constructor

SiebelAppFacade.AccountFormPR = ( function(){

// Call the superclass constructor method

function AccountFormPR ( proxy ){
SiebelAppFacade.AccountFormPR .superclass.constructor.call( this, proxy );
this.GetPM().AttachPMBinding( "ShowAddressRelatedField", ModifyLayout, { scope:
this });
}

7. Finish updating the file to hide or show controls based on the value of a property in the presentation
model.
a. Modify the SiebelJS.Extend code (Line 19) to extend the physical renderer rather than the
presentation model:

SiebelJS.Extend( AccountFormPR , SiebelAppFacade. PhysicalRenderer );

b. Create a ModifyLayout() method that shows the appropriate fields if

ShowAddressRelatedField is true, and hides them if it is false.
The modifications are:
• var controls = this.GetPM().Get( "GetControls" ) gets the applet controls from the presentation
model and assigns them to the variable named "controls".
• var canShow = this.GetPM().Get( "ShowAddressRelatedField" ) gets the value of the
ShowAddressRelatedField property and stores it in a variable named
"canShow".
• var xxx = controls[ "xxx" ] gets the value from the applet control (for example, the
City control) and stores it in a variable with the same name.
• For each control, if canShow is true, show the control using the two calls:
• $( "span#xxx_Label" ).parent().show() to show the label.
• $( "[name='" + xxx.GetInputName() + "']" ).parent().show() to show the control.
• If canShow is false, use hide() instead of show.
• While this explains most of the code, the span# entries ensure that both the control label and the
control field are included when you specify the label, and the parent() entries on both the label and the
control ensure that any additional controls (for example, drop-down arrows) are hidden as well:

// Set a ModifyLayout() control that shows or hides fields based

// on the ShowAddressRelatedField property
function ModifyLayout( ){
//Get the controls and the property, and assign each
//appropriate control to a local variable
var controls = this.GetPM().Get( "GetControls" );
var canShow = this.GetPM().Get( "ShowAddressRelatedField" );
var City = controls[ "City" ];
var PostalCode = controls[ "PostalCode" ];
var Location = controls[ "Location" ];
var State = controls[ "State" ];
var Country = controls[ "Country" ];

// If ShowAddressRelatedField is true, show all the controls

if( canShow ){
$( "span#City_Label" ).parent().show();
$( "[name='" + City.GetInputName() + "']" ).parent().show();
$( "span#PostalCode_Label" ).parent().show();
$( "[name='" + PostalCode.GetInputName() + "']"

25 | P a g e
Siebel Open Practice Exercises.

).parent().show();

$( "span#Location_Label" ).parent().show();
$( "[name='" + Location.GetInputName() + "']"
).parent().show();
$( "span#State_Label" ).parent().show();
$( "[name='" + State.GetInputName() + "']" ).parent().show();
$( "span#Country_Label" ).parent().show();
$( "[name='" + Country.GetInputName() + "']"
).parent().show();
}

// Otherwise, hide them.

else{
$( "span#City_Label" ).parent().hide();
$( "[name='" + City.GetInputName() + "']" ).parent().hide();
$( "span#PostalCode_Label" ).parent().hide();
$( "[name='" + PostalCode.GetInputName() + "']"
).parent().hide();
$( "span#Location_Label" ).parent().hide();
$( "[name='" + Location.GetInputName() + "']"
).parent().hide();
$( "span#State_Label" ).parent().hide();
$( "[name='" + State.GetInputName() + "']" ).parent().hide();
$( "span#Country_Label" ).parent().hide();
$( "[name='" + Country.GetInputName() + "']"
).parent().hide();
}
}

c. At the bottom of the file, change the return value to return AccountFormPR;
d. Save and close accountformpr.js

8. Manifest Changes.
. Add the manifest changes accordingly to the Applet as did earlier for Presentation Model.

10.

11. Start the Siebel Call Center Developer Web Client by double-clicking on the shortcut on the desktop.

12. Test your modifications

a. Navigate to Accounts > My Accounts.
b. Drill down on the record you drilled down on before; for example, 3 Com.
c. Notice that the Address field has a value.
d. Notice that the City, Zip Code, Site, State, and Country fields are visible.
e. Click the Select icon in the Address field.
f. In the Account Addresses window, click Remove All.
g. Click OK.
h. Notice that the City, Zip Code, Site, State, and Country fields are no longer visible.
i. Add the address back.
1) Click the Select icon in the Address field.

26 | P a g e
Siebel Open Practice Exercises.

2) In the Account Addresses window, click Show Available.

3) Query for Street Address = 2000 West Embarcadero.
4) Click Add
5) Click OK.
j. Use the inspector to verify the custom JavaScript has been downloaded.
1) Right-click anywhere in the (top) form applet and select Inspect element.
2) In the lower pane, click Sources.
3) Click Show Navigator.
4) Scroll down to locate 23030/scripts/siebel/custom.
5) Notice that AccountFormPM.js and AccountFormPR.js have been downloaded.
6) In the upper right corner of the inspector, click the X to close it.

Practice 7-1: Exploring Debugging Techniques

Goals
• To test the SiebelJS.Log() call
• To test the debugger statement
• To test the browser's breakpoints

Time

30 - 40 minutes

Overview

In this practice you will start with the solution files to the practices that hid several fields on the account
form applet. You will first add SiebelJS.Log() calls to the scripts and examine the results. You will then add
debugger calls to the scripts and verify the behavior. Finally, you will add breakpoints to the scripts and
verify the behavior.

Tasks

1. Copy the solution files to the appropriate directories to ensure this practice works as
intended.
a. If you have any files open in Notepad++, close them. It is not necessary to close
Notepad++ itself.
b. If necessary, start Windows Explorer by selecting Start > All Programs > Accessories > Windows
Explorer.
c. Navigate to D:\sea\Client\public\enu\23030\SCRIPTS\siebel\custom.
d. Rename AccountFormPM.js to AccountFormPM_old.js.
e. Rename AccountFormPR.js to AccountFormPR_old.js.
f. Copy D:\Labs\OUI\Debugging\AccountFormPM.js and
D:\Labs\OUI\Debugging\AccountFormPR.js to
D:\sea\Client\public\enu\23030\SCRIPTS\siebel\custom.

2. Add code that tests SiebelJS.Log().

a. In Windows Explorer, navigate to
D:\sea\Client\public\enu\23030\SCRIPTS\siebel\custom.

27 | P a g e
Siebel Open Practice Exercises.

b. Right-click AccountFormPM.js and select Edit with Notepad++.

c. Examine Line 42:
SiebelJS.Log("The value of ShowAddressRelatedField is " +
this.Get( "ShowAddressRelatedField"));
This is an example of using SiebelJS.Log() to examine a property. You tested this line in a
previous practice.
d. Close AccountFormPM.js, not saving any changes.
e. Add several SiebelJS.Log() calls to AccountFormPR.js to examine control values.
1) In Windows Explorer, right-click AccountFormPR.js and select Edit with
Notepad++.
2) Notice lines 31-37 setting the various controls. You will add lines to print the
control values to the console.
3) Add lines (Starting at Line 38) that print out the values of these variables:
SiebelJS.Log("The value of ShowAddressRelatedField is " +
canShow);
SiebelJS.Log("The value of City is " +
this.GetPM().ExecuteMethod("GetFieldValue", City));
SiebelJS.Log("The value of PostalCode is " +
this.GetPM().ExecuteMethod("GetFieldValue", PostalCode));
SiebelJS.Log("The value of Location is " +
this.GetPM().ExecuteMethod("GetFieldValue", Location));
SiebelJS.Log("The value of State is " +
this.GetPM().ExecuteMethod("GetFieldValue", State));
SiebelJS.Log("The value of Country is " +
this.GetPM().ExecuteMethod("GetFieldValue", Country));

4) Save AccountFormPR.js, but do not close it.

3. If necessary, start the Siebel Call Center Developer Web Client by double-clicking the
shortcut on the desktop.

4. Clear the browser cache.

a. In the upper right corner, click the "Customize and control Google Chrome" icon
b. Select Tools > Clear browsing data.
c. Deselect every checkmark except "Empty the cache".
d. Click Clear browsing data.
e. Close the Settings tab.
f. Click the browser's Reload button.

5. Test the results.

a. Navigate to Accounts > My Accounts.
b. Drill down on the top record; for example, 3 Com.
c. Right-click the top applet and select Inspect element.
d. In the Inspector, click the Console tab.
e. Notice that the values of the specified fields are listed in the console.
f. Click the Next Record icon.
g. Notice that the correct values are printed in the console.
h. In the top applet, in the Address field, note the current address; for example,
1900 Montgomery Avenue, Suite 1400.
i. In the Address field, click the Select button.

28 | P a g e
Siebel Open Practice Exercises.

j. Click Remove.
k. Click OK.
l. In the console, notice that the City, Postal Code, State, and Country are all now blank, but the
Location is still populated, as it is unrelated to the address selection.
m. In the Address field, click the Select button.
n. Click Show Available.
o. Query for the address you removed; for example, 1900 Montgomery Avenue.
p. click Add.
q. Click OK.
r. In the console, notice that the fields are populated again.
To refresh the SiebelJS.Log() printout you may need to select a new contact record in the bottom
applet.
s. Log out and clear the cache.
1) From the application-level menu, select File > Log Out.
2) In the upper right corner, click the "Customize and control Google Chrome" icon.
3) Select Tools > Clear browsing data.
4) Click Clear browsing data.
5) Close the browser.

6. Add code that tests the debugger() call.

a. Return to AccountFormPR.js in Notepad++.
b. Between each SiebelJS.Log() call, add a debugger; line:
SiebelJS.Log("The value of ShowAddressRelatedField is " + canShow);
debugger;
SiebelJS.Log("The value of City is " +
this.GetPM().ExecuteMethod("GetFieldValue", City));
debugger;
SiebelJS.Log("The value of PostalCode is " +
this.GetPM().ExecuteMethod("GetFieldValue", PostalCode));
debugger;
SiebelJS.Log("The value of Location is " +
this.GetPM().ExecuteMethod("GetFieldValue", Location));
debugger;
SiebelJS.Log("The value of State is " +
this.GetPM().ExecuteMethod("GetFieldValue", State));
debugger;
SiebelJS.Log("The value of Country is " +
this.GetPM().ExecuteMethod("GetFieldValue", Country));
debugger
c. Ensure that AccountFormPR.js has correct carriage returns and formatting; this ensures that it
will display properly in the inspector's debugger.
1) In Notepad++, from the application-level menu, select Edit > EOL Conversion >
Windows Format. This replaces all carriage returns with Windows carriage returns.
If Windows Format is grayed out, all your carriage returns are already Windows carriage
returns, and no action is required.
2) From the application-level menu, select Plugins > JSMin > JSFormat. This puts the file in
standard JavaScript formatting.
d. Save AccountFormPR.js, but do not close it.

7. Start the Siebel Call Center Developer Web Client by double-clicking the shortcut on the desktop.

8. Test the behavior of the debugger call.

a. Navigate to Accounts > My Accounts.
b. Drill down on the first record in the list; for example, 3 Com.
c. Select the second Contact; for example, Walter What.

29 | P a g e
Siebel Open Practice Exercises.

d. Notice that the application runs normally; that is, it does not stop execution on the debugger
statements.
e. Click the Home tab.
f. Right-click anywhere in the window and select Inspect element to open the inspector.
g. In the top pane (the application), navigate to Accounts > My Accounts.
h. Notice that the top page is grayed out, with a "Paused in debugger" message showing.
i. In the inspector, notice that you are in the AccountFormPR.js file.
j. Verify that you are stopped on the first debugger line.
k. Click the Console tab.
l. Notice that only the first SiebelJS.Log() message ("The value of ShowAddressRelatedField is
true") is listed.
m. Click the Sources tab.
n. In the right panel, click the Resume Script Execution button .
o. Click the Console tab.
p. Notice that the next SiebelJS.Log() call ("The value of City is Palo Alto") is displayed.
q. Repeat these steps to walk through the debugger statements and execute all of the
SiebelJS.Log() statements.
r. Eventually, all seven SiebelJS.Log() statements should be printed, and control should be
returned to the application.
s. Select the next record in the list. Notice that the application pauses in the debugger once again.
t. Step through all the debugger statements to regain control of the application.
u. Log out and clear the cache. You have learned that a debugger statement acts like a
permanent breakpoint that only fires when the Inspector window is visible.
1) From the application-level menu, select File > Log Out.
2) In the upper right corner, click the "Customize and control Google Chrome" icon.
3) Select Tools > Clear browsing data.
4) Click Clear browsing data.
5) Close the browser.
9. Remove the debugger code to test breakpoints.
a. Return to AccountFormPR.js in Notepad++.
b. Remove or comment out all of the debugger calls.
c. Save AccountFormPR.js, but do not close it.

10. Start the Siebel Call Center Developer Web Client by double-clicking the shortcut on the desktop.
11. Set traditional breakpoints using the browser's built-in debugger.
a. Navigate to Accounts > My Accounts.
b. Right-click anywhere in the window and select Inspect element to open the inspector.
c. In the inspector, click the Sources tab.
d. If necessary, select AccountFormPR.js.
e. Set a breakpoint on each SiebelJS.Log() line:
1) Right-click the line number to the left of the line; for example, Line 38.
2) Select Add Breakpoint.
3) Add breakpoints for all six SiebelJS.Log() calls.
f. Close the inspector.

12. Test the results.

a. Click the Home tab to navigate away from the Accounts screen.
b. Navigate to Accounts > My Accounts.
c. Notice that, just as when you used the debugger call, the breakpoint does not fire whenthe
inspector is not open.
d. Drill down on the first record; for example, 3 Com.
e. Once again, notice that you do not hit a breakpoint.
f. Right-click anywhere on the application and select Inspect element to open the inspector.
g. In the application, click Next Record.
h. Notice that you now hit the breakpoint.

30 | P a g e
Siebel Open Practice Exercises.

i. Click Resume script execution to reach the next breakpoint.

j. Verify that the difference between debugger calls and breakpoints is only that breakpoints can
be set dynamically, while debugger calls must be set within the code itself.
k. Clear the breakpoints.
1) Within the inspector, in the right pane, locate the Breakpoints section, listing all of the
breakpoints you set. You can use this area to enable or disable specific breakpoints you have
set.
2) Right-click in the Breakpoints area and select Remove All Breakpoints.
3) Verify that no breakpoints are listed in the Breakpoints section.
l. Click Resume script execution.
m. Verify that the application behaves normally; you no longer hit any breakpoints.
n. Close the inspector.

31 | P a g e