Siebel Open Practice Exercises.
Practice 2-1: Exploring Siebel Open UI
Goals
• To navigate Siebel Open UI and explore some of its features
• To change the user preference to select a different theme
Time
25 - 35 minutes
Overview
In this practice you will explore the Siebel Open UI interface using the Siebel Dedicated Web
Client (thick client). You would not normally run Siebel Open UI this way except for prototyping or
experimenting.
Tasks
1. Explore the settings for the Siebel Dedicated Web Client.
a. On the desktop, right-click the Siebel Clinical shortcut.
b. Select Properties.
c. If necessary, click the Shortcut tab.
d. Examine the Target field. It should be of the form:
C:\sea\Client\BIN\siebel.exe /c d:\sea\client\bin\enu\eclinical.cfg
/u SADMIN /p SADMIN /b
"C:\Users\Administrator\AppData\Local\Google\Chrome\Application\
chrome.exe" /edit seed data
This shortcut runs the Siebel Dedicated Web Client, siebel.exe, using eclinical.cfg (the
Siebel Clinical configuration file) as its configuration file. It uses a username of SADMIN and a
password of SADMIN; you will be logging in as SADMIN throughout this course. It specifies
Google Chrome (chrome.exe) as the browser, and allows you to edit seed data (the edit seed
data flag).
e. Click Cancel.
2. Launch and log in to the Siebel Dedicated Web Client.
The classroom machine does not have a full Siebel Server running. You will be using the Siebel
Dedicated Web Client instead for this class.
a. On the desktop, double-click the Siebel Clinical shortcut.
After a few moments, the Siebel Clinical application should appear within a Google Chrome
browser window.
b. From the application-level menu, select Help > Technical Support.
c. Verify that User ID = SADMIN.
d. Click OK to dismiss the Technical Support dialog box.
3. Explore some Siebel Open UI client as-delivered behavior that is similar to the high interactivity
(HI) client.
a. Click the Opportunities tab.
b. Click the My Opportunities link.
1|Page
Siebel Open Practice Exercises.
In the rest of the course this navigation will be stated as "Navigate to Opportunities > My Opportunities".
c. Explore implicit save:
1) In the first opportunity in the list, click the Probability % field.
2) Notice that you can edit the field directly without having to navigate to a form applet.
3) Use the drop-down (pick list) to set Probability % = 50%
4) Click a field in the next record in the list.
There is no longer an active record indicator (>). The active record is highlighted.
5) Notice that the 50% is saved in the first record.
6) Verify that the implicit save was successful.
a) Click the Accounts tab to navigate to a different view.
b) Navigate to Opportunities > My Opportunities to return to the prior view.
c) Verify that your change has been saved; that is, that the Probability % of the
opportunity is
d. Explore similar
1) Drill down on the first record in the list, Honeywell Automation Master SLA Renewal
2008.
2) In the form applet, in the Account field, click the Select icon to invoke a dynamic pick
applet.
3) Notice that the applet looks similar to what you would see in the interactivity client.
4) Click Cancel.
5) In the form applet, in the Close Date field, click the Calendar icon to invoke a calendar
applet.
6) Notice that the calendar applet looks similar to what you would see in the high
interactivity client
7) Click Done.
4. Explore some enhanced behavior.
a. Resizing:
1) In the form applet, notice the Description field.
2) Click and drag the lower right corner of the Description field to increase its size.
2|Page
Siebel Open Practice Exercises.
The Siebel Open UI user interface allows you to resize text boxes as needed. This box
reverts resizing is not saved; if you navigate away from the view and back to it, the text to
its original size.
3) Notice that the labels and other fields are repositioned to accommodate the new size
for the Description field.
4) Click and drag the lower right corner of the Description field to decrease its size.
b. Tabbing:
1) Click the browser back arrow to return to the list view.
2) In the list applet, select the Honeywell Automation Master SLA Renewal 2008 record.
3) In the form applet, click the Name field.
4) Press Tab on your keyboard to tab through the fields.
5) Notice that you are navigating left to right and top to bottom.
The tab pattern in this release is in a Z pattern. Changes to this behavior (including
accounting for Siebel Tools tab order) are on the product roadmap.
c. Attachments:
1) Drill down on Honeywell Automation Master SLA Renewal 2008.
2) In the middle of the view, click the Attachments view tab.
3) In Windows navigate to D:\Labs\OUI.
4) Select the attach.txt file and drag and drop it onto the Siebel attachments applet.
5) The file is added as an attachment.
6) In the applet header, click the Delete button.
7) Click OK to delete the attachment.
d. Notifications (replace message broadcasts):
1) In the application-menu, to the left of Saved Queries, click the 4, to open the notifications.
2) To the right of the top item in the list, click the arrow to see the detail notification.
3) Click the X to close the notification.
e. MVGs.
1) In the Sales Team field click the Select icon to invoke an MVG applet.
2) Notice that the applet is not a shuttle applet. You are viewing the selected team
members.
3) Click Show Available to see available team members. You are viewing members who
you can add to the team.
4) Notice the Add and Remove buttons.
5) Click Show Selected to see only the currently-selected team members.
6) Click OK to close the MVG applet.
f. Site Map:
3|Page
Siebel Open Practice Exercises.
1) From the application-level menu, select Navigate > Site Map.
2) Notice the search field at the top of the page. This allows you to quickly locate screens
and views.
3) Type My Opportunities into the search field.
4) Notice that the site map performs real-time filtering of your entry.
5) Under Opportunities > List, click My Opportunities. You are navigated back to the
Opportunities List view.
g. In line Search:
1) In the applet header, to the right of the Query button, in the Search field, type A
2) Press Enterkey to run the Query
h. Scrolling:
1) Notice that the list applet displays 10 records and that more than 10 records satisfy this
query (the 1 - 10 of 12+ in the upper right of the applet).
2) Notice there are no scroll bars in the list applet.
3) At the bottom of the list applet, notice the forward and back buttons.
4) Click the Next record set button.
5) Notice that you are moved forward in the list.
. In the applet header, to the right of the Query button, in the Search field, erase the A.
. Press the Enter key on your keyboard. This runs an empty query to allow you to see all
the records again.
5. Examine calendar.
a. Click the Home tab
.
b. On the right notice that you are looking at a calendar "daily" applet (looking at a single day).
c. Click the calendar control.
4|Page
Siebel Open Practice Exercises.
d. Pick a date in the next month.
e. Click Today to return to the current day.
f. Click the weekly icon to change to the weekly applet.
g. Click the monthly icon to change to the monthly view.
h. Click the ellipse.
i. Notice that you can set your time zone.
j. Click Cancel.
k. Examine calendar user preferences.
1) In the application menu, select Tools > User Preferences.
2) Click Calendar (in the second level view bar).
3) In the "First day of week" field open the list.
4) Notice that you can set the first day of your week.
5) In the "Weekly Calendar View" field open the list.
6) Notice that you can select a 5 or 7 day week.
5|Page
Siebel Open Practice Exercises.
7) At the bottom of the applet, notice that you can explicitly select your workdays.
6. Explore browser features:
a. Back button:
1) Navigate to Opportunities > My Opportunities.
2) In the list applet, click New.
3) Set Opportunity Name = OUI Test Opportunity .
4) Step off the record to save it.
5) Drill down on OUI Test Opportunity.
6) Without stepping off the field, set Description = Test Description .
7) Click the browser's Back button.
8) Notice that you are correctly navigated back to the list view.
9) Click the browser's Forward button.
10) Notice that you are correctly navigated to the OUI Test Opportunity record, but the
Description field is blank. This is standard browser behavior.
11) Click the browser's Back button to return to the list applet.
b. Zoom:
1) In the upper right of the Chrome browser, open the menu.
2) Increase the Zoom to 125%.
3) Notice that the text increases in the Siebel application.
4) Decrease the Zoom back to 100%.
c. Find:
1) If necessary, in the upper right of the Chrome browser, open the menu.
2) Select Find. A browser find bar appears in the upper right.
3) In the find bar, type Oppty .
4) Notice that the cursor is positioned to the text within the list applet.
5) Notice you can use the Next and Previous arrows to move to the next occurrence.
6) Use the X to close the find bar.
d. Print
:
1) If necessary, in the upper right of the Chrome browser, open the menu.
2) Select Print.
3) Notice the view is shown in the print dialog as it appears on the screen, but without he
menus.
6|Page
Siebel Open Practice Exercises.
4) Click X to close the print window.
7. Modify the user preferences to modify the application's look and feel.
a. Notice that your current theme has tabs across the top of the application
window for navigation.
b. From the application-level menu, select Tools > User Preferences.
c. In the second level view bar, click Behavior.
d. Set Navigation Control = Tree .
This will make the navigation tabs appear vertically on the left of the page.
e. Set Theme = Gray Accordion .
This is one of the available tree themes. This specifies the style for the look and
feel of the application (colors and so on). You will learn more about creating
themes in a subsequent lesson.
f. Click Save.
g. From the application-level menu, select File > Log Out.
You must log out and log in again to apply the changes.
h. Close the browser window.
i. On the desktop, double-click the Siebel Call Center shortcut.
j. Once Siebel Call Center starts again, notice that the tabs are now arranged
vertically on the left (in a tree format). The colors are using the gray accordion
styling
k. In the left tree, click Opportunities.
l. In the left tree under Opportunities, click Opportunities List. You are navigated
to the opportunities list view.
7|Page
Siebel Open Practice Exercises.
m. At the top of the tree, click the Close Sidebar icon.
The navigation pane collapses and you are able to focus on the view in the full screen.
n. At the top of the tree, click the Open Sidebar icon, to restore the navigation pane.
8. Restore the original user preferences.
a. From the application-level menu, select Tools > User Preferences.
b. In the tree under User Preferences, click Behavior.
c. Set Navigation Control = Tab .This will make the navigation tabs appear across the top
of the page.
d. Set Theme = Gray Tab .
e. Click Save.
f. From the application-level menu, select File > Log Out.
g. Close the browser window.
8|Page
Siebel Open Practice Exercises.
Practices for Lesson 3
Practices Overview
In this practice, you will inspect elements of the Open UI framework.
Practice 3-1: Exploring the Siebel Open UI Architecture
Goals
• Use Google Chrome Inspector to examine browser elements
• Examine the Open UI directory structures
Time
15 - 25 minutes
Overview
In this practice you will inspect an as-delivered view and a customized view. You will also look at files in the
directory structure.
Tasks
1. If necessary, start the Siebel Call Center Developer Web Client by double-clicking the
shortcut on the desktop.
2. Inspect an as-delivered view.
a. If necessary, click the Home tab.
b. Hover over the warning icon at the top left of the home page view.
c. Notice the message that this applet cannot be displayed by the Open UI framework. This
indicates that the applet is a standard interactivity applet and cannot be displayed.
d. Right-click the warning icon and select Inspect element. The Google Chrome inspector window
appears at the bottom of the browser.
e. If necessary, in the Inspector, click the Elements tab.
9|Page
Siebel Open Practice Exercises.
f. At the bottom of the inspector window, hover over (do not click) the various elements starting
with html on the left and moving to the right
g. Notice that the corresponding elements in the Siebel view are highlighted.
h. Notice the various "div" tags. The div tags are specified in the .swt files.
i. In the elements window, notice that the "Why can't I see this applet?" line is highlighted.
j. Hover over that line and notice that the area in the Siebel view is highlighted.
k. Notice that the line above the highlight has the title = "Salutation Applet". This corresponds to
the applet property in Siebel Tools and comes from the metadata.
l. Hover of the line with the title = "Salutation Applet" and notice that the area in the Siebel view
changes.
m. Click the Console tab.
n. Notice that there are references to two applets.
These messages appear because these two applets are hidden from the home page for this user
(via the Edit Layout button on the user Home page). The Edit Layout functionality is not support in
this release and, therefore, the errors appear.
o. Click the Sources tab.
p. Click the Show Navigator icon.
10 | P a g e
Siebel Open Practice Exercises.
q. In the navigator, scroll down through the various script files.
These are all the JavaScript files that were downloaded for this view. Notice that the files here are
grouped by directory (for example, 23030/scripts).
r. In the navigator, scroll down until you find some of the style sheets. The Sources tab also lists
all of the CSS files that were downloaded for this.
s. In the navigator, click busobjshadow.js.
This JavaScript is delivered as part of the framework.
t. In the right window, scroll through the script. This JavaScript is creating a "shadow" or local
11 | P a g e
Siebel Open Practice Exercises.
copy of the Siebel business object associated with the view.
u. In the navigator, collapse the 23030/scripts directory.
v. Notice that the 23106/scripts/3rdParty directory is referenced. rd This directory contains 3
party JavaScript that is delivered by Oracle.
w. Continue to scroll and notice that no 23030/scripts/siebel/custom directory appears. This is
because there is no custom JavaScript for this view.
x. In the navigator, scroll to locate the files directory.
These are .css files that were downloaded to the client to help render the view.
3. Inspect a customized view.
a. Close the inspector by clicking the X in the upper right.
b. In the Siebel application, click the Contacts Screen tab.
c. Click Contacts List.
d. Contact List applet with Grid View would be displayed
e. Observe that there is a Button to the on the top left corner of applet saying “Grid | Tile”
f. Click on the Tile button if tile layout is not active.
g. Right-click the Contact Tile and select Inspect element.
h. Click the Sources tab and check for the file named TileLayoutPR.js & Tilescrollcontainer.js.
i. These are the two files that are used to render the List applet as tile layout.
4. Examine the directory structures.
a. In Windows, select Start > All Programs > Accessories > Windows Explorer to start Windows
Explorer.
b. In Windows Explorer, navigate to D:\sea\Client. This is the installation directory for Open UI
when you are using the Developer Web Client. It corresponds to ../siebsrvr in the slides.
c. Navigate to D:\sea\Client\WEBTEMPL. This directory contains the .SWT files for the high-
interactivity client.
d. Navigate to D:\sea\Client\WEBTEMPL\OUIWEBTEMPL.This directory contains the .SWT files
for the Open UI client.
e. Right-click CCPopupList.swt and select Edit with Notepad++.
f. Notice the <div> tags. These replace the <table> tags in previous versions of the architecture.
The <div> tags correspond to the "div" elements you saw using the Chrome Inspector.
g. Close CCPopupList.swt, not saving any changes.
h. In the Application, Navigate to Administration Application > Manifest Administration.
i. Query for the Type as Application.
12 | P a g e
Siebel Open Practice Exercises.
This is the manifest used by the application to determine which JavaScript files to download
to the client.
j. Notice that there are a set of records with usage type as COMMON. This identifies JavaScript
files that are always downloaded.
k. Notice that preload.js is one of the files in the COMMON section.
l. Notice that there are COMMON record where the files corresponding to "Desktop" and
"Mobile" that will be loaded on Application opening is mentioned.
This is how behavior between the desktop and mobile platforms is differentiated. You will learn the
details of the manifests in a subsequent lesson.
m. Navigate to D:\sea\Client\public\enu\23030\SCRIPTS. This directory contains the JavaScript
used by Open UI.
n. Notice that busobjshadow.js which you looked at in the inspector is located here.
o. Right-click busobjshadow.js and select Edit with Notepad++. This is a JavaScript file used to
create the local shadow object.
p. Close busobjshadow.js, not saving any changes.
q. Navigate to D:\sea\Client\public\enu\FILES. This directory contains the Cascading Style
Sheets (CSS files) used by Open UI.
r. Right-click appearance.css and select Edit with Notepad++. This is a CSS file used to modify
application appearance.
s. Notice that fonts, colors, and so forth are specified.
t. Close appearance.css, not saving any changes.
u. Close Windows Explorer.
13 | P a g e
Siebel Open Practice Exercises.
Practice 4-1: Modifying the Manifest
Goals
• To modify the manifest file to load the provided custom JavaScript into the Siebel Open
UI application
Time
15 - 20 minutes
Overview
In many business situations, a user might want to view two screens of the Siebel application at once; for
example, when transcribing information from one record into another. Many users accomplish this by
invoking multiple Siebel sessions to fulfill this requirement, leading to the possibility of data corruption if the
user types in the wrong window.
In this practice you will add a custom JavaScript file that adds a menu item allowing you to display a
screen as a read-only popup that does not start a second session. You will next confirm that by default, the
JavaScript is not downloaded to the client and hence not executed. Finally, you will modify the manifest file
to include the JavaScript file and confirm the customization now works as expected.
Tasks
1. Copy the provided JavaScript file to the custom directory.
a. If necessary, select Start > All Programs > Accessories > Windows Explorer.
b. Navigate to D:\Labs\OUI\Manifests.
c. Copy LogOff.js to D:\sea\Client\public\enu\23030\SCRIPTS\siebel\custom.
This is where custom JavaScript for the Siebel Call Center Dedicated Web Client should be
placed.
d. Right-click D:\sea\Client\public\enu\23030\SCRIPTS\siebel\custom\LogOff.js and select Edit with
Notepad++.
e. Examine the JavaScript content; in particular:
• Line 5:
SiebelApp.EventManager.addListner( "post load", OnPostload,
this );
This line causes the Siebel application to call the "OnPostload" function when the "post
load" event occurs; that is, once the application is done loading.
f. Close LogOff.js, not saving any changes.
g. Minimize, but do not close, Windows Explorer.
2. Confirm that, just because the custom file is in the custom directory, it is not
downloaded.
a. If necessary, start the Siebel Call Center Developer Web Client by double-clicking the shortcut on
the desktop.
b. In the application-level menu, verify that there is no Logout Button in the application toolbar.
c. Use the inspector to verify that the PopupMenu.js file was not downloaded to the client.
1) Right-click the application-level menu 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 there is no LogOutBtn.js file listed.
6) In the upper right corner of the inspector, click the X to close it.
e. 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
14 | P a g e
Siebel Open Practice Exercises.
3) Select Tools > Clear browsing data.
4) Verify that "Obliterate the following items from" = the beginning of time.
5) Verify that "Empty the cache" is selected.
6) Click Clear browsing data.
7) Close the browser.
3. Modify the custom manifest to include the JavaScript file.
a. Open Siebel Application and navigate to Application Administration >> Manifest Files.
b. Create a new record with the below details.
c. Navigate to Manifest Administration screen and create a new UI object record with below
details.
Type = Application, Usage Type = Common, Name = PLATFORM DEPENDENT
d. Create a new record in the below Object Expression as shown.
15 | P a g e
Siebel Open Practice Exercises.
e. Create a new record in the files applet and pick the file record that was created earlier.
Click on Add button and pick the file.
Now the manifest changes are complete. Pls note, the names are all case sensitive.
4. Verify that the application now exhibits the desired custom behavior.
a. Start the Siebel Call Center Developer Web Client by double-clicking the shortcut on the
desktop.
b. In the application-level menu, verify that there is now a LogOut Button.
c. Use the inspector to verify that the LogOutBtn.js file was downloaded to the client.
1) Right-click the application-level menu 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 there is now a LogOff.js file listed.
6) In the upper right corner of the inspector, click the X to close it.
Please execute the partial refresh lab once this is done.
16 | P a g e
