Client Side Business Service- Siebel Open UI

Writing script on client side in Siebel is a nightmare. In the name of IDE we only a text area where we have to write the code. Here are some of the major problems that I see with this

  • Formatting is a real pain as the only way to indent the code is spaces.
  • Hitting tab key will take focus out of text area.
  • There is no intellisense or syntax highlighting
  • Debugging is a pain.

While thinking about use cases of Siebel Open UI I wondered if there is any way we can fix these problems. After doing some analysis I found that yes it is possible to change all this. Below is the approach to implement the final solution:

  • Replace text area with either contenteditables or third party jQuery editor like TinyMCE
  • Implement intellisense again using third party jQuery plugin
  • Basic Syntax checking can also be implemented
  • Finally the code needs to be saved to  Business Service field so that it can execute properly

I didn’t had time to create an elaborate solution to accomplish all the enhancements in my wish list but with small piece of code and a plugin I was able to overcome what I consider major nuisances such as

  • Functional Tab Key to help format the code
  • Intellisense (kind of..) using jQuery plugin called textcomplete
  • Increased font size for better readability

Not wasting any time further here are the steps to make it happen:

This snippet of code is used to get the tab key functional

$('textarea').keydown(function(e) {
   if(e.keyCode == 9) {
        var start = $(this).get(0).selectionStart;
        $(this).val($(this).val().substring(0, start) + "\t" + $(this).val().substring($(this).get(0).selectionEnd));
         $(this).get(0).selectionStart = $(this).get(0).selectionEnd = start + 1;
       return false;

Following snippet is required to get the intellisense functionality working

//create array with all the keywords
var elements = ['TheApplication','RaiseErrorText','GetBusObject','GetBusComp','NewPropertySet','substring','InvokeMethod',

{ // html
     match: /\b(\w{2,})$/, //regex to match characters
     search: function (term, callback) { // function to find a match and return the match keyword
         term = term.toLowerCase(); //to implement case insensitive search
         callback($.map(elements, function (word) {
             return word.toLowerCase().indexOf(term) === 0 ? word : null;
      index: 1,
      replace: function (value) {
           var fVal = "";
           if(value === "TheApplication"){ fVal = "TheApplication().";    }
           else{ fVal = [ value + '("', '");']; }
           return fVal;

Optionally you can include following CSS rule to increase the font size and margin of the script


You can see it action here

If interested you can download actual PR file from here.

2 Responses to Client Side Business Service- Siebel Open UI

Leave a Reply