Jump to content

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.

 

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

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

Link to comment
Share on other sites

  • 1 month later...

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?

Link to comment
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>

Link to comment
Share on other sites

  • 4 years later...

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,

Link to comment
Share on other sites

  • 1 year later...

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...