Вы находитесь на странице: 1из 15

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:

rows in list applets with alternating colours. Like this: Duncan has provided the following CSS rules

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

a nice day @lex Siebel Open UI: Contact Tiles and Images In his Siebel Essentials blog,

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.

Applet in tile mode taken using the Siebel Sample Database. Apart from the as-delivered fields such

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).

to be the Edit List template, not the Edit Tile template). The properties for the list

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:

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.

tile mode. Lo and behold, images are displayed just nicely. User Preferences With the new tile

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.

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,

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:

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

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:

object. Oracle ships some interesting standard expressions: Some Siebel standard Manifest Expressions in 8.1.1.11 We can

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 Value

TRUE

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.

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.

form applet which has been my victim for a while now. Click to enlarge As can

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

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.

a toolbar of buttons where each button represents an applet. In our example, clicking the button

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):

where the corresponding applet was floating to the top): Click to enlarge The code structure of

Click to enlarge

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

top): Click to enlarge The code structure of the PM is essentially the same as in

Click to enlarge

Most of the logic resides in SetRenderer:

Most of the logic resides in SetRenderer : Click to enlarge First, we create two buttons

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

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.

to Duncan Ford who wrote the first version of this View PR. Click to enlarge As

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.

Siebel Open UI Manifest Administration Changes in IP 2013 . Click to enlarge Playing around with

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

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.

is stored in the PM property defaultAppletDisplayMode. Click to enlarge 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:

injects the code that enables the collapsing: Click to enlarge Make applets collapsible in the PR

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:

the PR one might argue that it should be set in the PM: Click to enlarge

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

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.

applet user property in Siebel Tools and compile the applet. Siebel Tools: Quote List Applet with

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:

And this is what I got in return for the above URL: Quote List Applet standalone

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.

account: &BCField0=Account&BCFieldValue0=BBBC+Inc. Click to enlarge. As stated in the documentation, we should

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

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.

by the CSSFrame or CSSFrameList class and any derivatives. Click to enlarge Unfortunately, the user property

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).

applets in the new Open UI version of eService (CX Portal). Collapsible Service Request Tile Applet

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

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

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)

Open UI Architecture (8.1.1.9)

Siebel Open UI Extensibility (aka Scripting API)

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

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)

1 , Part 2 ) ● jQuery UI Widgets: Dialog (1) ● jQuery UI Widgets: Dialog