Progress Bar

Introduction

In this article, you’ll learn how to create a dynamic progress bar using BeanShell Formatter. This method allows you to visualize progress based on numeric values ranging from 0 to 100. The progress bar will adjust its width and appearance based on the value you provide, giving you a clear visual representation of completion.

How does it work?

1. Create a Form that contains a Text Field, configure the Text Field as 'Completion %', and generate its CRUD menu.
   
2. Open the generated List.
3. Configure the 'Completion %' columns Formatter as BeanShell and enter the code snippet in the Script property as below.
   
   

   if(value == ""){
       value = "0";
   }
    
   String numberOnly= value.replaceAll("[^0-9]", "");
    
   int percent = Double.parseDouble(numberOnly);
    
   if(percent == 100){
       return "<div class=\"progress\"><div class=\"progress-bar progress-bar-success progress-bar-striped\" role=\"progressbar\"aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width:100%\">100% Complete</div></div>";
   }else{
       return "<div class=\"progress\">  <div class=\"progress-bar progress-bar-striped active\" role=\"progressbar\"  aria-valuenow=\"" + value + "\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width:" + value + "%\">    " + value + "%  </div></div>";
   }

4. The BeanShell Formatter code provided processes numeric values to generate a progress bar that visually represents the percentage of completion. Here’s how the code works:
   1. Initialization: If the value is empty, it defaults to 0.
   2. Sanitization: It removes any non-numeric characters from the value.
   3. Parsing: It converts the sanitized string into a numeric percentage.
   4. Progress Bar Construction: Based on the percentage:
      • If the percentage is 100%, it displays a completed progress bar.
      • For other values, it shows a progress bar with the corresponding percentage.
   5. The progress-bar and progress-bar-striped classes are used to style the bar, making it easy for you to integrate with Bootstrap for a consistent appearance.

Expected outcome

Below is an example of the dynamic progress bar generated by the BeanShell Formatter code, showing how it visually represents the completion percentage.

Sample App