Highlight cells based on value (Interactive Grid #5)

 

As we said before, our tips and tricks series about the Interactive Grid continues, which have always helped us in the development process.

Let's move on tip five :-) 

#5 Highlight cells based on value

It happens from time to time that it can be useful to highlight cells in an interactive grid. In this blog we would like to show you how this can be done based on cell values.

For this example we use the sample dataset "Tasks Spreadsheet", so we have the table "EBA_TASK_SS" with a status column which filled with different values. Then we create an application with an interactive grid. As source we use the table "EBA_TASK_SS". Now we a add a CSS class to the interactive grid that we call for example "highlight".

After that we must add a class to the column which we want to highlight. As already mentioned we want to highlight the column "status", so we add the css class "status_column" to it. 

So that our cells are now highlighted we need a JavaScript function which we have to execute on page load. For that we create first the js function in the JavaScript "Function and Global Variable Declaration". 

function highlight_ig_cells() {

    // for each cell in marked column

    $('.highlight td.status_column').each(function() {

        // get cell text

        cellData = $(this).text();

        // rules for coloring

        if (cellData == 'Open')

            this.style.backgroundColor = 'limegreen';

        else if (cellData == 'Pending')

            this.style.backgroundColor = 'gold';

        else if (cellData == 'On-Hold')

            this.style.backgroundColor = 'orange';

        else if (cellData == 'Closed')

            this.style.backgroundColor = 'tomato';

    })

};

To execute the Function when Page Load, enter the following Code in the "Execute when Page Loads Editor":

highlight_ig_cells()

From now on our cells are highlighted :-)

But we still have two Problems that we have to solved. 

The first problem we have when we change pages or load more rows in the interactive grid. Whenever this happens the JavaScript function must be executed again. For that we create a Dynamic Action that fired by the event "Page Change (Interactive Grid)". Create a true action that execute our JavaScript function (highlight_ig_cells()).

And the second problem we have is when the interactive grid is editable. For example, if you change the "Status" column, the color must also change. So we need a sceond Dynamic Action that execute our JavaScript Code. But in this case by the Event "Save (Interactive Grid). 

That´s it :-)

And here is the demo app.

We hope the tips and tricks will help you. 

If you have questions or suggestions, please leave us a comment ;-)