Hiding Elements on the Page with jQuery

jQuery allows you to have total control over UI Components in MicroStrategy Web.  There’s really no end to what you can do and change, but one thing in particular that I’ve found to be very valuable is the ability to hide elements on the page.  This could be hiding sections, panels, or in the case of this post, page by drop downs or toolbar items.

Hiding Page By Dropdowns
When working with sectioned documented, sometimes you end up with ugly drop down boxes in the Grouping section.  These are necessary to craft the document the way you want, but they don’t provide any value since they just have a single element.

Using jQuery, we can remove these extra boxes.  Simply add an HTML Container to your page that contains the following code:

<script src="http://code.jquery.com/jquery.min.js">
</script><script>
$(document).ready(function() {
$('span[ds="Supplier"]').css('visibility', 'hidden');
 $('span[ds="Subcategory"]').css('visibility', 'hidden');
});
</script>

Note: See the jQuery post about how to install jQuery locally if your web server doesn’t allow cross site scripting.

This hack is a little different than when we work with panels and selectors in that we don’t need to find the Object ID, because in this case those drop downs don’t have one.  Instead, we have to find them by name and set the entire span tag to hidden.

This has no effect on the functionality of the document, and only hides the page by option.

Hiding Toolbar Items
Other ways you could use this may be to disable specific menu options.  Generally, it’s a pretty straight forward configuration file change (if not just out of the box setting), to remove a toolbar item globally.  But it’s a much more involved customization to remove it for specific documents only.  In this example, we’ll remove the design mode icon on just this one document:

<script src="http://code.jquery.com/jquery.min.js">
</script><script>
$(document).ready(function() {
   $('span[id="tbDesignMode"]').css('visibility', 'hidden');
});
</script>

Just like the previous example, we have to hide the entire span.  Note that this time, it’s id= and not ds=.