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.
Here is a current screenshot of my current blox widget:
I made this starting from a default template that was available in my library (ref the attached STARTING TEMPLATE BLOX.JSON).
For each of the 3 KPI's my goal is to add a trending sparkline where the #1/yellow highlight is located. I am also trying to correctly remove the bottom panel row without impacting the spacing of the forecast/prior rows.
Below is my drafted code so far.
{
"style": "",
"script": "",
"title": "",
"showCarousel": true,
"carouselAnimation": {
"delay": 0,
"showButtons": false
},
"conditions": [
{
"minRange": "-Infinity",
"maxRange": 0,
"color": "#FA5656",
"image": "/plugins/BloX/blox-images/StockMarket/arrow-down.png"
},
{
"minRange": 0,
"maxRange": "Infinity",
"color": "#54a254",
"image": "/plugins/BloX/blox-images/StockMarket/arrow-up.png"
}
],
"body": [
{
"spacing": "",
"type": "Container",
"width": "90%",
"style": {
"margin": "0 auto"
},
"items": [
{
"type": "TextBlock",
"text": "Contributions | {panel:Month}",
"horizontalAlignment": "center",
"size": "medium",
"style": {
"padding": "5px",
"border-radius": "5px",
"background-color": "#00354b",
"color": "#ffffff"
}
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"spacing": "small",
"type": "TextBlock",
"text": "REVENUE",
"horizontalAlignment": "center",
"weight": "bold",
"size": "small",
"style": {
"color": "#000000"
}
},
{
"type": "TextBlock",
"text": "{panel:Revenue}",
"horizontalAlignment": "center",
"weight": "bold",
"size": "large",
"style": {
"color": "#a90a40"
}
},
{
"type": "ColumnSet",
"class": "condition_container ",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "",
"horizontalAlignment": "right",
"weight": "bold",
"size": "small",
"style": {
"color": "#117899"
}
}
]
},
{
"separator": true,
"type": "Column",
"items": [
{
"type": "Image",
"class": "condition_image 1",
"url": "/plugins/BloX/blox-images/StockMarket/arrow-down.png",
"horizontalAlignment": "left",
"weight": "",
"size": "small",
"style": {
"width": "30px"
}
}
]
}
]
},
{
"separator": true,
"type": "TextBlock",
"text": "FULL MONTH FORECAST: {panel:REVENUE_FORECAST}",
"horizontalAlignment": "center",
"weight": "bold",
"size": "small",
"style": {
"color": "#000000"
}
},
{
"type": "ColumnSet",
"class": "condition_container 4",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "<span class='condition_data 4'>{panel:RevMin-GR} </span>",
"horizontalAlignment": "right",
"weight": "bold",
"size": "small",
"style": {
"color": "#117899"
}
}
]
},
{
"type": "Column",
"items": [
{
"type": "Image",
"class": "conditional_image 4",
"url": "/plugins/BloX/blox-images/StockMarket/arrow-down.png",
"horizontalAlignment": "left",
"weight": "",
"size": "small",
"style": {
"width": "30px"
}
}
]
}
]
}
]
},
{
"separator": true,
"type": "Column",
"items": [
{
"spacing": "small",
"type": "TextBlock",
"text": "CONTRIBUTION MARGIN",
"horizontalAlignment": "center",
"weight": "bold",
"size": "small",
"style": {
"color": "#000000"
}
},
{
"type": "TextBlock",
"text": "{panel:CONT. MARGIN $} ({panel: CM%})",
"horizontalAlignment": "center",
"weight": "bold",
"size": "large",
"style": {
"color": "#a90a40"
}
},
{
"type": "ColumnSet",
"class": "condition_container 2",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "",
"horizontalAlignment": "right",
"weight": "bold",
"size": "small",
"style": {
"color": "#117899"
}
}
]
},
{
"type": "Column",
"items": [
{
"type": "Image",
"class": "conditional_image 2",
"url": "/plugins/BloX/blox-images/StockMarket/arrow-down.png",
"horizontalAlignment": "left",
"weight": "",
"size": "small",
"style": {
"width": "30px"
}
}
]
}
]
},
{
"separator": true,
"type": "TextBlock",
"text": "FULL MONTH FORECAST: {panel:CM_FORECAST} ({panel:%_FORECAST})",
"horizontalAlignment": "center",
"weight": "bold",
"size": "small",
"style": {
"color": "#000000"
}
},
{
"type": "ColumnSet",
"class": "condition_container 5",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "<span class='condition_data 5'>{panel:CostMin-GR} </span>",
"horizontalAlignment": "right",
"weight": "bold",
"size": "small",
"style": {
"color": "#117899"
}
}
]
},
{
"type": "Column",
"items": [
{
"type": "Image",
"class": "conditional_image 5",
"url": "/plugins/BloX/blox-images/StockMarket/arrow-down.png",
"horizontalAlignment": "left",
"weight": "",
"size": "small",
"style": {
"width": "30px"
}
}
]
}
]
}
]
},
{
"separator": true,
"type": "Column",
"items": [
{
"spacing": "small",
"type": "TextBlock",
"text": "PRODUCTIVITY",
"horizontalAlignment": "center",
"weight": "bold",
"size": "small",
"style": {
"color": "#000000"
}
},
{
"type": "TextBlock",
"text": "{panel:PRODUCTIVITY}",
"horizontalAlignment": "center",
"weight": "bold",
"size": "large",
"style": {
"color": "#117899"
}
},
{
"type": "ColumnSet",
"class": "condition_container 3",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"class": "conditional_image 3",
"url": "/plugins/BloX/blox-images/StockMarket/arrow-down.png",
"horizontalAlignment": "left",
"weight": "",
"size": "small",
"style": {
"width": "30px"
}
}
]
}
]
},
{
"separator": true,
"type": "TextBlock",
"text": "{panel:MarginMin} per minute",
"horizontalAlignment": "center",
"weight": "bold",
"size": "small",
"style": {
"color": "#000000"
}
},
{
"type": "ColumnSet",
"class": "condition_container 3",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "<span class='condition_data 6'>{panel:MarginMin-GR} </span>",
"horizontalAlignment": "right",
"weight": "bold",
"size": "small",
"style": {
"color": "#117899"
}
}
]
},
{
"type": "Column",
"items": [
{
"type": "Image",
"class": "conditional_image 6",
"url": "/plugins/BloX/blox-images/StockMarket/arrow-down.png",
"horizontalAlignment": "left",
"weight": "",
"size": "small",
"style": {
"width": "30px"
}
}
]
}
]
}
]
}
]
}
]
}
],
"actions": []
}
Does anyone have suggestions on how to achieve this? THANK YOU!
1 ACCEPTED SOLUTION
Hari @harikm007 at first glance this appears to work perfectly!! I'll keep playing with it and let you know if I have any questions. THANK YOU!!
As a follow-up - how could I create a similar widget but transposed, so the main KPI's are aligned vertically, and their trending sparklines would be in a second column? Kind of like this sketch:
@harikm007 how/where does the number formatting happen for the sparkling values? I replaced your hardcoded values with variables and they're appearing like this:
I'd want them to appear in the same currency format as the indicator.
Any ideas @harikm007 @Community_Admin @Ophir_Buchman @HamzaJ ? Thank you!!
