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.
$('div[class="THE CLASS TO HIDE"]').css('display', 'none');
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; ">
<span style="font-size: 14pt;">
Yearly Sales by Category
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.