Jump to content

How to add colors to particular cells in a Tabular Report list?


Recommended Posts

Hello,

I have a tabular report list shown in picture below, and I would like to visually show our users colors depending on the statuses (text) in the Status Column. 

Notably, I wish to have like a red background with with bold text for "In Transit" and Green BK/ White TXT and Bold for "Delivery" for example.

Hopefully you guys to get me started so I could customize and add for the other various statuses

 

 

Capture.PNG

Link to comment
Share on other sites

Hello @MarkMayhrai,

For such cases I use the following code in the DataPage Footer:

<script >
    document.addEventListener('DataPageReady', function(event) {
        const statusField= document.querySelectorAll('td:nth-child(5)'); // '5' is field number for which styles have to be applied

        statusField.forEach(element => {
            if (element.innerHTML === 'In Transit') {
                element.style.cssText = 'background: #ff5a4b; font-weight: bold';
            } else if (element.innerHTML === 'Delivered') {
                element.style.cssText =  'background: #376f4d; font-weight: bold; color: #ffffff';
           }
        });

    });
</script>

Here is the result:

dwiJfAK.png

1) So, the idea is to select the required field, in my example its order number is 5.

2) Then depending on the value we can apply inline styles. Since you want to apply multiply styles, like background color, font-color, etc., we can use the cssText property.

Hope this helps.

Link to comment
Share on other sites

@MarkMayhrai,

It is easy to apply this approach to text values or numeric values.

But in your example it is a formatted number, and since the value has the $ sign it is a string

So, everything depends on the condition you want to apply. If this is just  'equal to',  then you may use the same code:

<script >
    document.addEventListener('DataPageReady', function(event) {

        const currencyFormatted = document.querySelectorAll('td:nth-child(2)');

        currencyFormatted.forEach(element => {
         if (element.innerHTML === '$0.00') {
                element.style.cssText = 'background: #52cc96; font-weight: bold';
            } 
         else if (element.innerHTML === '$20.00') {
                element.style.cssText = 'background: #008ee4; font-weight: bold';
            } 
        });

    });
</script>

The output:

U0nWU7b.png

 

However, if you need to apply 'greater than', 'less than', etc. , then we need to remove the $ sign and to convert a string to a number.

<script >
    document.addEventListener('DataPageReady', function(event) {

        const currencyFormatted = document.querySelectorAll('td:nth-child(2)'); //select the 2nd field, replace '2' to your field order number

        currencyFormatted.forEach(element => {
                   
            const currentElement = parseFloat((element.innerHTML).substring(1)); //remove first character ($) and convert the value to the floating point number

               if (currentElement < 10) {                                            //first condition (if the value is less than 10)
                element.style.cssText = 'background: #3a9c9c; font-weight: bold';
            } 
              else if (currentElement  >= 10 && currentElement < 15) {              //second condition (if the value is greater than or equal 10 AND greater than 15)
                element.style.cssText = 'background: #ca808f; font-weight: bold';
            } 
        });

    });
</script>

The output:

t79EfOc.png

I will test other approaches and add them here if I have any.

Link to comment
Share on other sites

  • 4 months later...

Anyone know how to do this with Grid Edit enabled? I was able to conditionally style my cells on the normal view. But, once I go into Grid Edit view, the styling goes away. I can't seem to figure out how to get it there.

Mine is a bit different, as I am using a hidden Calculated Field as a condition. This is all inside of an HTML field, replacing Calc 5's actual field. Calc Field 6 is getting a percentage from 2 numbers on the report. If it is 10% or under, the HTML block should be highlighted orange. Also, if calc5 is a negative number, also highlight it orange. Otherwise keep it white. 

Any ideas?

[@calcfield:5#]
<a id="visi[@field:Job_Table_Job_Number]">

<script>
var isi=document.getElementById("visi[@field:Job_Table_Job_Number]");

if([@calcfield:6] <= 10) {
  isi.parentNode.style.backgroundColor="orange";

} else if([@calcfield:5] < 0){
  isi.parentNode.style.backgroundColor="orange";

} else {
  isi.parentNode.style.backgroundColor="#fff"; 
}
</script>

 

Link to comment
Share on other sites

  • 3 months later...
On 11/25/2021 at 4:41 PM, MarkMayhrai said:

You're the bomb!!!! 

Thanks, save me life and time!

Hi MarkNinja 

I followed this thread and realised that I need to have some features of the same on my tabular report. Basically, I need to color code the following variables  on my columns ( Neutral to Orange; Positive to Green and Negative to Red. How do I go about that?  Any code that I could use? I have attached a screenshot that could assist. Looking forward to your responses.. Thamls

mark.jpg

Link to comment
Share on other sites

Hello @sanza,

As I can see on the screenshot, this is a Tabular Report. 

Please add this code to the DataPage Footer in the "Configure Results Page Fields" page. Disable the HTML editor on the Advanced tab before pasting the code.  

<script>
    document.addEventListener('DataPageReady', colorHandler);

    function colorHandler() {

        const statusField = document.querySelectorAll('td:nth-child(2)'); // 2 is the order number of the requred field, change this value if needed

        statusField.forEach(element => {
         if (element.innerHTML === 'Neutral') {
                element.style.backgroundColor = '#e4a889';
            } 
         else if (element.innerHTML === 'Positive') {
                element.style.backgroundColor = '#a2dfa7';
            } 
         else if (element.innerHTML === 'Negative') {
                element.style.backgroundColor = '#f2867c';
            } 
        });

  document.removeEventListener('DataPageReady', colorHandler);

};
</script>

 

Please change the order number of your field in the "statusField " variable if needed. In my example this is the second field. Also, please change the color codes if needed.

The output:

2T0zFU2.png

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

×
×
  • Create New...