This website uses Cookies. Click Accept to agree to our website's cookie use as described in our Cookie Policy. Click Preferences to customize your cookie settings.
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for
- Community
- Legacy Discussions
- Build Analytics
- Blox conditional formatting up and down indicators
Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
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)
Helpful Links
Recommended Quick Links
- Community FAQs
- Community Welcome & Guidelines
- Discussion Posting Tips
- Partner Guidelines
- Profile Settings
- Ranks & Badges
Developers:
Product Feedback Forum:
Need additional support?:
The Legal Stuff
Have a question about the Sisense Community?
Email [email protected]
Related Content
- conditional formatting in Pivot Table. in Build Analytics
- Conditional Formatting on Pivot Text Values in Build Analytics
- Conditional color formatting at row level in Build Analytics
- Sisense pivot table conditional font color format in Build Analytics
- Conditional CASE Indicator Widget in Build Analytics
