Sisense widget script: Color code cells in table widget

In this tutorial, we'll apply color coding to specific cells within a Sisense table widget using script. This feature enhances the visual presentation of your data, allowing you to draw attention to particular keywords or information. Follow the steps below to implement this customization in your Sisense dashboard.

Step 1: Adding the widget script

Begin by opening your Sisense dashboard in the Edit mode. Locate the table widget for which you want to implement color coding. Add the following code into the widget's script editor.

widget.on('domready', function(sender, ev) {
    $("td:nth-child(8):contains('Used')", element).css({ 'color': 'red' });

    // An event fired on each table re-draw:
    $(element).on('draw.dt', function() {
        $("td:nth-child(8):contains('Used')", element).css({ 'color': 'red' });
    });
});

Step 2: Understanding the Code Logic

The widget.on('domready', function(sender, ev) {...}) event handler executes when the widget's DOM (Document Object Model) is ready.

Find the 8th column (nth-child(8)) of the table that contains the keyword 'Used' and change the text color to red using CSS styling. Specify the required column's index and keyword here.

Additionally, an event listener is added to detect when the table is re-drawn (draw.dt event), ensuring the color coding remains consistent even after interactions with the widget (e.g. moving to the next page in the table).

Step 3: Applying the Changes

After adding the script, click "Save" to apply the changes and refresh the widget. Your table widget will now display color-coded text for cells containing the specified keyword.

This customization assists viewers in quickly identifying important information within the table.

GitHub link : https://github.com/lekhamirjankar/Sisense-scripts