How to use a widget.transformPivot function to change the background color of the entire row

[Liliia_DevX]

This article provides an example JavaScript code snippet on how to use a widget.transformPivot function to change the background color of the entire row based on a value within that row. 

Please refer to the Sisense developer's documentation to learn more about Pivot 2.0 methods:

https://sisense.dev/guides/customJs/jsApiRef/widgetClass/pivot2.html#methods

In the example below transformPivot is being executed for a cell context so that we can't access all row cells from it, however, we can use it in order to generate an array of required rows’ indexes in order to change their background color later on a ready event.

let rowsToChange = []
let changedBuffer = []
let contentToRecolor = '0'


widget.transformPivot({}, (metadata, cell) => {


    if (cell.content === contentToRecolor && !rowsToChange.includes(metadata.rowIndex)) {
        rowsToChange.push(metadata.rowIndex)

    }


})



widget.on('ready', () => {

    let widgetMain = $(`widget[widgetid=${widget.oid}]`).length ? $(`widget[widgetid=${widget.oid}]`) : $(`#prism-mainview`)
    if (changedBuffer.length) {
        changedBuffer.forEach(i => {
            widgetMain.find('.table-grid__row-' + i).css({
                'background-color': 'inherit'
            })

            widgetMain.find('.table-grid__row-' + i).children().each(function() {
                $(this).css({
                    'background-color': 'inherit'
                })
            })
        })
    }
    rowsToChange.forEach(i => {
        widgetMain.find('.table-grid__row-' + i).css({
            'background-color': 'pink'
        })

        widgetMain.find('.table-grid__row-' + i).children().each(function() {
            $(this).css({
                'background-color': 'pink'
            })

        })

    })
    changedBuffer = rowsToChange
    rowsToChange = []
})

This script checks if any cell has '0' value and changes all respective rows' color to pink.

Feel free to change the contentToRecolor variable to be the value you want to use for changing a background color and let us know if this script works for you.

Disclaimer: Please note that this blog post contains one possible custom workaround solution for users with similar use cases. We cannot guarantee that the custom code solution described in this post will work in every scenario or with every Sisense software version. As such, we strongly advise users to test solutions in their environment prior to deploying them to ensure that the solutions proffered function as desired in their environment. For the avoidance of doubt, the content of this blog post is provided to you “as-is” and without warranty of any kind, express, implied, or otherwise, including without limitation any warranty of security and or fitness for a particular purpose. The workaround solution described in this post incorporates custom coding, which is outside the Sisense product development environment and is, therefore, not covered by Sisense warranty and support services.