Blox conditional formatting up and down indicators
Hi,
I currently have conditional formatting for a blox widget. Based on the percentage change, it changes the font color (green or red) and a up or a down arrow.
However, instead of the arrows I want a textblock with a background color.
I tried taking a stab at it but it's changing the entire widget color.
Attaching my current CSS snipet.
Thank you
{
"style": "",
"script": "",
"title": "",
"showCarousel": false,
"conditions": [
{
"minRange": "-Infinity",
"maxRange": 2000,
"backgroundColor": "#fd6e69"
},
{
"minRange": 2000,
"maxRange": 10000,
"backgroundColor": "#FAA0A0"
},
{
"minRange": 10000,
"maxRange": "Infinity",
"backgroundColor": "#3adcca"
}
],
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"spacing": "small",
"items": [
{
"type": "ColumnSet",
"height": "40px",
"style": {
"border-radius": "6px 6px 0px 0pc",
"background-image": "linear-gradient(330deg, #F7941D 10%, #703971)",
"box-shadow": "1px 1px 2px #a6a4a4"
},
"columns": [
{
"type": "Container",
"style": {},
"items": [
{
"type": "TextBlock",
"id": "",
"class": "",
"text": "Accounts Receivable",
"horizontalAlignment": "left",
"style": {
"color": "#edeef0",
"font-weight": "500",
"font-size": "12px",
"margin": "15px 0px 15px 10px"
}
}
]
},
{
"type": "Image",
"id": "",
"class": "",
"url": "https://www.svgrepo.com/show/419269/avatar-human-person.svg",
"altText": "image descriptions",
"style": {
"margin": "0px 10px",
"width": "20px"
}
}
]
},
{
"type": "Container",
"style": {
"background-color": "#FFFFff",
"margin-bottom": "1px",
"border-radius": "0px 0px 6px 6px",
"box-shadow": "1px 1px 10px #a6a4a4"
},
"items": [
{
"spacing": "none",
"type": "ColumnSet",
"columns": [
{
"spacing": "medium",
"separator": "true",
"type": "Column",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "left",
"text": "Total",
"weight": "bold",
"color": "grey",
"size": "medium"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"style": {
"flex-grow": "0"
},
"items": [
{
"spacing": "none",
"horizontalAlignment": "left",
"type": "TextBlock",
"text": "{panel:Total AR_AMOUNT}",
"weight": "bold",
"color": "#232a2f",
"size": "large",
"style": {
"margin": "0px"
}
}
]
},
{
"spacing": "small",
"type": "Container",
"items": [
{
"type": "Image",
"class": "conditional_image",
"size": "small",
"spacing": "none",
"horizontalAlignment": "center"
}
]
},
{
"spacing": "none",
"type": "Container",
"style": {
"flex-grow": "100"
},
"items": [
{
"spacing": "small",
"type": "TextBlock",
"class": "condition_data",
"text": "5000%",
"horizontalAlignment": "center",
"size": "small",
"weight": "bold",
"color": "red"
}
]
}
]
},
{
"type": "TextBlock",
"horizontalAlignment": "left",
"text": "Insurance",
"weight": "light",
"color": "grey",
"size": "small",
"spacing": "none"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"style": {
"flex-grow": "0"
},
"items": [
{
"spacing": "small",
"horizontalAlignment": "left",
"type": "TextBlock",
"text": "{panel:AR_insurance}",
"weight": "bold",
"color": "#232a2f",
"size": "medium",
"style": {
"margin": "0px"
}
}
]
},
{
"type": "Column",
"items": [
{
"spacing": "none",
"horizontalAlignment": "left",
"type": "TextBlock",
"text": "2.5%",
"weight": "bold",
"color": "#232a2f",
"size": "small",
"style": {
"margin": "10px 0px 0px 30px"
}
}
]
},
{
"type": "Column",
"style": {
"flex-grow": "100"
},
"items": [
{
"type": "Image",
"class": "conditional_image indexsp-stock",
"url": "/plugins/BloX/blox-images/StockMarket/arrow-up.png",
"style": {
"margin": "0px 0px 0px 0px"
},
"size": "small",
"spacing": "none"
}
]
}
]
},
{
"type": "TextBlock",
"horizontalAlignment": "left",
"text": "Patient",
"weight": "light",
"color": "grey",
"size": "small"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"style": {
"flex-grow": "0"
},
"items": [
{
"spacing": "small",
"horizontalAlignment": "left",
"type": "TextBlock",
"text": "{panel:AR_patient}",
"weight": "bold",
"color": "#232a2f",
"size": "medium",
"style": {
"margin": "0px"
}
}
]
},
{
"type": "Column",
"items": [
{
"spacing": "none",
"horizontalAlignment": "left",
"type": "TextBlock",
"text": "-4%",
"weight": "bold",
"color": "#232a2f",
"size": "small",
"style": {
"margin": "10px 0px 0px 30px"
}
}
]
},
{
"type": "Column",
"style": {
"flex-grow": "100"
},
"items": [
{
"type": "Image",
"class": "conditional_image indexsp-stock",
"url": "/plugins/BloX/blox-images/StockMarket/arrow-down.png",
"style": {
"margin": "0px 0px 0px 0px"
},
"size": "small",
"spacing": "none"
}
]
}
]
},
{
"type": "TextBlock",
"horizontalAlignment": "left",
"text": "Other",
"weight": "light",
"color": "grey",
"size": "small"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"style": {
"flex-grow": "0"
},
"items": [
{
"spacing": "small",
"horizontalAlignment": "left",
"type": "TextBlock",
"text": "$0",
"weight": "bold",
"color": "#232a2f",
"size": "medium",
"style": {
"margin": "0px"
}
}
]
},
{
"type": "Column",
"items": [
{
"spacing": "none",
"horizontalAlignment": "left",
"type": "TextBlock",
"text": "0%",
"weight": "bold",
"color": "#232a2f",
"size": "small",
"style": {
"margin": "10px 0px 0px 30px"
}
}
]
},
{
"type": "Column",
"style": {
"flex-grow": "100"
},
"items": [
{
"type": "Image",
"class": "conditional_image indexsp-stock",
"url": "/plugins/BloX/blox-images/StockMarket/arrow-down.png",
"style": {
"margin": "0px 0px 0px 0px"
},
"size": "small",
"spacing": "none"
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
