Scripting Issue - second script prevents first script from working | Help and How-To

Scripting Issue - second script prevents first script from working

A colleague is having a scripting issue where one appears to stop the first from working.
The first one (const columnsToRenderAsHTML = [1];) renders the field as HTML while the second one changes the cell color depending on the text.

Each works fine on its own, but when the two are together only the second one functions.

Excuse my ignorance if this has a simple answer, but I'd genuinely appreciate the Community's assistance here.

Robert M Chapple

Posted 1 year ago·Last reply 11 months ago

4 comments

DRay

·11 months ago

Hello TheLivingBubba,

I’m following up to see if the solution offered by Jeremy worked for you.

If so, please click the 'Accept as Solution' button on their post. That way others with the same questions can find the answer. If not, please let us know so that we can continue to help.

Thank you.

DRay

·1 year ago

Hello TheLivingBubba,

I’m following up to see if the solution offered by Jeremy worked for you.

If so, please click the 'Accept as Solution' button on their post. That way others with the same questions can find the answer. If not, please let us know so that we can continue to help.

Thank you.

Jeremy Friedel

·1 year ago

Hi TheLivingBubba ,

The first code snippet is not a full script, it appears to be activating the older community plugin described here.

This plugin does not seem to be compatible with the widget script.

The method the pivot is being modified here is somewhat more complex than required, the recommended method for this, which may not be broken by the community plugin is to use the Pivot 2.0 cell style scripting method, which does not rely on direct HTML modification.

An example script using Pivot 2.0 is below:

/*
Welcome to your Widget's Script.

To learn how you can access the Widget and Dashboard objects, see the online documentation at https://developer.sisense.com/pages/viewpage.action?pageId=557127
*/

// Pivot2 API Widget Script - Changes cell text color styling based on cell value, check if cell value matches set condition
widget.on('initialized', function (ev, se) {

    // Replace or add new conditional functions as needed
    function conditionalToCheck(cellValue) {
        var threshHoldNumber = 50
        // Change as Needed
        // If value is less than threshHoldNumber, return true
        var conditionalTrueOrFalse = cellValue < threshHoldNumber;
        return conditionalTrueOrFalse;
    }

    // Change color variable here as needed, Both CSS color names or color codes are valid
    var trueColorCode = 'red'
	var falseColorCode = 'green'
    
    // Modify cells with the Pivot2 API 
    widget.transformPivot(
        // Target of Pivot2 API call
        {
            // Modify Types as Needed
            type: ['member', 'value', 'subtotal', 'grandtotal'],
            // Modify Row or other target parameter as needed, as well as add column or other selector attributes,
            // as documented here https://sisense.dev/reference/js/widget/pivot2.html
            rows: [
                {
                    //index: [1]
                }
            ],
            // columns: [
            //     {
            //         //index: [1]
            //     }
            // ],

        },

        // Function Changing Cell Text Color
        function changeTextColor(metadata, cell) {
            // If statement currently checks if conditional function is true, can be modified as needed
			// Sets cell's text color to trueColorCode color if conditional is true
            if (cell.value && !isNaN(parseInt(cell.value)) && conditionalToCheck(parseInt(cell.value))) {
                // Change color here as needed, HTML color names or color codes both are valid
                cell.style.color = trueColorCode;
            }
			// If condition is false, but cell value is a valid number, set cell's text color to falseColorCode color
			else if (cell.value && !isNaN(parseInt(cell.value))) {
                // Change color here as needed, HTML color names or color codes both are valid
                cell.style.color = falseColorCode;
            }

        });

});

Any CSS style parameter can be modified not just color, another example is below:

// Optional styling for the "Add To Filter" cells to distinguish them
// Change styling and selector as needed
// Change title to exact title of Row of "Add To Filter" cell, currently is 'Filter'
widget.on('initialized', function () {

    widget.transformPivot(
        {
            type: ['member'],
            rows: [
                {
                    title: 'Filter',
                }
            ]

        },
        function setCellStyling(metadata, cell) {

            // Conditional to ignore header row
            if (metadata.rowIndex != 0) {
                // Change styling as needed
                cell.style = cell.style || {};
                cell.style.color = 'darkblue';
                cell.style.fontWeight = 'bold';
                cell.style.size = '15px';
                // Make cursor to clickable style on hover
                // Styling change, does not effect click behavior
                cell.style.cursor = "pointer";
                cell.style.backgroundColor = "lightgrey";
            }

        }
    );

});

DRay

·1 year ago

Hello TheLivingBubba,

Thank you for reaching out. I see your question hasn't gotten a response yet, so I'm asking internally to try and get you an answer.