Forum Discussion

bengreene's avatar
bengreene
Cloud Apps
10-22-2025
Solved

Change an SVG color in BloX with criteria based on token - and for it to work with the carousel

Hello, my aim is to have a bar grow (change width, seems to be working fine) and change color based on if it exceeds a threshold. The issue is that the threshold will be client dependent. I have this...
Blox
Customizations
  • DRay's avatar
    DRay
    11-07-2025

    Hi bengreene​,

    I got this response from one of our engineers. Can you take a look and let us know if it works for you?

    "The issue is in the customer's script. They are using document.getElementById('conditional-bar').This method only returns the first found element in the DOM. Hence, their function only used once. They should use document.querySelectorAll instead, and cycle to colorize the bar."

    "script": "(()=>{function customBarColoring(){var bars=document.querySelectorAll('#conditional-bar');if(!bars.length){setTimeout(customBarColoring,50);return}bars.forEach(function(b){var cbw=parseInt(b.getAttribute('width'));b.className.baseVal=cbw>=80?'conditional-bar-good':cbw>=65?'conditional-bar-meh':'conditional-bar-bad';});}customBarColoring();})();",

     

bengreene's avatar
bengreene
Cloud Apps
10-23-2025

I have resolved my first issue - by moving the script inside the item text, it will load my dynamic thresholds. This doesn't seem to be enough to make the carousel work with the conditional logic - those all default to the base color.

{
    "style": ".conditional-bar-good{fill:#006100; stroke:#006100} .conditional-bar-meh{fill:#9C6500; stroke:#9C6500} .conditional-bar-bad{fill:#9C0006; stroke:#9C0006} .conditional-bar-na{fill:#000000; stroke:#000000}",
    "script": "",
    "title": "",
    "showCarousel": true,
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "TextBlock",
                    "horizontalAlignment": "center",
                    "spacing": "small",
                    "text": "<script>$(document).ready(function(){let barClass = document.getElementById('conditional-bar');let cbw = parseInt(barClass.getAttribute('width'));if(cbw >=parseInt('{panel:Threshold Good}')){barClass.className.baseVal = 'conditional-bar-good';}else if(cbw>=parseInt('{panel:Threshold Meh}')){barClass.className.baseVal = 'conditional-bar-meh';}else{barClass.className.baseVal = 'conditional-bar-bad';};});</script><svg width='80%' height='25'> <rect width='100%' height=100% rx='15' style='fill:#C6EFCE;stroke-width:1;stroke:#006100' /> <rect width='{panel:Threshold Good}%' height='100%' rx='15' style='fill:#FFEB9C;stroke-width:1;stroke:#9C6500' /> <rect width='{panel: Threshold Meh}%' height='100%' rx='15' style='fill:#FFC7CE;stroke-width:1;stroke:#9C0006' /> <rect id='conditional-bar' class='conditional-bar-na' y='20%' width='{panel:Value 1}%' height='60%' rx='10' style='fill-opacity: 0.7;stroke-width:3;' /></svg>"
                }
            ]
        },
        {
            "spacing": "none",
            "type": "Container",
            "items": [
                {
                    "spacing": "none",
                    "type": "TextBlock",
                    "class": "condition_data",
                    "text": "{panel:Label 1}",
                    "horizontalAlignment": "center",
                    "size": "medium",
                    "weight": "bold"
                },
                {
                    "spacing": "none",
                    "type": "TextBlock",
                    "class": "condition_data",
                    "text": "{panel:Value 1}%",
                    "horizontalAlignment": "center",
                    "size": "large",
                    "weight": "bold"
                }
            ]
        }
    ],
    "actions": []
}