Jump to content
cecook01

Conditionally Format Values In Column Of Tabular Report Based On Values

Recommended Posts

I have a tabular report and would like to conditionally format the contents of a column based on it's value, above a certain value color text as green, below color the text as red.  Also, is it possible to format the contents of one cell based on the value of another.   Any help greatly appreciated.

 

Share this post


Link to post
Share on other sites

Matilda thanks for you reply.  Could not get this to work, was able  to find a way to format a cell based on the text value meeting a criteria. Will keep at this to get the row to format.  My second question was for example I have a sales goal of $1000 and sales  of $1500 I would like to show the value in green since my sales are greater than my goal.  Hope that explains it.  Any thoughts appreciated.

Share this post


Link to post
Share on other sites

Hi cecook01,

Sure, it's possible. You should change a script provided in the article: http://howto.caspio....a-results-page/ in the section Java Script Reference. As I understood you want to highlight sales bigger than 1000 $. 

Please find a script below:

<script>
var isi = document.getElementById("visi[@field:UniqueFieldName]");
if('[@Sales FieldName]' >= 1000){
isi.parentNode.parentNode.style.backgroundColor = 'green';
</script>

Please note, you should paste name of unique field instead of [@field:UniqueFieldName]

and name of the field with sales values instead of [@Sales FieldName]. Use picker to avoid misspellings.

 

Also disable HTML editor when you paste a script in the HTML blocks.  http://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/

 

Let me know if you have questions.

Share this post


Link to post
Share on other sites

Matilda,

Thanks so much, I now have both examples working.  I just have one more question, instead of coloring the entire row, would you know how to just color the background of the one cell containing the sales number?

Share this post


Link to post
Share on other sites

Hi cecook01,

Sure, it's possible. You should change a script provided in the article: http://howto.caspio....a-results-page/ in the section Java Script Reference. As I understood you want to highlight sales bigger than 1000 $. 

Please find a script below:

<script>
var isi = document.getElementById("visi[@field:UniqueFieldName]");
if('[@Sales FieldName]' >= 1000){
isi.parentNode.parentNode.style.backgroundColor = 'green';
</script>

Please note, you should paste name of unique field instead of [@field:UniqueFieldName]

and name of the field with sales values instead of [@Sales FieldName]. Use picker to avoid misspellings.

 

Also disable HTML editor when you paste a script in the HTML blocks.  http://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/

 

Let me know if you have questions.

 

Matilda, the method you created doesn't work with AJAX updates any longer, following a Caspio update. Any ideas?

Share this post


Link to post
Share on other sites

I was told this morning by support that Bridge 9.1 added a new behavior to AJAX updates. When a row is updated, that row is highlighted with a subtle pulsing animation that fades. It must be that this behavior uses the same selector as the one provided in the official how to. When I use the provided script, and then update a row so that its background color should change, the updated row instead stays white and never receives a new color.

 

I came up with the following workaround, which is to add a className, instead of a backgroundColor, to the row. Then inline a style for the classNames. This allows the new pulse highlight behavior to occur, and then colors the background:

 

[@field:ID]
<a id="visi[@field:ID]">
<script>
var isi = document.getElementById("visi[@field:ID]");
if('[@field:criteria]' == 'Yes'){
isi.parentNode.parentNode.className = "greenyes";
}
else{
isi.parentNode.parentNode.className = "redno";
}
</script>
<style>
.greenyes {
background-color: #add5a0;
}
.redno {
background-color: #FFC7CE;
}
</style>

Share this post


Link to post
Share on other sites

Hi, I am trying to do something similar on a date field, I need the line to turn orange if the datefield is within current month and turn red if its within current week (7days).

Can someone help me, I am not a coder and don't seem to be getting it right amending the code above.

 

Thanks in advance,

Share this post


Link to post
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...