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 caracter ($) 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

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