How to Create Information Window in Dossier

Hello friends,

Today we will be discussing very interesting and wanted functionality in MSTR Dossier. Which will support from MSTR 2020 and higher.

i.e Information Window(IW) in Dossier

We all know how much we want IW functionality in Dossier what impact it will create in development. So without any further due let's discuss #HowToDo.

We have to understand that all the visualization which we include in Dossier, it creates an Html tag and we have to use that Html tag to pick the visualization and apply some JavaScript/JQuery code.

Below are the steps which we have to perform before jumping to code:

1. Create all the objects (i.e visualization) which you want in your IW.
2. Now select all viz and create a group, give any name to that group (it doesn't matter).
3. To make the IW you have to include one Text box which will act as a background and that will us while we do coding.
4. Now, once you are done with creating Group. Include one HTML Container and place it in the first layer position.
5. Now, follow the YouTube video to get the aria-label of your div or SVG and replace that in the below code (with some changes like your aria-label of div "Drag Icon for Close IW" and paste it in the HTML container.

Code:

<script>

$(document).ready(function () {

$( "div[aria-label='Drag Icon for Text3']" ).parent().parent().hide();  // get the parent div which was create by group and hide it on dossier load

var gridDiv =  $( "div[k='K52']" ).parent(); // get the grid div from which you want to popup the information window

gridDiv.css('cursor', 'pointer'); // add cursor pointer

gridDiv[0].onclick = function() // add on click event

{

$( "div[aria-label='Drag Icon for Text3']" ).parent().parent().show(); // popup the IW once click on any row of grid

}

var graphSvg = $( "div[aria-label='Drag Icon for Graph View']" ).parent().find("svg"); // get the graph svg, there will be 3 element of svg and the 2nd one is for bars. I have used the index "1" for 2nd svg if you thing that the position of svg may change in future then apply that logic for every element of svg of try to figure out some dynamic way to pick the bar svg

graphSvg[1].style.cursor="pointer"; // add cursor pointer

graphSvg[1].onclick = function() // add on click event

{

$( "div[aria-label='Drag Icon for Text3']" ).parent().parent().show(); // popup the IW once click on graph

}

var imgDiv =  $( "div[aria-label='Drag Icon for Close IW']" ).parent(); // get the close image div

imgDiv.css('cursor', 'pointer'); // add cursor pointer

imgDiv[0].onclick = function() // add on click event

{

$( "div[aria-label='Drag Icon for Text3']" ).parent().parent().hide(); // hide the group div once click on image

}

});

</script>

Have a look at the below video to understand the steps properly:

https://www.youtube.com/watch?v=RTbWCyGEKL0

Download the Demo Dossier .mstr file from the below link:

https://github.com/AmitSah/MSTR-Dossiers/blob/main/IW%20in%20Dossier%20(Web%20%26%20Workstation%20Support).mstr

Note: This solution will work on Web & Workstation

Please like and subscribe to the channel to get more tips and tricks in MSTR and comment if you have any queries.

Thanks,

Amit