User Experience Benefits of Siebel Open UI Part 1: Improved Data Visualisation

Posted by Jake Patterson on Mon, Apr 15, 2013 @ 3:46 PM

Welcome to part one of this four part series on the user experience (UX) benefits of Siebel Open UI. In this post I will explore some of the possibilities that Open UI provides for visualising our Siebel data in new and interesting ways. With Siebel Open UI, we’re not confined to using lists and forms as we are in current Siebel applications – instead, we can display our data in almost any way imaginable!

Of course some data lends itself well to being displayed in a list or on a form, as is common in Siebel, but there is no doubt that certain data sets would benefit from being displayed in a more visual way. The Siebel Open UI framework allows us to supplement or even replace Siebel’s traditional list and form applets with any of the thousands of compatible ‘plug-ins’ which are readily-available on the Web and which can dramatically change how our Siebel data is displayed.

Take a look at the screenshot below – here I’ve created an interactive pie chart which is displayed next to the familiar Siebel list applet on the Account Opportunities view. Thanks to the chart, users can instantly see their most valuable opportunity with no effort at all. To drill down on that record, they simply click on the slice of the pie!

Screenshots of charts created with the Google Charts API being displayed in Siebel Open UI
A simple embedded chart (built using the Google Charts API) to provide users with a quick and effective overview of the data contained in the adjacent list applet.

You’ll notice in the next screenshot that when the user hovers their mouse over the pie slices they’re given more information about the record in question. Here it’s just the name but there’s no reason why we couldn’t include more data such as the revenue amount or even the sales team. The pie chart also responds instantly to queries and changing field values. Visualising the data in this way can help users to quickly identify their most important records; instantly this screen is much more intuitive.

Screenshot showing the interactivity available - such as hovering and drilldowns - when using the Google Charts API with Siebel Open UI.
Hover over a slice of the pie for further details, and click to drill down on the relevant record.

Another great example of the flexibility we have in displaying our data can be seen in the following two screenshots. Rather than displaying activity records in a simple list, I’ve created an applet which plots the activities on a timeline – users can scroll through time and zoom in and out, and once they’ve found the record they’re looking for, again they simply click to drill down.

Screenshot of an interactive timeline based applet implemented in Open UI
In the image above, the ‘Timeline Applet’ visually displays Activities over a period of time. Using the mouse to drag left and right takes the timeline into the past or future.

Screenshot displaying a detailed view of the Open UI timeline applet.
If the user zooms in by using the mouse scrollwheel, a more detailed view of a period of time is shown. The timeline was built using the jQuery Timeline Plugin.

Using the timeline in this way is great for environments where data is viewed more often than it is edited, but when more advanced editing or querying is required the user has the option to switch back to the standard Siebel list applet. Providing users with more intuitive, easy-to-use interfaces and interaction methods, along with real options – such as the ability to choose for themselves how they wish to see their data – could play a part in significantly improving the user acceptance of an application.

Neither of the concepts I have shown you today would be possible to realise in Siebel’s High Interactivity user interface, but both were quite simple to build in Siebel Open UI in under two days, making use of a number of standard web technologies such as CSS3, JavaScript and, in the case of the timeline, a jQuery plugin. It’s important to remember that these are just two examples and by no means represent the extent of the options available to us in Open UI. I do hope, though, that these examples have given you a taste of some of the fantastic possibilities brought about by the Open UI framework. As a Siebel consultant, I’m really looking forward to seeing more of the exciting ways we’re able to leverage this flexibility to improve the way Siebel data is displayed and manipulated within applications, and to genuinely improve the experience for users.

In the next part of this series I will be discussing some of the various ways we can utilise Siebel Open UI’s extensibility to add new features to the Siebel application in order to further enhance the user experience.


Tags: Open UI, Siebel, UX

  1. Tracy

    Could you send steps on how to implement the timeline applet? Are the embedded dashboards Analytics dashboards?

  2. Jake Patterson

    Hi anu, we used the Google Charts API ( to add the pie chart to our applets.
    We created logic which converts the Siebel data into the correct format for the charts and we added this logic to the BindData method of the physical renderer ( so the pie chart is updated whenever the underlying data changes – such as after a query.
    To make the pie chart interactive, we used the API’s event handling features ( I hope this helps!

  3. Jake Patterson

    Hi Tracy, we’ve used a couple of plugins for jQuery to create the timeline (you can find two at and
    To integrate with Siebel, we looped over the records returned by the Siebel query and added the relevant data for each record into a data structure used by the plugin (the plugin’s documentation explains how it expects to receive the data). Next, we removed the list applet and added a container for the timeline. Then, when the timeline is activated it replaces the container element with a fully functional timeline!
    We also added additional functionality such as icons which relate to the activity type, and drilldown functionality so the user can click on an item in the timeline to go to the activity record (see Bookshelf for help on this:

  4. Srini

    Hello Jake,

    We have just upgraded to Siebel Open UI and I am having real fun working with all the Javascripts, div tags, CSS, etc as I do not have prior experience in them. Your blog and your screenshots gives me ideas to try in my local environment and thank you for the same :-)

    I was able to use the Google Charts API and show a chart in Siebel. I created a inside which I placed the chart and then appended this to the applet div id which I fetched using “GetPlaceholder”.

    But this is showing the chart below the applet. How can I show the chart on the side similar to how you have done it? I see that you have broken the list applet into 2 parts: one for the original list applet and second for the chart.


  5. Srini

    Hello Jake,

    Please ignore my previous request. I was able to achieve the expected result with some googling and understanding how div tags styling can be used.

    Thanks again,

  6. Jake Patterson

    Hi Srini, thanks for your comments yesterday. I’m glad you’ve found my blog posts interesting, and it’s great that you were able to solve your problem in the end. Luckily there are lots of resources available online to help with the HTML and CSS challenges we sometimes run into with Open UI. I think the Google Charts integration is a great example of how Open UI opens up new possibilities for integrating with external services, and should be a very valuable scenario to learn more about how the Open UI framework works.

  7. Bala

    Hi Jake,

    Is there any possibility to handle click events on a carousel or tile in siebel open ui??

    Thanks in advance,

  8. Lizzy

    Hi Jake! Tracy is actually my team lead and I’m working on implementing this on our system. I’ve worked with websites in the past and it’s crazy to see siebel + the stuff I’ve learned coming together.

    Where I’m getting stuck is we are just implementing two applets instead of a button like you have. I’m trying to get the data from the list applet on the presentation model and then pass that information to the physical renderer to display the timeline using the plugin. Did you use any specific method on the presentation model to get the data for the container? Post Execute? Do you also know of any good examples to get data from Siebel to pass around to javascript?

  9. Jake Patterson

    Hi Lizzy, you’re right, it’s quite exciting for us to see how Open UI has made so much new functionality available within Siebel.

    Regarding your question, you could put your logic into the BindData method, that way it would re-execute whenever the data changes (such as when a query is executed). To get the data itself, because you’re working with a list applet you could use pm.Get(“GetRecordSet”) to return an array of the data which is currently displayed in the list.

    Bookshelf has some example code which uses GetRecordSet(), which you can find here:


  10. Jake Patterson

    Hi Bala,

    I haven’t tried the carousel example from Bookshelf myself, but there are two ways I can think of to do this:
    1) You could create a drilldown field and control, and show this on the carousel / tile. You could intercept the ‘OnDrillDown method to react to the drilldown operation (
    2) You could use jQuery to monitor for a ‘click’ event on your carousel or tile, and react that way:

    Either way, you’d be able to react to the user event and take whatever action you need to.


  11. Sneha

    Do we need to download any library files or plugins ? If yes should we place then in 3rd Party folder and register it on siebel appliation ? Will this work for ?

  12. Jake Patterson

    Hi Sneha,

    Depending on your functionality you may need to download some plugins, yes. I have posted links to some example timeline plugins in earlier comments on this page which you might find interesting. The Google Charts functionality doesn’t need a plugin however, instead Google provides some code which you can use to load in the API at runtime – see the documentation here:

    In terms of registering any plugins you download, yes you’ll need to place them on your webserver and then register them in the Manifest Administration, as with other Open UI files. Personally, I always advise placing your custom files (including plugins) in the siebel/custom directory rather than 3rdParty, just for consistency and to prevent any conflicts after an upgrade.

    I hope this helps!


  13. Santhosh

    Hi Jake,

    We have a requirement to dispaly activities in Gantt Chart format. So in order to display the ‘Activity List Applet’ in the form of Gantt Chart what are all the changes would be required.
    –> how the chart refers the values from Siebel database and render the chart.
    –> Where this logic to read the data from siebel DB is specified.

    Could you please help in this.

    Thanks in advance!!!!

    Santhosh G

  14. Gaurav

    Hi Srini, I want to use same functionality, will you please tell me how did you achieve this functionality ? adding chart beside form or list applet.

    Many Thanks

Leave new comments

  • (will not be published)