0-100 Progress bar on tabular report

[Volomeister]

Hi there,

For one of my projects, I needed to display 0-100 values in one of the fileds on tabular report in a form of a progress bar.
Here is an example of how it looks: https://c7eku786.caspio.com/dp/7f80b0006598726cb69c4239b1dc

In this forum post I would like to share 2 solutions to achieve this. One presuposses using only HTML/CSS and the second one requires JavaScript.

1. HTML/CSS solution.
1.1 Add next CSS to the header of your DataPage"

<style>
.progressbar-container {
background-color: #f1f1f1;
}
.progressbar {
background-color: #9e9e9e;
height: 24px;
padding: 5px;
color: white;  
}</style>

1.2 Add HTML block to your tabular report (results page) that will represent a progress bar
1.3 Add next HTML code to the HTML block:
 

<div class="progressbar-container">
  <div class="progressbar" style="width:[@field:ProgressBar]%;">[@field:ProgressBar]%</div>
</div>

1.4 Substitute [@field:ProgressBar] with the field name where you store values from 0 to 100

2. JavaScript solution
2.1 Add the same CSS code as in 1.1
2.2 Add next JavaScript snippet to the header of your DataPage (below or above style)

<script>

if (typeof addProgressBar == 'undefined') {

const progressBarPosition = 3

const addProgressBar = ()=> {
document.querySelectorAll(`.cbResultSetTableCellNumberDate:nth-child(${progressBarPosition})`).forEach(progressBarCell => {
    let value = progressBarCell.innerText
    progressBarCell.innerHTML = `<div class="progressbar-container">
  <div class="progressbar" style="width:${value}%;">${value}%</div>
</div>`})
document.removeEventListener('DataPageReady', addProgressBar)
}

document.addEventListener('DataPageReady', addProgressBar)

}

</script>

2.3 Substitute value of progressBarPosition variable so it matches the position of your field that holds 0-100 value in the report DataPage

Difference between this approaches is that HTML version of the progress bar will not allow sorting once you click on the field label where JavaScript approach allows sorting once field label is clicked.

Hope this helps to someone

[Lynda]

I was wondering if someone could help me.

I applied the solution above and got it working.

Thank You!!!!

I am having a problem with the CSS. I can manipulate the ProgressBar, but I can't manipulate the container.

I have tried:

<style>
.progressbar-container {

background-color: #FFC20E;
height: 30px;
width: 75px;
}
.progressbar {
background-color: #A7DA4E;
height: 24px;
width: 75px;
color: white;  

}

I have tried auto for the height and width. 

I don't know what else to try.

Any ideas?

Lynda

[eunha]

23 hours ago, Lynda said:

<style>
.progressbar-container {

background-color: #FFC20E;
height: 30px;
width: 75px;
}

Perhaps try to set the height and width property/value as '!important'.

[Lynda]

That helped. But now I have run into another problem.

The Progress Bar works as designed when the percents are within range (0 - 100)

When the percent is > 100, the ProgressBar expands past the Progress container

When the percent is < 0, the ProgressBar treats it like it is 100 percent and goes green. (see entry #3 in the example below)

I know I need some type of conditional logic, but I don't know how to modify the code. I have searched the https://www.w3schools.com website to see if they could show me how to fix this, but I have not found a solution. I am NOT a HTML/Java programmer and have limited exposure.

I really need help (in more ways than one...  )

The code (In the Header)

if (typeof addProgressBar == 'undefined') {

const progressBarPosition = 3

const addProgressBar = ()=> {
document.querySelectorAll(`.cbResultSetTableCellNumberDate:nth-
child(${progressBarPosition})`).forEach(progressBarCell => {
    let value = progressBarCell.innerText
    progressBarCell.innerHTML = `<div class="progressbar-container">
  <div class="progressbar" style="width:${value}%;">${value}%</div>
</div>`})
document.removeEventListener('DataPageReady', addProgressBar)
}

document.addEventListener('DataPageReady', addProgressBar)

}

The code (In an HTML block)

<div class="progressbar-container">
  <div class="progressbar" style="width:[@field:WeightLog_Progress#]%;">[@field:WeightLog_Progress#]%</div>
</div>