Jump to content

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


Recommended Posts

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)

FireShot Capture 30_Report Datapage.png

Link to comment
Share on other sites

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)

FireShot Capture 30_Report Datapage.png

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...