Highlight a Visual based on a Document Property

 When a document property changes, it highlights a visual. This can be useful for data analysis to pay close attention to visuals that require attention. 

The way it works is that a text area holds a json structure with value pairs for each visualization title to highlight. If we take for example the Analyzing Stock Performance dashboard, we take the visualizations that we want to highlight:

html (hard-coded)

<pre id=docPropValues >
{ 
 "Indexed price charter":"True", 
 "Top holders by percent held":"False",
 "Historical data":"True",
 "Calendar quarter estimates":"False"
} 
</pre>

and then we add this script to see if those visualizations that are set to true are highlighted. The script monitors changes on the docPropValues tag and parses the json structure. When the value changes, it runs the scripts that changes the color of the visualization border.

JavaScript

//finds visuals in which title contains visualTitle (use *= for contains, ^= starts with, $= ends with or = exact match)
	elements = Array.from(document.querySelectorAll(".sf-element.sf-element-visual"));
function highlighVisual(visualTitle){

	//set background for those visuals found
	elementWithChild = elements.filter(element => element.querySelector("[title*='"+visualTitle+"']") !== null); //<-- change here for search operator
	elementWithChild.forEach(x=>x.style.background="red")
}


element = document.querySelector('#docPropValues'); 

observer = new MutationObserver(_ => {
	json = JSON.parse(element.innerText);

	//reset visual backgrounds
	elements.forEach(x=>{x.style.background=""})
	
	Object.entries(json)
		.filter(([key, value]) => value === "True")
		.map(([key, value]) => key)
		.forEach(visualTitle => {highlighVisual(visualTitle)});
});

observer.observe(element, {
    childList: true,
    characterData: true,
    subtree: true
});

Then we can replace the hardcoded values from with a calculated value or label document property to make it dynamic

HML (Dynamic)

<pre id=docPropValues >
{ 
 "Indexed price charter":"<SpotfireControl id="boolean document property" />", 
 "Top holders by percent held":"<SpotfireControl id="boolean document property" />",
 "Historical data":"<SpotfireControl id="boolean document property" />",
 "Calendar quarter estimates":"<SpotfireControl id="boolean document property" />"
} 
</pre>

Note: In the screen capture animation I used a calculated value that shows a Boolean document property that runs an IronPython script that toggles the value of the property when clicked.