Task Status Visual Reporting: Time lapse controlled HTML symbol color change

[Maynard]

Hi All,

I'm new to the forum and Caspio. So I'm still on a journey of discovery and therein I have encountered a challenge. 

 

I'm looking for help in developing a javascript that returns an html symbol in the results page depending on the time that has lapsed from Date1.

The idea is that the html symbol keeps changing color based on how much time has lapsed. The field only resets when there's status update.

Below I have html symbol I was hoping would fullfil this objective...

<h1><span style="color: #99cc00;">✪</span></h1>
<h1><span style="color: #ff9900;">✪</span></h1>
<h1><span style="color: #ff0000;">✪</span></h1>

I'm not java savvy hence my approaching the forum....perhaps there's someone who can d this with their eyes closed. 

I have a clear objective in my mind of what I'd like to see happening but don't have all the requisite skills. Please see attachment for better idea of objective

I look forward to hearing from you.

Maynard (RSA)

[Mathilda]

23 hours ago, Maynard said:

Hi All,

I'm new to the forum and Caspio. So I'm still on a journey of discovery and therein I have encountered a challenge. 

 

I'm looking for help in developing a javascript that returns an html symbol in the results page depending on the time that has lapsed from Date1.

The idea is that the html symbol keeps changing color based on how much time has lapsed. The field only resets when there's status update.

Below I have html symbol I was hoping would fullfil this objective...

<h1><span style="color: #99cc00;">✪</span></h1>
<h1><span style="color: #ff9900;">✪</span></h1>
<h1><span style="color: #ff0000;">✪</span></h1>

I'm not java savvy hence my approaching the forum....perhaps there's someone who can d this with their eyes closed. 

I have a clear objective in my mind of what I'd like to see happening but don't have all the requisite skills. Please see attachment for better idea of objective

I look forward to hearing from you.

Maynard (RSA)

Hi Maynard, 

Welcome to forum!

You may calculate how much time has lapsed on a table level using a date diff function in a formula filed. 

I'm assuming that depending on the value in this field you need to display different color of the star. I don't know which values you need to check, I used the following conditions: for example, you need to display the first star if the value is less than 10, the second star if the value is between 10 and 20, and the 3rd one for all the others. You may edit my script with your values.

Add an html block to the results page, disable the html editor and insert the following code:

<script>
if ([@field:your_field] < 10) {
document.write('<h1><span style="color: #99cc00;">✪</span></h1>');
}
else if([@field:your_field]< 20){
document.write('<h1><span style="color: #ff9900;">✪</span></h1>');
}
else{
document.write('<h1><span style="color: #ff0000;">✪</span></h1>');
}
</script>

Paste your field using a parameter picker instead of: [@field:your_field]

I hope it helps

Please feel free to ask if something is not clear enough.

[Maynard]

Hi Mathilda,

Thank you for the warm welcome and the script.

I will give it a try, and as far as I can see it doesn't seems to complicated.

Thank you