Agile Tortoise

Greg Pierce’s blog

« Servoy newsletter      Flotsam or jetsam? »

Servoy: simple HTML progress bar

I have several places in Servoy solutions where it's nice to display a simple progress bar to the user. This is for workflows, where the user needs a visual for how far along they are on the task/job/etc. -- not for actual progress on executing code.

I wrote a simple global method you can call from a dataprovider calculation to get back an HTML table that mimics a progress bar. So, if I've got a field (or calculation) on a table "progress_percent", that returns the percent complete on a item, I can also create a method that calls this global, passing in the percent field as an argument, returning a nice little visual of the progress -- like this,

progress.jpg

And here's the code:

PLAIN TEXT
JavaScript:
  1. var progress = arguments[0];
  2. if ( progress == null )
  3.     return null;
  4.  
  5. var html = "<html><head>";
  6.  
  7. html += "<style>";
  8. html += "td{font: 8pt Arial;}\n";
  9. html += "td.green{background-color:#AAFFAA;}\n";
  10. html += "td.red{background-color:#FFAAD4;}\n";
  11. html += "</style>";
  12.  
  13. html += "</head><body>";
  14. html += "<table width='100%' cellspacing='1' cellpadding='0' border='0'>";
  15. html += "<tr>";
  16.  
  17. for( var ix = 0; ix <100; ix=ix+10 )
  18. {
  19.     if( ix <progress )
  20.         html += "<td class='green' nowrap='nowrap'>&nbsp;</td>";
  21.     else
  22.         html += "<td class='red' nowrap='nowrap'>&nbsp;</td>"; 
  23. }
  24.  
  25. html += "</tr>";
  26. html += "</table>";
  27. html += "</body></html>";
  28. return html;

Wednesday, November 7th, 2007 at 4:13 pm and is filed under Servoy. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “Servoy: simple HTML progress bar”

  1. Arup Ranjan Sahoo Says:
    January 9th, 2008 at 3:15 am

    Great Tip…

Leave a Reply