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',
'ActivateField','ActivateMultipleFields','Associate','BusObject','ClearToQuery','CountRecords','DeactivateFields','DeactivateFields',
'DeleteRecord','ExecuteQuery','FirstRecord','FirstSelected','GetAssocBusComp','GetNamedSearch','GetFieldValue','GetFormattedFieldValue',
'GetLastErrCode','GetMVGBusComp','GetLastErrText','GetMultipleFieldValues','GetPicklistBusComp','GetSearchExpr','GetSearchSpec',
'GetUserProperty','GetViewMode','InvokeMethod','InvokeMethod','InvokeMethod','InvokeMethod','InvokeMethod','InvokeMethod','LastRecord',
'Name','NewRecord','NextRecord','NextSelected','ParentBusComp','Pick','PreviousRecord','RefineQuery','Release','SearchExpr','SetFieldValue','SetFormattedFieldValue',
'SetMultipleFieldValues','SetNamedSearch','SetSearchExpr','SetSearchSpec','SetSortSpec','SetUserProperty','SetViewMode','UndoRecord','WriteRecord',
'ActiveMode','BusComp','BusObject','FindActiveXControl','FindControl','InvokeMethod','GetFirstProperty','GetNextProperty','GetProperty','PropertyExists',
'RemoveProperty','SetProperty','GetChild','RemoveChild','GetChildCount','SetType','GetType','AddChild','Copy','GetPropertyCount','GetValue','InsertChildAt',
'RemoveProperty','Reset','SetValue','Applet','BusComp','SetLabelProperty'];

$('textarea').textcomplete([
{ // 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


.siebel-bs-script{color:#000;font-size:14px!important;padding-left:10px!important;margin-left:10px!important}

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

Contribute