Custom Dossier Experience Using JavaScript

In one of my projects a had some vague requirements. They were something like;

1. Provide a user ad ad hoc experience allowing them to selects what to display

2. Allow users the ability to build charts and other visualizations as needed

3. UX should be user friendly

4. 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.

Data sets label

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

Data sets Class

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

Datasets now hidden

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.