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 script that works as intended for the initial display with static thresholds, but I want to replace the "parseInt('80')" and "parseInt('65')" in the script with tokens like "{panel:Threshold Good}" and "{panel:Threshold Meh}".
It also fails to display the conditional color when I cycle on the carousel.
Any assistance would be appreciated!
{
"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": "$(document).ready(function(){let barClass = document.getElementById('conditional-bar');let cbw = parseInt(barClass.getAttribute('width'));if(cbw >=parseInt('80')){barClass.className.baseVal = 'conditional-bar-good';}else if(cbw>=parseInt('65')){barClass.className.baseVal = 'conditional-bar-meh';}else{barClass.className.baseVal = 'conditional-bar-bad';};});",
"title": "",
"showCarousel": true,
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "center",
"spacing": "small",
"text": "<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": []
}
Ben Greene
Posted 10 months ago·Last reply 9 months ago
5 comments
DRay
·9 months agoHi bengreene ,
I’m following up to see if the solution I offered workedharikm007 for you.
If so, please click the 'Accept as Solution' button on my 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
·10 months agoHi 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."
DRay
·10 months agoHi bengreene,
I can reach out internally to try and get a solution for you. What part do you still need help with?
Ben Greene
OP10 months ago · EditedDRay - Thanks for reaching out!
My remaining issue is that the conditional script only applies to the first generated pane on the BloX, so when we have multiple rows/panes, the records after the first just show up as the default color. I want all values to apply the conditional script.
Ben Greene
OP10 months agoI 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.