Custom Dossier Experience Using JavaScript
Updated: Apr 10, 2019
In one of my projects a had some vague requirements. They were something like;
Provide a user ad ad hoc experience allowing them to selects what to display
Allow users the ability to build charts and other visualizations as needed
UX should be user friendly
The data should be contextually restricted to meet the specific business needs and replicated for each business need.
Okay, sounds simple enough. I took the approach of using a Dossier since it included a lot the functionality already. With that I crossed off requirements 1-3. Making is contextual was easy at a glance too, just add in the specific data sets (reports) and I should be done.
Well, no. Dossiers are built for analysts when in editable mode. You can add/change data sets etc. There are various labels that arenât exactly user friendly either. I found an easy way to customize the Dossier user experience was to utilize a bit of javascript to hide some of the elements.
Adding the Javascript code below will âhideâ the elements by changing the css display.
<script>
$(document).ready(function() {
$('div[class="THE CLASS TO HIDE"]').css('display', 'none');
});
</script>
Letâs show an example. In the screenshot below I see the âdata setsâ I want to hide that to create a better user experience.

To hide this element, I need to find the class by opening the browser developer tools.

Now add an HTML container to the Dossier and add the code I provided above. Make sure to modify the âTHE CLASS TO HIDEâ to be the class of the object we want to hide

And now there is one less item distracting the user and taking away from the user experience. This is one of the many things we can hide to customize the user experience.
One more thing to address, we canât just have a floating html container on the Dossier which has no information. Seeing as this is an HTML container, letâs add in HTML text so this will serve as a header.
Iâll use the code below in the same HTML container.
<p style="padding-left: 8px;">
<span style="font-family: tahoma, arial, helvetica, sans-serif; ">
<strong>
<span style="font-size: 14pt;">
Yearly Sales by Category
</span>
</strong>
</span>
</p>
Now, we have a custom experience and can hide as many elements as are necessary! Have fun.
Thanks for checking out this blog post. If you found this post helpful please consider donating. Any contribution is appreciated! Just click the PayPal icon at the bottom of this page.