Solved
Conditional Format in BloX using an image
Hi harikm007 , DRay , Liliia_DevX
I am using BloX to display a conditon format based on a if a value is above 10% or below 10% and then display a green or red arrow I have in my plugins folder to show.
My script goes as follows:
{
"style": "@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@700;800&display=swap');",
"script": "",
"title": "",
"conditions": [
{
"minRange": "-Infinity",
"maxRange": 0.10,
"image": "/plugins/assets/icons/red_arrow.png",
"color": "#D34A4A",
"fontSize": "14px",
"fontWeight": "600"
},
{
"minRange": 0.10,
"maxRange": "Infinity",
"image": "/plugins/assets/icons/green-up-arrow.svg",
"color": "#079B65",
"fontSize": "14px",
"fontWeight": "600"
}
],
"titleStyle": [
{
"display": "none"
}
],
"showCarousel": false,
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"style": {
"width": "430px",
"height": "145px",
"box-sizing": "border-box",
"padding": "16px"
},
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "No shows - last full month",
"style": {
"font-family": "Inter, sans-serif",
"font-size": "16px",
"font-weight": "700",
"text-align": "left",
"color": "#212A31",
"margin": "0"
}
}
]
},
{
"type": "Column",
"width": "auto",
"horizontalAlignment": "right",
"style": {
"text-align": "right",
"min-width": "14px"
},
"items": [
{
"type": "ColumnSet",
"style": {
"align-items": "center"
},
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "{conditions:image}",
"altText": "delta",
"horizontalAlignment": "right",
"style": {
"width": "12px",
"height": "10px",
"margin-right": "6px",
"margin-top": "2px"
}
}
]
},
{
"type": "Column",
"width": "150",
"items": [
{
"type": "TextBlock",
"text": "{panel:# of unique Patient ID}",
"style": {
"font-family": "Inter, sans-serif",
"font-size": "14px",
"font-weight": "600",
"color": "{conditions:color}",
"text-align": "right",
"margin": "0"
}
}
]
}
]
}
]
}
]
},
{
"type": "TextBlock",
"text": "{panel: No Show}",
"style": {
"margin-top": "16px",
"font-family": "Manrope, Inter, sans-serif",
"font-size": "28px",
"line-height": "32px",
"font-weight": "700",
"text-align": "left",
"color": "#212A31"
}
},
{
"type": "TextBlock",
"text": "Avg 10%",
"style": {
"margin-top": "8px",
"font-family": "Inter, sans-serif",
"font-size": "12px",
"font-weight": "500",
"text-align": "left",
"color": "#969696"
}
}
]
}
]
}
],
"actions": []
}
{ "style": "@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@700;800&display=swap');", "script": "", "title": "", "conditions": [ { "minRange": "-Infinity", "maxRange": 10, "image": "/plugins/assets/icons/arrow-down-right-regular-red.svg", "color": "#D34A4A", "fontSize": "14px", "fontWeight": "600" }, { "minRange": 10, "maxRange": "Infinity", "image": "/plugins/assets/icons/arrow-up-right-regular-green.svg", "color": "#079B65", "fontSize": "14px", "fontWeight": "600" } ], "titleStyle": [ { "display": "none" } ], "showCarousel": false, "body": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "style": { "width": "430px", "height": "145px", "box-sizing": "border-box", "padding": "16px" }, "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "No shows - last full month", "style": { "font-family": "Inter, sans-serif", "font-size": "16px", "font-weight": "700", "text-align": "left", "color": "#212A31", "margin": "0" } } ] }, { "type": "Column", "width": "auto", "horizontalAlignment": "right", "style": { "text-align": "right", "min-width": "14px" }, "items": [ { "type": "ColumnSet", "class": "condition_container", "style": { "align-items": "center" }, "columns": [ { "type": "Column", "width": "auto", "items": [ { "type": "Image", "class": "conditional_image", "url": "/plugins/assets/icons/arrow-down-right-regular-red.svg", "altText": "delta", "horizontalAlignment": "right", "style": { "width": "14px", "height": "14px", "margin-right": "6px", "margin-top": "2px" } } ] }, { "type": "Column", "width": "150", "items": [ { "type": "TextBlock", "class": "condition_data", "text": "{panel:# of unique Patient ID}", "style": { "font-family": "Inter, sans-serif", "font-size": "14px", "font-weight": "600", "text-align": "right", "margin": "0" } } ] } ] } ] } ] }, { "type": "TextBlock", "text": "{panel: No Show}", "style": { "margin-top": "16px", "font-family": "Manrope, Inter, sans-serif", "font-size": "28px", "line-height": "32px", "font-weight": "700", "text-align": "left", "color": "#212A31" } }, { "type": "TextBlock", "text": "Avg 10%", "style": { "margin-top": "8px", "font-family": "Inter, sans-serif", "font-size": "12px", "font-weight": "500", "text-align": "left", "color": "#969696" } } ] } ] } ], "actions": [] }Hi harikm007, thanks for your response. Figured it out.
If anyone has question contact me at mailto:rferreira@cestrategy.us at Cause and Effect Strategy
