Blox conditional formatting up and down indicators
Options
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
07-26-2022 01:24 PM
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"
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
Labels:
- Labels:
-
Blox
-
Dashboards & Reporting
3 REPLIES 3
Options
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
07-28-2022 09:07 AM
@harikm007
Hi Hari,
Sorry to be pinging you into a post but would the above be possible? I'm basically trying to change what's in the first screenshot attached (arrows and percentage) to what's in second screenshot.
Thanks a lot!
Options
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
07-28-2022 11:28 AM
Hi @hkkwon89 ,
One solution is to add widget script.
Add new class to the element as highlighted in below screenshot:
And add below widget script.
widget.on('domready', function(se, ev){
var color = 'yellow'
myElement = $('.myValue1', element)
AR_percentage = parseFloat(myElement.text())
if(AR_percentage <= 2000)
color = '#fd6e69'
else if(AR_percentage <= 10000)
color = '#FAA0A0'
else if (AR_percentage > 10000)
color = '#3adcca'
myElement.css('background-color', color)
})-Hari
Options
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
09-09-2024 08:56 AM
Hi @hkkwon89,
I know it's been a while, but did the answer provided by @harikm007 work for you?
If so, please click the 'Accept as Solution' button on their post so other users with the same questions can find the answer. If not, please let us know so that we can continue to help.
Thank you.
David Raynor (DRay)
