cancel
Showing results for 
Search instead for 
Did you mean: 

Blox conditional formatting up and down indicators

hkkwon89
8 - Cloud Apps
8 - Cloud Apps

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"
                                                                }
                                                            ]
                                                        }
                                                    ]
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

 

2 REPLIES 2

hkkwon89
8 - Cloud Apps
8 - Cloud Apps

@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!

harikm007
12 - Data Integration
12 - Data Integration

Hi @hkkwon89 ,

One solution is to add widget script. 

Add new class to the element as highlighted in below screenshot:

harikm007_0-1659032446755.png

 

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