Siebel Open UI – Modify Calendar control

As I had said in my initial post about Siebel Open UI that it has a long way to go when it comes to real project implementation. This post is provides another example reaffirming my opinion. Oracle has gone ahead and replaced the Active X calendar control and legacy SI calendar control with jQuery calendar control. Unlike Active X calendar control that could be customized using user and system preferences they have provided no documentation or way to customize the jQuery based calendar control.

We were asked by the client to make the changes to calendar and make Monday as the first day of week and in addition to change the text “Now” to “Today”. Since no documentation was available I tried searching Siebel Unleashed and Siebel Essentials but found nothing. Next step was to open an SR with Oracle support and as usual it didn’t help. Only thing it resulted in is an Enhancement request. It also exposed skill level of Oracle Support when they said that it is just not possible to customize the calendar control in Open UI.

Then the last step was to try to find the answer on our own and it turned out, that it wasn’t that difficult. After a bit of string search, customizing couple of files we were able to achieve this and as usual sharing it here, for everybody’s benefit.

Problem Statement:

• Change the button Label from “Now” to “Today”
• Change the Calendar control to make Monday as the first day of the week instead of the default Sunday.

Solution:

For the first requirement a simple text search for string “Now” in the scripts folder brought up a file named “swemessages_enu.js”. This file contains many string definitions that are used by Siebel in various controls and errors messages. You would see line shown below in the file and changing the string “Now” to “Today” will do the trick.

Before Modification

_SWEmsgAry["IDS_SWE_TIMEPICKER_CURRENT_TEXT"] = “Now”;

After Modification

_SWEmsgAry["IDS_SWE_TIMEPICKER_CURRENT_TEXT"] = “Today”;

The second part of requirement was a bit more tricky. After struggling for a few hours I again performed a text search in the scripts folder for string “IDS_SWE_TIMEPICKER_CURRENT_TEXT” and that brought up name of another file “datepicker-ext.js”. This file turned out to be the key file containing initialization information of jQuery calendar control.

But I still couldn’t figure out how to make Monday as the first day of the week. I tried changing the array definition but it only effected the UI. A bit of research on net revealed that jQuery datepicker control has an option called “firstDay” that controls the day of the week.

So adding the following line did the trick

firstDay : 1

And the result was as you can see below:

But this didn’t seem the right way to do it, so I actually did it the way other options had been define which was as following:

1. In swemessages_enu define a new option
   _SWEmsgAry["IDS_SWE_TIMEPICKER_FIRST_DAY"] = 1;
2. In datepicker-ext.js file define firstDay parameter
   firstDay        : _SWEgetMessage( “IDS_SWE_TIMEPICKER_FIRST_DAY” ),

The final result is as shown below:

Hope this help!! Happy Customizing