Siebel Open UI Enhancement :- Progress Bar in Siebel

Hello All,

In this post i will demonstrate a very useful API, Progress Bar Indicator. There are various areas where this API fits well as listed below

• Opportunity Win/Loss Percentage
• Order Status 
• Service Request SLA

In the below example the API takes value from Probability field on the form and displays the progress bar as per the percentage.

I would like to thank Sandip Mitra for his valuable inputs in this.

Sample Code and Explain-out

1. Identify a placeholder to place ProgressBar, either identify an existing placeholder or create a new one for placing progress bar.

$('.GridBorder').after('<div id="progressBar"><div></div></div>');

2. Set the Display properties by CSS  for your generated ProgressBar, parameters are defined in CSS .  

You can either add inline CSS as we are doing in this example or create a new CSS file,please refer this post for steps about how to add a new css in siebel 


   $('#progressBar').css({   
  "width": "auto",  
   "height": "30px",  
   "margin": "10px",   
  "border": "2px solid #111",    
 "background-color": "#292929" 
   })


  $('#progressBar div').css({  
 "height": "100%",    
 "color": "#fff",  
   "text-align": "right",    
 "line-height": "28px",   
   "width": "0",    
 "background-color": "#0099ff"   
 })


3. Set the animation in ProgressBar.

We are using animate function of jquery library to show the progress bar, please refer the link ,https://www.w3schools.com/jquery/jquery_animate.asp

to explain the basic,  

progressBarWidth = percent * $('#progressBar').width() / 100;


$('#progressBar').find('div').animate({ width: progressBarWidth }, {duration: 5000,easing: "linear"}).html(percent + "% ");


here in animate function we need to pass:-


(selector).animate({styles},speed,easing,callback)

selector, the Id of our created DIV $('#progressBar')

{styles}, styles for animation like width , height, etc..
  
easing, the movement of progress linear or non-linear 

callback, function to be executed after the animation 


4. Get the actual value of Probability from Probability field from form.

Get the value of control using PR file 

     var pm = this.GetPM();
    var controls = pm.Get("GetControls");
    var cntrl = controls[ "Probability" ];
    var percent = pm.ExecuteMethod( "GetFieldValue", cntrl );


5. Write custom logic to refresh and load the Bar where ever required.


Working Example looks like,

Video for the working Example,

you can email me for the exact PR file. Your comments are suggestion are most welcome.

Adding new CSS in Siebel

Hi all,

Recently i had a requirement to make some changes in siebel application layout, the changes were related to CSS. So instead of making changes in existing CSS we prefered to write a new CSS file and register in the application.

The approch is very simple we need to follow below steps.

1. Write a new css file, and add your code there.

2. Save your file under custom folder in Web Server  (swse/public/enu/files/custom/NewCss.css) 

3. Make an entry for your new css in Theme.js file located in (swse/public/enu/23030/script/siebel/custom/Theme.js)

4. Under Administration - Application ,Mainfest File make an entry for Theme.js if its not there.

clear cache and you are done, changes made in new css will be reflected without changing vanila siebel files.

 you need to add the below lines in theme.js to register custom css with the vanila themes.

SiebelApp.ThemeManager.addResource(     "GRAY_TAB",     {        css : {                "sce-theme" : "files/custom/NewCSS.css"  // Location of CSS file which needs to be added as part of existing theme               }     } ); SiebelApp.ThemeManager.addResource(     "TANGERINE_TAB",     {       css : {                "sce-theme" : "files/custom/NewCSS.css"  // Location of CSS file which needs to be added as part of existing theme               }     } );  SiebelApp.ThemeManager.addResource(     "GRAY_ACCORDION",     {        css : {                "sce-theme" : "files/custom/NewCSS.css"  // Location of CSS file which needs to be added as part of existing theme               }     } ); SiebelApp.ThemeManager.addResource(     "TANGERINE_ACCORDION",     {        css : {                "sce-theme" : "files/custom/NewCSS.css"  // Location of CSS file which needs to be added as part of existing theme               }     }

I will post details of how to customise the UI in my upcoming post..till then happy reading...:-)