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?

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.

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.

BeanShell Formatter Code

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>";
}

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.