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.