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">
$(document).ready(function() {
$('span[ds="Supplier"]').css('visibility', 'hidden');
 $('span[ds="Subcategory"]').css('visibility', 'hidden');

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">
$(document).ready(function() {
   $('span[id="tbDesignMode"]').css('visibility', 'hidden');

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


You may also like...

19 Responses

  1. In some cases, I think you should use CSS directly on your HTML Container. For example, I use this code to hide page by section :
    <style type=”text/css”> #pbb_GroupByStyle{display:none !important;} </style>

    In your last example, it’s better to use this :
    <style type=”text/css”> span#tbDesignMode{display:none !important;} </style>

    Note :
    – Don’t forget to add “!important” in your CSS properties.
    – I prefer “display:none” to “visibility:hidden” because it’s delete the space.

    Advantages :
    – faster,
    – simple,
    – don’t load jquery file (90ko) when it’s not useful

    Just a question, I have some bugs when I use jquery. Sometimes, the javascript is blocked and isn’t totaly loaded. Do you know why?

    Anyway, thanks for your articles

    • Bryan says:

      Those are really good ideas and tips. I’m not very good with CSS, so I don’t really know how it works that well. In your first example with the page by’s though, we don’t want to hide all of them, we just want to hide specific ones that aren’t valuable. I think your code there would hide them all (but maybe it’s just a small change to hide the individual ones?)

      Your method of hiding the Design button is also really cool. We’ll explore that as an alternative.

      Thanks a lot for the feedback!

    • Hello Francois & Bryan

      I have used code(By Francois) to remove the design button. But its only hiding the design icon not removing space in mstr 9.3.

      And i also want to hide the whole toolbar is their any way for this.

      • Max Heiber says:

        This will remove the Design Mode icon without leaving any empty space:


        Alternatively, you can use this to remove the whole toolbar:
        The second trick will leave some empty space below the toolbar. I’m not sure how to fix it.

    • mucio says:

      Hi guys, I like to hack MicroStrategy too, but I think that a CSS customization is something quite simple and neat to do. François’s solution is perfect for a POC or a temporary deployment.

      Bryan: I usually use firebug to modify on-fly the CSS code (and of course the inspect functionality) and find what I need; for example to remove the black vertical bar of a link selector or to add rounded corners without using flash, of course IE6 not supported (yes, people are still asking)

      Mick: if you need to remove the whole toolbar you can think to use the hiddensections URLAPI parameter

      Anyway it’s the first time I get a chance to comment, from work blogspot is half blocked (I can’t comment), lot of ideas here, I like it 🙂

    • Bryan says:

      Thanks mucio, and welcome to the conversation. I’ve spent most of today messing with CSS/jQuery on Express mode dashboards. It’s kind of frustrating at how different the behavior is between the two, but that’s what happens when you do stuff like this .. warranty voided 🙂 I’d love to see what you’ve come up with. A few people have emailed me some amazing things that I’m working on posting as well. If you can’t access blogger, you can always email it to me (via the Ask Bryan link on the right) and I’ll post them with your credit.

    • mucio says:

      I always use Express mode, I like the idea of Ajax and my current customer moved from Flash to Express mode a while ago. In fact today I tried to link JQuery in the iframe and it was fine in interactive, I got a strange error in Express, but it was almost 6pm and I had some other things to complete. Tomorrow is my day. I’ll drop you an email, with a nice idea we did some time ago (my idea, the SDK developer did the dirty work)

  2. To hide specific elements in the page by, you can use this :
    <style type=”text/css”>[ds=Supplier]{display:none;}</style>

    But this code is NOT supported in IE6 and lower.

  3. Ashish says:

    Thanks all for such enlightening share.I’m just beginning on this coding path inside MicroStrategy and need to know a few basic things.
    How to get the id of any element of a dashboard for e.g., any element of toolbar, any report attribute element id etc.
    For some case we can use the “ds” property as suggested above but in general how to get the handle of any object?


    • Bryan says:

      Using Firefox or Chrome, right click on the element and choose “Inspect”. I wrote the details of it in this other post. Once you know the ID, then you can reference it as $(‘#objectid’). An easy way to do some debugging and testing is to open up the Javascript Console (in Chrome, it’s under the Tools menu), and you can just type right in that box to test out your code. Once you figure out the command you want, just put that in your HTML Container.

    • Saumik says:

      Is there any dynamic way of getting element ID’s of a dashboard. Using hard coded Id’s works great for single dashboard but fails if the dashboard is modified or if we apply the same customization on some other dashboard.


    • Bryan says:

      I’ve never seen the ID of an object change after it was created, unless you delete it and re-add it. You can get it dynamically by using the find() function and traversing the page instead of the ID, but it’s far easier to just update the ID if there’s a change.

  4. Kevin Pettit says:

    In regards to the toolbar, to save space on the header and have a cleaner looking customization, you can hide it completely using jquery (not the url api) and still be able to call the function by making you own button on the dashboard/page. i.e. for the print button like so:

    html container for button (you need add appropriate script tags):
    img id=’print_button’ style=”cursor:pointer” width=24 src=”../images/icon.gif”

    html container in footer (you need add appropriate script tags):
    $(document).ready(function() { $(‘#mstrWeb_dockTop’).hide()});


  5. gayathri says:

    Is it possible to Hide a particular panel of a panel stack?

  1. May 19, 2014

    […] “jailbreak” by injecting jQuery into dashboards which let you do some pretty cool things on the fly.  Even though they didn’t intend it, it’s still nice that the platform is […]

  2. December 15, 2020

    […] a base, we used the article from the famous Bryan blog. It guides you how to hide particular elements in dossiers and documents […]

Leave a Reply

Your email address will not be published. Required fields are marked *