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.

15 Comments

Tags: CSS, javascript, jQuery, Open UI, Siebel, UX

  1. Tracy

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

    Reply
    • Jake Patterson

      Hi Tracy, we’ve used a couple of plugins for jQuery to create the timeline (you can find two at http://stoicloofah.github.io/chronoline.js/ and http://almende.github.io/chap-links-library/js/timeline/doc/).
      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: http://docs.oracle.com/cd/E14004_01/books/config_open_ui/appendix_a_API6.html#wp1364438).

      Reply
      • 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?

        Reply
        • 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: http://docs.oracle.com/cd/E14004_01/books/config_open_ui/customizing_example6.html

          Thanks,
          Jake

          Reply
  2. 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.

    Thanks,
    Srini

    Reply
  3. 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,
    Srini

    Reply
    • 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.
      Thanks,
      Jake

      Reply
    • 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
      Gaurav

      Reply
  4. Bala

    Hi Jake,

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

    Thanks in advance,
    Bala

    Reply
  5. 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 8.1.1.14 ?

    Reply
    • 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: https://developers.google.com/chart/?hl=en

      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!

      Thanks,
      Jake

      Reply
  6. 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!!!!

    Regards,
    Santhosh G

    Reply

Leave new comments

  • (will not be published)

Tags

2014 2015 A/B Testing abcs Active Directory ActiveX Active X ADM Adoption ADSI Agent Desktop Analysis Analytics Apache Ant API Applet application builder cloud service ATG Aurora theme Automated Tasks automotive best practice BI BI Apps BI Cloud Service BICS Big Data Big Machines BI Publisher BI Publisher Reports BI Roadmap Brower-based UI Browser UI Business Application Consultants Business Intelligence Campaign Careers CEI Chat chatbot Cloud Cloud CX Cloud Marketplace cloud migration Cloud Services Co-browse Collaboration COM communications consumer goods CPQ CRM CSS Current Vacancies Customer Experience Customer Portal Customisation Custom Object Support CX CX Cloud CX Summit DAC Daily Organiser Daily Planner Data Analysis data model data visualisation Data Warehousing Day Planner digital transformation Eloqua engagement cloud ETL EXADATA Experience routing Facebook financial services FUSE Fusion Fusion CRM G-Cloud gamification Gartner Gmail Google Drive Google Maps API Graduate Graduates higher education high tech html HTML5 IaaS ICS ID Graph IE8 iFrame Incentive Compensation Incident Mapping widget industry Informatica innovation pack Innovation Pack 2015 Innovation Pack 2016 integration integration cloud service Intergration iot IP 15 IP2013 IP2014 IP2015 ip2016 iPaaS Java javascript JConsole Job Role Functionality journey mapping journey to cloud jQuery Judith Sim Knowledge Knowledge base Larry Ellison LDAP Lead Conversion Mapping life sciences Linux Local XE Machine Learning Macros manufacturing Marketing Marketing Cloud May Release 2015 MBeans mcs messenger migration mobile Mobile application Mobile BI mobile cloud service Mobile Compatibility OBI OBIA OBIEE OBIEE 12c ODI on premise OOTB oow OPA Open UI Open UI pathway Open UI Theme Open UI Training OpenWorld Open World OpenWorld 2012 OpenWorld 2013 OpenWorld 2014 OpenWorld 2015 openworld 2016 OPN Opportunity Assessment Oracle Oracle 12c Oracle BI Oracle BI Cloud Services Oracle Cloud oracle commerce Oracle CPQ Cloud Oracle CRM Oracle CX Cloud Oracle Data Visualization Cloud Service Oracle Knowledge Oracle Marketing Cloud Oracle Modern Business Summit Oracle OpenWorld Oracle Partner Network Oracle PartnerNetwork Specialization for Oracle Sales Cloud Oracle Sales Cloud Oracle Service Cloud Oracle Siebel oracle social cloud Oracle Social Network Oracle Transactional Business Inteliigence Oracle Transactional Business Intelligence Oracle Visual Analyzer OSC OSN OTBI Outlook integration PaaS partner relationship management Performance Personalised Directions widget PHP Php upgrade planning tool Plug-in Wrappers POC Portlets prm Proactive proactive cx Recruiting Recruitment Release Release 9 Release 11.1.1.9 Renne James Reporting tool REST RightNow RightNow CX Roadmap SaaS Sales Cloud Salesforce salesforce automation Sales lightbox SAML Self service Service Cloud Service Cloud February 2015 Release Service Cloud Roadmap sfa Siebel siebel 8.1.1.11 Siebel blog siebel CRM Siebel Open UI Siebel Portlets Siebel Roadmap Siebel upgrade siebel ux Simplified UI SOA soap social Social Monitor Social Relationship Management Specialized Specialized Status SRM SSO Syndicated Widgets tco technical consultancy technical experts Testing third party cookie Time Management UI UI Flow UKOUG UNIX upgrade Usability User-facing prompts user experience user interface UX UX Metrics vertical video chat Virtual Assistant visualisation web customer service WebLogic Web Service Web Services wechat whatsapp Widgets WLST WSDL XML XSLT