Siebel Open UI: Alternating Row Colours

With a huge hat tip to fellow Siebelite Duncan Ford, here is a quick solution to show rows in list
applets with alternating colours. Like this:

Duncan has provided the following CSS rules which, when added to a custom style sheet, do the
trick. Totally without any JavaScript coding.

.ui-jqgrid .ui-widget-content:nth-child(odd) {
background: #e4bf66;
}
.ui-jqgrid .ui-widget-content:nth-child(even) {
background: #f9e6b7;
}
tr.ui-state-highlight {
background:rgba(0, 0, 0, 0.2) !important;
}
.ui-jqgrid .ui-state-highlight, .ui-jqgrid .ui-widget-content .ui-state-highlight, .ui-jqgrid .ui-
widget-header .ui-state-highlight {
background:initial;
}

As you can see, CSS can distinguish odd and even children of a selection. I have seen quite a lot of
jQuery code which accomplishes the same (and of course allows for a more dynamic colouring). But
you can’t deny the purity and simplicity of CSS.

Many thanks to Duncan for sharing this.

have a nice day

@lex

Siebel Open UI: Contact Tiles and Images

In his Siebel Essentials blog, Alexander Hansal continues his exploration of the Siebel Open UI.

One of the many new features in Innovation Pack 2013 for Siebel Open UI are different visual
display modes for list applets.

Using tiles makes sense on mobile devices as they are easier to select by tapping. But also in
desktop applications, tiles can make dull lists more visually appealing. The Contact List Applet for
example comes with two new buttons which allow us to toggle between "Grid" (i.e. classic list) and
"Tile" mode.
Below is a screenshot of the Contact List Applet in tile mode taken using the Siebel Sample
Database.

Apart from the as-delivered fields such as full name, address, email address or phone number, the
ability to store and display an image along with the contact data stands out. Alas, the sample
database does not provide sample images…

In addition, it is not too obvious how to add an image (or a reference/link) to a contact record at first
glance. After a bit of investigation and with a little help from my friend and fellow author Jan, here is
a solution.

The initial problem seems to be that the new BC field named Image Source Path is not exposed by
default in the Edit List template of the Contact List Applet in the vanilla Siebel Repository.

So let's go to Siebel Tools and ensure that the field is exposed as a list column in the Edit List
template (note that it has to be the Edit List template, not the Edit Tile template).

The properties for the list column should be set as follows:

Field: Image Source Path

HTML Type: Image Control
Show In List: TRUE

After compiling the applet, we can launch the application and test. We can now use the new list
column to add a URL to an image file to a contact record.
For example, you could pick a contact image URL from LinkedIn, like this one:
http://m.c.lnkd.licdn.com/mpr/mpr/shrink_100_100/p/1/000/025/1a0/0c62faf.jpg

After leaving the column, the image immediately displays, which distorts the list. But let's ignore this
and switch to tile mode. Lo and behold, images are displayed just nicely.

User Preferences

With the new tile display, there are also some new user preferences which you will find in the
Behavior view.

The Visualization preference allows you to select your preferred default visualization (Grid, Tile or
Map) and the Default Scroll Speed preference controls the velocity of the tiles when you use the
scroll icons.

Summary

With some small tweaks, we can bring the images on the new contact tiles to life.

This post originally appeared in the Siebel Essentials Blog.

Siebel Open UI: Contact Tiles and Images

One of the many new features in Innovation Pack 2013 for Siebel Open UI are different visual
display modes for list applets.

Using tiles makes sense on mobile devices as they are easier to select by tapping. But also in
desktop applications, tiles can make dull lists more visually appealing. The Contact List Applet for
example comes with two new buttons which allow us to toggle between “Grid” (i.e. classic list) and
“Tile” mode.

Below is a screenshot of the Contact List Applet in tile mode taken using the Siebel Sample
Database.
Apart from the as-delivered fields such as full name, address, email address or phone number, the
ability to store and display an image along with the contact data stands out. Alas, the sample
database does not provide sample images…

In addition, it is not too obvious how to add an image (or a reference/link) to a contact record at first
glance. After a bit of investigation and with a little help from my friend and fellow author Jan, here is
a solution.

The initial problem seems to be that the new BC field named Image Source Path is not exposed by
default in the Edit List template of the Contact List Applet in the vanilla Siebel Repository.

So let’s go to Siebel Tools and ensure that the field is exposed as a list column in the Edit List
template (note that it has to be the Edit List template, not the Edit Tile template).

The properties for the list column should be set as follows:

Field: Image Source Path

HTML Type: Image Control
Show In List: TRUE

After compiling the applet, we can launch the application and test. We can now use the new list
column to add a URL to an image file to a contact record.

For example, you could pick a contact image URL from LinkedIn, like this one:
http://m.c.lnkd.licdn.com/mpr/mpr/shrink_100_100/p/1/000/025/1a0/0c62faf.jpg

After leaving the column, the image immediately displays, which distorts the list. But let’s ignore
this and switch to tile mode. Lo and behold, images are displayed just nicely.

User Preferences

With the new tile display, there are also some new user preferences which you will find in the
Behavior view.

The Visualization preference allows you to select your preferred default visualization (Grid, Tile or
Map) and the Default Scroll Speed preference controls the velocity of the tiles when you use the
scroll icons.

Summary

With some small tweaks, we can bring the images on the new contact tiles to life.

have a nice day

@lex
Siebel Open UI Manifest Expressions and
System Preferences

Introduced in IP 2013, Manifest Expressions can be used to evaluate conditions whether a certain
set of JavaScript files or a certain web template file should be loaded for a given user interface
object.

Oracle ships some interesting standard expressions:

Some Siebel standard Manifest Expressions in 8.1.1.11

We can inspect those standard expressions by navigating to the Administration – Application screen,
Manifest Expressions view.

Most of the standard expressions use either the GetProfileAttr() method or the new GetObjectAttr()
methods to match the value of either a profile attribute or an attribute of an applet with a string.

My first impression was that obviously we can use Siebel Query Language to construct complex
expressions. So I started experimenting…

One of my first experiments was built on the idea that it could be worthwhile having a central
“switch” for enabling or disabling Open UI customizations. Here is the cookbook I came up with:

1. Create a System Preference

First, I navigated to Administration – Application – System Preferences and created a new system
preference as follows:

System Preference AHA Show

Name Customizations
System Preference TRUE
Value

When set to “TRUE”, the system preference should “tell” the Open UI framework to load
customizations such as a custom physical renderer for an applet. When set to “FALSE”, no custom
files should be loaded.
2. Create a Manifest Expression
In the Manifest Expressions list, I created a new record as follows:
Name AHA Show Customizations
Expression SystemPreference(“AHA Show Customizations”) =
‘TRUE’
As you can see, I resorted to the SystemPreference() method of the Siebel Query Language to get
the value of my new system preference. The new expression would evaluate to “true” when the
system preference has a value of “TRUE” and vice versa.
3. Use the expression
Finally, I have to employ the new expression with a user interface object. For my experiment, I
associated the new expression with the Opportunity form applet which has been my victim for a
while now.

Click to enlarge
As can be seen in the screenshot, I added a custom physical renderer to the Opportunity Form
Applet – Child. I used my new expression and associated it with the custom JavaScript file.
As a result, the custom physical renderer should only be loaded when the system preference is set to
“TRUE”. A quick test proved that it worked as expected.
Here is the applet with the system preference set to TRUE:

Note the highlighted customizations (progress bar, slider and clickable account label).
And here is the same applet after setting the system preference to FALSE (and restarting the
application):

As you can (or cannot) see, the customizations have disappeared; the applet is displayed in “vanilla”
mode.
Summary
Open UI manifest expressions can be put to good use to evaluate almost any condition using Siebel
Query Language.
Caveat
During my experiments, I found that not all Siebel Query Language “tricks” worked. For instance, I
couldn’t get InvokeServiceMethod() to work. If anyone wants to shed some light on this, please find
the comments.
have a nice day
@lex

Siebel Open UI: View PRs - a Toolbar to

quickly access Applets

by Jan Peterson

In a previous post we already looked at physical renderers for views. Today we look at an example
that was in a similar form part of the first pre-beta demos of Open UI (yes – the version that was
shown during OOW 2011 ) – a toolbar of buttons where each button represents an applet.

In our example, clicking the button will collapse all other applets (which is slightly different to the
OOW 2011 demo where the corresponding applet was floating to the top):

Click to enlarge

The code structure of the PM is essentially the same as in the previous example:

Click to enlarge
Most of the logic resides in SetRenderer:

Click to enlarge

First, we create two buttons – one for collapsing all applets and one for expanding all applets.
Afterwards, we iterate through all applets and make sure that they are collapsible – a trick we
looked at in a previous post.

Afterwards we create a button for each applet. The button-text is the label of the applet. As a small
gimmick we add the number of records in the applet to the button-text. Pressing the button calls the
method CollapseApplets which will collapse all applets but the applet linked to the button.

Finally, we inject the different buttons into the view.

In summary, View PRs allow to easily add additional UI features to views. In the example we create a
toolbar which simplify access to applets in complex views.

have a nice day

Jan

Siebel Open UI: View PRs - Sort 'em out

Thanks to Jan again for this guest article

***

In prior releases of Open UI most configurations were limited to a single applet. Presentation
Models (PMs) and Physical Renderers (PRs) could be reused for different applets but – apart from
CSS changes – there was no documented way to provide changes outside of applets or enable
configuration that spawned more than a single applet. Most of the time such changes ended up in
the (undocumented) postload.js.

A feature that didn’t make it into the first release of IP2013 but ended up in the first patchset are
PMs and PRs for views (I am pretty sure that I saw this documented in the release notes of patchset
1 – unfortunately I am unable to find the note – please drop me a note with the link if you have the
URL at hand).

In case you are unfamiliar with the new concepts of patchsets have a look at Latest recommended
maintenance pack for Siebel Open UI on Siebel Version 8.1.1.x and Version 8.2.2.x [Document
1535281.1] which states:

“For Siebel CRM version 8.1.1.11 and 8.2.2.4 (Innovation Pack 2013, also known as IP2013),
Siebel Open UI fixes will no longer be shipped in monthly quick fix (QF) format but be part of the
monthly IP2013 patchsets. For IP2013, regular fixes (including Siebel Open UI fixes) will be shipped
as part of monthly bundles called Siebel IP2013 patchsets. These fixes also, are cumulative, meaning
the fixes included in IP2013 Patchset 1 will be included in IP2013 Patchset 2“.

View PM and PRs significantly mitigate the need to add code to postload.js. In the following we look
at an example that enable two things in the vanilla view Contact Summary View:

1. Making all applets in a view resizable

2. Allowing to drag&drop applets without loosing a grid layout.

Creating a View PR follows the same steps as creating an Applet PR:

First, we create the PR code proper and save it in the custom folder. Kudos to Duncan Ford who
wrote the first version of this View PR.

Click to enlarge
As bookshelf doesn’t contain any reference to View PRs (yet?) I spent a bit of time looking at the
different events. So far I found four methods that are called:

1. Init: the first method that is called. In the example, we use a complex looking CSS selector to
identify the bottom four applets in our view. Afterwards we flag them with a class and and unique
id and apply the JQuery-method sortable to the applets. This allows to drag and drop the four
bottom applets in the view.
2. Setup
3. SetRenderer: In the example we iterate through all applets in the current view and apply the
JQuery-method resizable to them which allows to dynamically resize all applets. SetRenderer is
the first method in the chain in which GetAppletMap returns a list of applets. In Init and Setup
the method returns an empty array.
4. EndLife – called when a user navigates to a different view. It seems that it gets called twice. None
of the methods seem to provide any predefined behavior but are just empty hooks. As an
interesting matter of fact, ShowUI, BindData and BindEvents -as used by Applet PRs – are not
called for View PRs. In case you are intested in the details have a look at the proxy file pmodel.js
which defines the root class for View PMs.

Using the new manifest view we need to register the custom .js file and link it against a view. Apart
from selecting a type View instead of Applet in the UI Objects applet there is no difference to the
process described in Siebel Open UI Manifest Administration Changes in IP 2013.

Click to enlarge

Playing around with the example it is obvious that the code is not production ready:

1. It is possible to resize applets in a way that make them unusable.

2. Changes are not persistent – refreshing the view makes all changes void. However, it should be
simple to store the information in cookies as explained in Siebel Open UI Tab Layout: Sort ‘em out
– Part 2

In summary, View PRs and PMs open up a new range of configuration options and significantly
reduce the need to add code to postload.js. Documentation is essentially non-existent at the moment
but using the knowledge from applet PMs and PRs it is easy to create PMs and PRs for views.

have a nice day

Jan

Siebel Open UI: Collapsible Applets Revisited

by fellow author Jan:

In a previous post we looked at how applets can be made collapsible by using the Default Applet
Display Mode applet user property in Siebel Tools. In the following we look how we can use the
same feature in a custom physical renderer (PR) without the need to change the repository (or SRF).

How ClientPMUserProp works

Let’s investigate what happens when we add a value to the ClientPMUserProp applet user property:

First, Siebel passes all values that are in the list of the values of ClientPMUserProp to the client.

Next, the values are encapsulated in a property set of type apm which is read in the
the Setup method of the Open UI proxy file pmodel.js and put into properties of the PM. As we can
see the value of the user property Default Applet Display Mode is stored in the PM property
defaultAppletDisplayMode.

Click to enlarge

The PM property defaultAppletDisplayMode is read in the method ShowCollapseExpand of the Open

UI proxy file phyrenderer.js which is called from ShowUI. ShowCollapseExpand injects the code that
enables the collapsing:

Click to enlarge

Make applets collapsible in the PR

With the knowledge gathered from the proxy code, we only have to set the PM property
defaultAppletDisplayMode in our custom PM/PR to make an applet collapsible “on the fly”. In my
example I set it in the PR – one might argue that it should be set in the PM:

Click to enlarge
As we set the property before the call of ShowUI no other change is required. If we set it after the
call of ShowUI we can call this.GetPM().GetRenderer().ShowCollapseExpand() to inject it. Just be
aware that you shouldn’t call the method more than once as every call of ShowCollapseExpand adds
a collapsing icon to the applet.
Please note that the above is undocumented.

Summary
By setting the defaultAppletDisplayMode PM property we can make an applet collapsible without the
need to perform any change in Siebel Tools.
***
Thanks to Jan for this article
have a nice day
@lex

Siebel Open UI: Portlets Reloaded

As described in an article earlier last year, Siebel Open UI enables us to display individual applets as
“portlets” in any web portal. As of the early versions 8.1.1.9 and 8.1.1.10, this was supported but the
functionality was to be considered “basic”.

As of Innovation Pack 2013, there have been some major enhancements around the possibility to
display data from Siebel Open UI in external applications.
In the following article, I would like to point out these enhancements:
Standalone Applets
One of the enhancements in IP 2013 is the ability to display applets in external web pages as
“standalone” applets, that is without a surrounding view. However, we still have to establish the
context to a business object, which we do via a new applet user property named Business Object.
So in order to prepare an applet for display as a standalone applet, you must set that applet user
property in Siebel Tools and compile the applet.

Siebel Tools: Quote List Applet with Business Object user property.
As you can see in the above screenshot, the Business Object applet user prop value is the name of
the business object (Quote in the example).
URL Options

To expose a standalone applet in an external web page, you will have to construct a URL similar to
the following:
http://myserver/callcenter_enu/start.swe?SWECmd=ExecuteLogin&SWEUserName=SADM
IN&SWEPassword=SADMIN&SWEAC=SWECmd=GetApplet&SWEApplet=Quote+List+Applet&IsPo
rtlet=1&SWESM=Edit+List&KeepAlive=1&PtId=ALEX_BW
And this is what I got in return for the above URL:

Quote List Applet standalone in a web browser.

Obviously, I have entered the minimalist phase of web design but I did this to demonstrate that you
can pass the name of a UI theme as a parameter (see below list).
Here are the SWE URL parameters you need to return a standalone applet (you also might want to
refer to the official documentation):
SWECmd=ExecuteLogin: needed when you don’t want to resolve authentication with SSO or similar.
SWEUserName=[username]: needed in combination with the above.
SWEPassword=[password]: needed in combination with the above.
SWEAC: Additional command to be executed
SWECmd=GetApplet: Command to get a standalone applet (new in IP 2013)
SWEApplet=[applet name]: Name of the standalone applet
IsPortlet=1: Needed to specify the applet as a portlet.
SWESM=[Applet Mode]: Name of the applet mode such as Edit List.
KeepAlive=1: Avoid session timeout
PtId=[Name of Open UI theme]: Internal name (e.g. GRAY_TAB) of the Open UI theme to use (new in
IP 2013)
Search Criteria
Once you have the base URL working, you can enhance it by adding search criteria, as described in
the bookshelf guide.
These search criteria can be specified for fields in the applet BC or the parent BC using the
following SWE URL parameter syntax:
BCFieldN=field_name&BCFieldValueN=field_value
where N is a sequence number starting at 0.
To provide search criteria for the parent BC, you use the following:
PBCFieldN=parent_field&PBCFieldValueN=parent_field_value
Again, N must be replaced with a sequence number starting at 0.
For example, after adding the following to my test URL, I got a list of quotes for a specific customer
account:
&BCField0=Account&BCFieldValue0=BBBC+Inc.

Click to enlarge.
As stated in the documentation, we should be able to use criteria with query operators like “This
Name OR That Name” but I wasn’t able to get it to work in my test environment. Also, I found it
impossible to use wildcard characters.
Displaying Views
It is also possible to display an entire view with all applets or just a specific applet which is
accomplished by using the well known GotoView command. The bookshelf example is as follows (just
showing the part after SWECmd)
SWECmd=GotoView&SWEView=view_name
Server Parameters
The Configuring Siebel Open UI guide specifies some new server component parameters which are
meant to enable a secure channel to use Siebel UI artifacts such as applets or views
programmatically in the context of other applications.
These server component parameters are:

● PortletAPIKey: a string which is used as a security token by the portlet requester.

● PortletOriginList: a comma separated list of requester domains which are granted access to the
portlets.
● PortletMaxAllowedAttempts: the maximum number of attempts before access is blocked by the
Siebel server.
● PortletBlockedInterval: the number of seconds how long the access is blocked.

The requester would be a script in the calling application. According to Oracle engineering, this
would enable an external application to display a Siebel applet in its own context and trigger
navigation without having to re-establish a session (which would happen using the SWE API
described above).

Summary
With Innovation Pack 2013, more cowbell has been added to the already useful portal style
integration which allows to display Siebel applets and views in another application’s context.

have a nice day

@lex

Siebel Open UI: Collapsible Applets

Thanks to fellow Siebel expert, Jan for the following guest article.
***

Not long ago a customer raised the question how applets can be made collapsible in Open UI.
While such a feature already exists in HI it is rather cumbersome to handle and has some limitations.
Siebel Innovation Pack (IP) 2013 simplifies this a lot by introducing a new applet user
property named Default Applet Display Mode. The property can have the values Expanded or
Collapsed which specify the default mode of the applet.

In order to make the Open UI framework aware of the user property we have to add it as a value to
the user property ClientPMUserProp. ClientPMUserProp was already part of a previous post (Siebel
Open UI: Drag and Drop Import).

The user property is supported by the CSSFrame or CSSFrameList class and any derivatives.

Click to enlarge
Unfortunately, the user property is undocumented at the moment. However, various vanilla applets
use the user property including several applets in the new Open UI version of eService (CX Portal).

Collapsible Service Request Tile Applet in the new eService appliction.

In summary, by adding a simple user property an applet can be made collapsible.

have a nice day

@lex

Siebel Open UI Review

In his Siebel Essentials blog, Alexander Hansal continues his exploration of the Siebel Open UI.

Almost exactly one year ago, in December 2012, Oracle shipped Siebel CRM version 8.1.1.9 / 8.2.2.2.
This was a milestone release as it was the first public available version of Siebel Open UI.

Understandably, the availability of a modern browser- and device-independent web user interface
for Siebel CRM caused much buzz and stir among customers, partners and competitors.

Over the last year, this humble writer and fellow authors have published more than 50 articles on
Open UI on the Siebel Essentials blog and these were among the most read and commented entries
ever.

I have categorized 2013 articles on Siebel Open UI.

Siebel Open UI Overview and Architecture

● Release Announcement (8.1.1.9)

● Release Announcement (8.1.1.10)
● Release Announcement (IP 2013)
● A Closer Look at Siebel Open UI
● Open UI Architecture (8.1.1.9)
● Interview with Uma Welingkar
● Hopefully Useful Graphic (H.U.G.) (pre IP 2013)
● Hopefully Useful Graphic (H.U.G.) (IP 2013)

Siebel Open UI Extensibility (aka Scripting API)

● Read this Before You Write Browser-Side Script!

● Scripting: Give it a Break

Ok, you read the above articles, now you may read further

● Creating a Presentation Model Extension

● Creating a Physical Renderer Extension
● It's a Drag (Part 1, Part 2)
● See-Through Applets (Part 1, Part 2, Update)
● Sortable Tabs (Part 1, Part 2, Part 3)
● Colorbox (Case 1, Case 2)
● Tiles and Styles (Part 1, Part 2)
● jQuery UI Widgets: Dialog (1)
● jQuery UI Widgets: Dialog (2)
● jQuery UI Widgets: Slider
● jQuery UI Widgets: Progressbar
● Remove Annoying Tooltips
● Sorting Navigation Dropdown Menus
● Field Level Help
● Displaying Contextual Information in the Message Area
● Displaying Customer Hierarchy with arbor.js
● Migrating Open UI Customizations to IP 2013 (and here)
● Manifest Administration Changes in IP 2013

Siebel Open UI Themes and CSS

● Customizing Open UI in Style (How to create a custom theme)

● Check Your Boxes
● Highlighting Required Fields

Siebel Open UI Related Topics

● Performance Logging in Siebel Open UI

● Siebel Mobile Connected Applications
● Applets 'R' Portlets
● Symbolic URLs in Open UI
● Drag and Drop Import
● Open UI in 3D
● New Features in Message Broadcasting (IP 2013)

This post originally appeared in the Siebel Essentials Blog.