I'll admit it. It's a bit of a pain point that I can't individually format Dossier grid column headers directly in a dossier. Luckily, there are a couple of workarounds. In this sample I'll demonstrate one of the methods of how to apply individual background colors to column headers in a Dossier using Javascript.
When we're done, your grid will look something like my sample below.
Similar to some of my other solutions, you'll need to have permissions to edit/design a dashboard to add an HTML container. We're going to key in on the column value (name) to apply the custom background - so make note of the column name. Also keep in mind that if you alias the column name you'll need to make the adjustment to the Javascript as well.
Take a look at the code below. I have a few placeholders where you can define the column and the color to edit. The way this is it looks through the various tables in the Dossier via the td tag and checks the value of the cell. If it matches the values you want to custom format, the formatting is applied.
Copy the code below and replace the column name and color with what you'd like to have displayed. If you have more or less columns which need to be formatted, just remove/copy that portion of the code.
<script language="Javascript">
setInterval(function() {
for(i = 0;i < document.getElementsByTagName("td").length;i++){
if (document.getElementsByTagName("td")[i].innerText == "Sales Rank" ){ // This is the column header to format
document.getElementsByTagName("td")[i].style.backgroundColor = "Green" //this is the color to change it to
} else if (document.getElementsByTagName("td")[i].innerText == "Sales" ){ // This is the column header to format
document.getElementsByTagName("td")[i].style.backgroundColor = "Orange" //this is the color to change it to
} else if (document.getElementsByTagName("td")[i].innerText == "Discount" ){ // This is the column header to format
document.getElementsByTagName("td")[i].style.backgroundColor = "Red" //this is the color to change it to
}
}
document.getElementsByClassName("mstrmojo-UnitContainer mstrmojo-HtmlBox")[0].style.backgroundColor = "Transparent"
document.getElementsByClassName("mstrmojo-UnitContainer mstrmojo-HtmlBox")[0].style.boxShadow = "0px 0px 0px 0px Transparent"
document.getElementsByClassName("mstrmojo-UnitContainer mstrmojo-HtmlBox")[0].style.width = "0px"
},500);
</script>
Now your dashboard will have custom column headers!
After reviewing the code you're probably wonder why I'm using a setInterval loop. This is because the custom formatting we apply is overwritten if/when the dashboard changes (visualization sizes for example). We don't want to lose the formatting so I reapply the change every half second (500 Milliseconds).
And That's it!
Thanks for checking out this blog post. If you found this post helpful please consider donating via PayPal. Any contribution is appreciated!