1 ACCEPTED SOLUTION
Hi jfarmer,
I actually came up with two methods to solve this. First, each possible row in the widget was configured in the Editor pane of the BloX widget. So I had a container that had an array of column sets. Each column set had two columns; the label and the value. So there was a column set for 2017, 2018, 2019, etc. The value column had its class set to dataPoint. I have no "items" defined in the widget, only all of the possible values. showCarousel is set to false.
This is the script for the BloX widget:
widget.on('ready',function(){
var x = document.getElementsByClassName("dataPoint");
var i;
x.forEach(function(e) {
var value = parseInt(e.textContent.replace("$",""));
if (value < 0 || isNaN(value))
e.parentElement.style.display = "none";
});
});
My values are formatted as currency, ergo the call to replace for the dollar sign.
Of course, the problem with this is that it needs to be maintained over time as new values can be present in the widget. It is also unreasonable if the datapoints are not for years but for some other entity that could have 10's or 100's of possibilities. So I came up with an alternate solution.
I added one "Item" to my widget which was the Year from the data. I added one "Value" which was the amount I wanted displayed. However, the value would be set to null if the row shouldn't be present.
This is the text of the widget:
{
"style": ".leftCell { width: 75px; border-bottom: 2px solid #af2227; border-left: 2px solid #af2227; border-right: 2px solid #af2227; border-top: none; } .dataPoint { width: 175px; border-bottom: 2px solid #af2227; border-left: 2px solid #af2227; border-right: 2px solid #af2227; border-top: none;}",
"script": "",
"title": "",
"showCarousel": false,
"titleStyle": [
{
"display": "none"
}
],
"body": [
{
"type": "Container",
"items": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"style": {
"justify-content": "center"
},
"columns": [
{
"type": "TextBlock",
"text": "Totals",
"horizontalAlignment": "center",
"class": "header",
"style": {
"width": "250px",
"border": "solid",
"border-width": "2px",
"backgroundColor": "#f2c0c1",
"borderColor": "#af2227"
}
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"style": {
"justify-content": "center"
},
"columns": [
{
"type": "TextBlock",
"class": "leftCell",
"text": "{panel:Year}",
"horizontalAlignment": "center"
},
{
"type": "TextBlock",
"class": "dataPoint",
"text": "{panel:CountTotal}",
"horizontalAlignment": "center"
}
]
}
]
}
]
}
],
"actions": []
}I now had only the rows that I needed without having to update the widget from time to time. However, notice that showCarousel is set to false. This causes the header (the Totals line) to be repeated for each row in the widget. So the following script took care of that by hiding all but the first instance of the header element.
widget.on('ready',function(){
var x = document.getElementsByClassName("header");
var l = x.length;
// Skipping the first instance
for(i = 1; i < l; i++) {
x[i].parentElement.style.display = "none";
};
});
Sorry if this seems a bit disjointed but hopefully you can glean enough information from this to solve your issue.
