Using jQuery in MicroStrategy Dashboards

I’ve written about a lot of cool things you can do with HTML Containers, but the best involve JavaScript because they add a new level of interaction to MicroStrategy.  Now it’s time to take that to the next level with jQuery, a free, open source library of functions that not only automate a ton of cool features for you but also whittles down the syntax to be super light and easy to maintain.  You can implement this without any customizations which is extremely powerful and it really opens up your imagination for what you can accomplish with MicroStrategy.  Of course, these new found powers will only work on Web, though they also work on Mobile Web Browsers, but not the Mobile App itself.

Loading the jQuery Library
The first step is to load the jQuery Library into MicroStrategy.  This can be done one of two ways, each with some advantages and disadvantages.

Load the library via an HTML Container
You can simply include the code to import jQuery right into the HTML Container you’re going to call it from.  The script to do this is:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

The advantage to using this method is that it requires zero plugins.  Also, the library can be large (you can also try the .min. version if you experience loading problems on older machines), so choosing to only load it on Documents that specifically need it can be a good choice.

Load the library via a plugin
You can modify the mstrWeb.aspx and Mojo_Section.aspx (for Express mode) pages and simply add the <script> tag after the <head> tag, and now it’ll be globally loaded.

The advantage here is a slightly cleaner looking HTML Container that makes debugging a little easier, as well as no need to remember or store that command.  Also, if you need to upgrade the version you’re using, then having a single reference makes that easier.

Referencing the .js file
My examples show a direct cross site link.  Doing this could potentially add some delay or outage if the jQuery site is having trouble.  Due to the nature that they roll these out, there isn’t any source control advantage to do it this way (meaning, any updates will be delivered in the form of new versions, not updated in line).  As such, the best approach is probably to download a copy of the script to your server and reference it locally, like this:

<script type="text/javascript" src="../local/jquery.min.js"></script>

This does require a few extra setup steps that you may or may not have access to, but you can try it out using the direct link (if your web server allows cross site scripting) before going through the trouble of moving files around.

What can you do with jQuery?
The most fundamental function you can do is execute JavaScript code on page load.  Without jQuery, I wasn’t able to find any way to accomplish this with traditional JavaScript in HTML Containers.  This has some really powerful effects, as mentioned in the <Collapsible Sections with jQuery> post.

List of all of my jQuery Hacks

Useful Links
jQuery API Documentation
jQuery Tutorials to get your started
jQueryUI if you really want to go crazy

 

You may also like...

41 Responses

  1. MK says:

    This is a super exciting revelation and leads me to the next logical question… Is there a viable path here to using D3 within MicroStrategy?

    Is there a way to access, say, the data in a grid report via JavaScript, push it into JSON or an array and feed it to D3? Perhaps, the grid could be hidden in the background as the data-source with the D3 vis rendered over it.

    I’ll try to answer these questions for myself tomorrow. But would love to hear your thoughts…

    – Mike

    • Bryan says:

      Yes you can. We’ve done a POC to show it working, but we’ve already gone past that. I haven’t written a post about it yet because we’re still finishing it up, but at yesterday’s MicroStrategy World session, we demoed a new light plugin that we’ve built that automatically handles data transformation tasks for 3rd party visualizations including d3. More to come on that soon!

    • Mike K. says:

      Nice. Actually, after my comment, I realized that the potential awesomeness was too much to wait and started hacking away at the HTML Container approach. I scraped the table, transforming it into a object structure usable by some of these http://nvd3.org/, and I’m close to having it working!

      Does the plugin work via the SDK or are you still getting the data from the DOM? Also, are you going to release it publicly or do I need to go work at FB to have this sort of fun 🙂 ?

    • Mike K. says:

      Finally got it working; actual D3 right in Web. Transforming data for the specific library and visualization is obviously critical. I’m thinking about the degree to which this step ca be generalized versus needing to write a separate transform for each kind viz. So looking forward to your write up.

      The HTML containers don’t export into PDF, though, a deal breaker in some places. Apparently this is a known issue. Although now I’m wondering if it’s possible to go with something like this to have full control over PDF rendering… https://github.com/MrRio/jsPDF.

    • Bryan says:

      Our plugin works through the Java SDK as a light addon and does the transformation during document rendering, so it should perform better than scraping the DOM. Also, it allows for code to exist in one place as opposed to in individual dashboards. That said, your approach is an awesome way to “just get it done”.

      The exporting problem is one I’ve faced for years as an advocate of custom visualizations. Sadly, there’s nothing internally that can be done about it. Using an external engine is something I never thought of, and while it wouldn’t support subscriptions, perhaps in some cases just downloading the PDF is good enough.

      Awesome contributions, thanks!

    • Mike K. says:

      So, I’ve been inspired to install Eclipse and set up the customization editor. I’ve never worked with the SDK nor Java… but oh well. A few general questions…

      I’m thinking about what a plugin approach might look like and which of the “scenarios” in the MSDL is appropriate. “Retrieving Report XML in a Custom Format,” with sample code, looked promising. It’s here: (Home > Web SDK > Customizing MicroStrategy Web > Part II: Advanced Customization Topics > Scenarios: Extending Existing or Adding New Functionality).

      I’m unclear on how this gets “deployed,” but I think it allows you to use a URL to return custom formatted XML into an external application such as a D3 dashboard running outside of MSTR. To stay within MSTR, I can imagine trying to fire the URL from within an HTML container and pass it to, say, D3.xml(). At least this would solve the issue of having to hunt through the DOM and fix things if element ID’s change.

      So… Am I right about this Custom XML scenario? Is this what you mean by “plugin”, or is it a scenario that automatically generates the custom XML/JSON at runtime and makes it accessible to HTML container javascript?

      – Mike

  2. Hi Bryan,

    With use of jquery, is it possible to compare two date value prompts and can we able to display Pop up MSG .

    Thanks,
    Charmi

    • Bryan says:

      Yep, I’ve actually done something very similar. What I did was create a text box with the {&PromptN&} macro (where N is the prompt number) and then used jQuery to find and process that value. You could then do whatever you want. That’s actually pretty straight forward stuff with the power of jQuery!

  3. Cuong Vu says:

    Bryan,

    I’ve started to work with MSTR and jQuery. I have successfully gotten it to work in Interactive Mode using an HTML Container. However, I can’t get it to work in Express Mode. I’m getting an MSTR error window with the text “ReferenceError
    $ is not defined”. When I view the HTML source, it shows the HTML container but HTML escaped. Since the error is trapped within MSTR, I can’t really debug through the browser’s debugger. Can you offer suggestions on how to get jQuery to run in Express mode?

    Thanks,
    Cuong

    • Bryan says:

      I’ve determined that it’s not worth using in Express mode, because there’s too many problems. First, including the script in an HTML container doesn’t work in Express mode (which is probably the error you’re getting). You have to manually add it to the Mojo_Section.jsp/aspx page under the head tag. Objects also render as the page scrolls, so any page load manipulations you do probably won’t work on longer documents. Finally, (and the real killer), objects seem to take some additional amount of time to load after the document load is complete. To get things functional, we had to wrap a setTimeout(,10) (10ms) around our code, but that is just an estimation and would sometimes fail. My advice is to stick with Interactive Mode.

    • Cuong Vu says:

      Bryan,

      Thanks for the quick response. I’ve found the same thing with needing to use setTimeout to get events to fire correctly. I’m going to play around in Express mode but with caution as you suggest. BTW, I heard that you’re going to open source your high chart integration plugin. Is that true? If so, when do you think it will happen?

      Thanks,
      Cuong

    • Bryan says:

      That’s the plan, but no ETA. We just deployed it to prod a couple of weeks ago and working through some bugs. Also ironing out the details, but hopefully soon!

  4. Ying Huang says:

    Somehow the reference link to public jquery did not work for me although I could click to it. The below link worked
    src=”http://code.jquery.com/jquery-1.9.1.min.js”

  5. Saumik says:

    Are there any good examples for the same. it would help us immensely if you share one custom jquery plugin in MSTR

  6. Bryan, have you had any issues with jQuery on Firefox? For some reason, it’s the only browser where the code is not working for me.

  7. Agustin says:

    Bryan,

    I was able to include 3rd party charts into an HTML container and feed them with data from Microstrategy reports (via Custom XML), but do you know if there is a way to to use these 3d party charts as selectors targeting Microstrategy charts or grids?

    Thanks!

  8. ashish says:

    This comment has been removed by the author.

  9. Hi Bryan,
    Thanks for your post. I tried the code and it doesn’t seem to work in an HTML container in MSTR server. Even just a simple code to change the source of the img using jquery.

    It does, however, work if I just create a simple HTML page on my laptop and try to set the image source using jquery. Does that mean I need to download jQuery library locally on my MSTR web server?

  10. Ritesh Jain says:

    Hi Brian,
    Thanks for this post. This shades some light on the problem we are trying to solve. But still not 100% if/how this can be solved. Basically we are looking for popup window (containing external page/form) to be called from MicroStrategy dashboard to implement writeback functionality. Client would not allow touching SDK. Also the requirement is to keep focus on popup until user submits the form, so windows.open would not work. Also we need to pass parameters through URL API to the external form, so that right records can be added/edited. Do you think this is doable?

    • bryan says:

      Yeah, it sounds possible without the SDK. You can put an HTML container on the page and use it to load jQuery as I’ve described (you won’t use the SDK, but you will need to place the jQuery files on the web server somewhere). Then you can follow one of the suggestions in this post about how to open a modal window using javascript: http://stackoverflow.com/questions/3937591/window-open-as-modal-popup. Put the HTML Container inside a Panel Stack and you can target it with selectors and stuff and pass the parameters via the URL with autotext macros (ie, {attribute@id} syntax). btw, I assume there’s a pre-existing system you have to use which is why you’re not using Transaction Services.

  11. Ritesh Jain says:

    Bryan,
    Thanks the reply. I tried your suggestion and I got it to open popup from within HTML container. I used one HTML container and placed my code there. In your reply did you mean to use 2 separate HTML container (one to load libraries, and other to display popup page)? I have an existing grid on the dashboard, and I need to add another column with edit (link/image) that should open the popup page while passing the record_id and user_id. My other challenge is to get it to work in express mode and we have some 508 reports and we need to add the same functionality there as well.

    • bryan says:

      Express mode is a mess to do this type of thing in, but if you do, put the html container to load the libraries at the top of the dashboard. You can use 2 html containers or do it in one.

      • Ritesh Jain says:

        Thanks Bryan,
        I made some progress on handling the jQuery and popup. But I’m not able to make it work to pass parameters to the popup. I have grid report with edit link on each record. (prompt selections will decide the number of records fetched in the grid). When edit link clicked we need to open popup form (external to MSTR) rendering data based on passed id from the grid. I tried your suggestion of placing HTML container on panel stack and targeting but no luck. Any special setting on panel stack, grid, link, or html container needs to be done?

        • bryan says:

          I’m not sure an edit link will work. You might need to make it a document inside the popup and use a text link with {autotext}.

  12. keerti says:

    hi bryan,

    how to create dashboards using command manager? Could you please help me with this topic.

  13. Parsa Shams says:

    Is there any way to hack mstr to load jQuery on the mobile app, or does that run on a completely different platform?

  14. sv says:

    Bryan, Is it possible to add a sharepoint link to MSTR web with the help of jQuery?

  15. Paul Bailey says:

    If you’re working in Express mode, you can include external JS files on the document via an HTML container, rather than hacking the aspx/jsp pages to include them in the node. I did a quick note how here: http://www.rinbo-consulting.co.uk/microstrategy/2014/05/24/load-libraries-selectively.html

  16. Sai says:

    Hi bryan,We are facing strange error in Microstrategy Dashboards which are using JQuery, we are frequently getting a blank popup and name of popup is “Microstrategy Web” and there was no error message .Kindly suggest us how to disable the popup to come.

  17. josepcoves says:

    Hi Bryan,

    Thanks for your post! In the new Presentation mode (former Express mode) some of your jQuery hacks are not working properly. I’m trying to trigger an html “select list” change event in order to get a panel refreshed via jQuery. It works perfectly in interactive mode but in “presentation mode” select list is rendered as a “Div” tag. I suspect you can do the same thing via mstrmojo library but I can’t find any documentation on the net. If you inspect HTML you can find something like this on your former selectors:

    onclick=”mstrmojo.dom.captureDomEvent(‘mstr100′,’click’, self, event)”

    So I was wondering, do you know whether it’s possible to fire these kind of actions from JavaScript?

    Thanks

  18. josepcoves says:

    Hi Bryan,

    Thank you so much for your post.
    I’ve writen a post about how to integrate jQuery with new Presentation Mode (former Express mode):

    http://www.relational.es/blog/microstrategy-10-hacks-loading-jquery-under-new-presentation-mode

    Hope it helps!

  1. May 19, 2014

    […]  That said, I have found what I call MicroStrategy’s “jailbreak” by injecting jQuery into dashboards which let you do some pretty cool things on the fly.  Even though they […]

  2. April 25, 2020

    […] Useful Link  […]

  3. September 12, 2020

    […] JQuery Usage in Dashboards […]

Leave a Reply

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