For the first time in my career I had chance to work on eService a Siebel Standard Interactivity Application. I must say that I am not liking what I see. Since it is a customer facing application it requires extensive modifications to blend in with existing web applications (if any).
UI has always been weakest link of Siebel Applications. If you didn’t like Siebel HI Applications you are going to hate Siebel Standard Interactivity applications. Siebel SI Application UI is ages behind the current technologies. Modifying web templates is the only way to change the UI and making a small change is a task in itself. The UI is not intuitive enough to make it user friendly, I think Open UI is a step in right direction from Oracle and should have been taken long back.
On the bright side though it gives an opportunity to understand the Siebel UI Layer. When working with HI applications we hardly touch web templates and while working with SI you end up modifying them almost on every step. During a short period of time I have been working on eService I have learnt a lot of new stuff about Siebel UI which I had no idea about.
I will be sharing all these learning with you like always as and when time permits. In this post I will show you how to change the layout of the Calendar control of a Standard Interactivity Application. By Default the Control control looks like this
A Calendar control in standard interactivity application is rendered by a combination of following two things present in PUBLIC\enu\XXXX\SCRIPTS folder:
UTCDateTime.html is responsible of rendering the Calendar UI Frames. One window that you see is actually divided in 4 frames containing various controls of the Calender.
UTCDateTime.js is actually responsible for rendering the actual UI of calendar and controls the style and appearance of the Calendar. To change the UI you will need to make changes in UTCDateTime.js.
I will be listing important variables controlling the style of calendar that you can modify to achieve your desired appearance.
var topBackground = “slateblue”; // BG COLOR OF THE TOP FRAME
var currentCellColor = “#F0E68C”; // Color of the current selected Date
var headingLinkColor = “white”; // Color of the arrows controlling month and year << >>
buildButtonFrame Function controls the button layout “Save” and “Cancel”
After making the changes in above mentioned areas I was able to change the Calendar appearance as shown below:
Your comments and feedback are most welcome. There are more interesting things to come soon so stay tuned.