MicroStrategy 10 hacks: Loading jQuery under new Presentation Mode

First of all I’d like to thank Bryan Brandow because this post is inspired on his various posts about this subject:

http://www.bryanbrandow.com/search/jquery

Since MicroStrategy 10 was out last year 2015, I’ve been trying to achieve some jQuery hacks in order to provide more usability to our dashboards. The first problem I faced when migrating to MicroStrategy 10 is that Interactive mode is marked as obsolete (and won’t work anymore in future releases) and they’re encouraging people to use new “Presentation Mode” (former Express mode).<

Loading jQuery library in Presentation Mode (former Express Mode) in IE and Chrome

First problem I faced was how -the hell- I had to integrate jQuery with this new fancy mode. I followed steps at Bryan’s blog:

http://www.bryanbrandow.com/2013/01/using-jquery-in-microstrategy-dashboards.html

1) I downloaded current release of jQuery and located it under my MicroStategy installation folder:

MicroStrategyWeb ASPxpluginsjquery

2) After that,  I created an HTML Container and pasted my <script> section to load jQuery library… it worked perfectly under interactive mode… but it didn’t load anything under presentation mode.

After some debugging of my dashboard, I realized library was not being loaded at all. It seems Presentation Mode escapes certain characters as spaces, etc. so they’re not renderer properly on browser at runtime. My advice in this mode is to write as minimum code possible inside HTML Containers, use them only to call your .js files which should be placed on your webserver.

So finally, after many tests, I loaded library dynamically from JS which worked perfectly under Google Chrome:

HTMLContainer - Load jQuery from JS

Code above creates “script” DOM tag referencing jQuery library path and locates it at bottom of header section:

If you inspect your webpage you’ll see how it really works:

JQuery at header section

3) In case you’re using IE, you’ll find out your jQuery code is not executed because IE executes jQuery code before loading jQuery libraries… even if you place jQuery library call before your JS code. My workaround was to call dynamically your JS file (as in step 2 but calling your JS file instead of jQuery library) and including jQuery library call inside your .js file:

Your JS file:

Load jQuery library inside yous JS file

4) There is also another way of loading an external JS if you’re working under Presentation mode. It uses internal MicroStrategy (mstrmojo) JS libraries used at Presentation mode:

http://rinbo.consulting/microstrategy/2014/05/24/load-libraries-selectively.html

I’ve also tested this solution and works fine.

Loading a different JS file for each presentation mode

As you’ll discover, HTML generated under Presentation mode has no similarities as the one generated at Interactive mode (select lists are rendered as divs, ID’s of regions are absolutely different, etc.). So anything you programmed in jQuery needs to be rewritten. In case you want your JS code works at both presentation modes you need to:

  1. Create on JS for each presentation mode containing jQuery calls for each mode
  2. Detect which mode is being called in HTML Container and load corresponding JS file

Tags: , , ,

One Response to “MicroStrategy 10 hacks: Loading jQuery under new Presentation Mode”

  1. Hosting 14/05/2017 at 20:33 #

    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. You can simply include the code to import jQuery right into the HTML Container you re going to call it from.

Leave a Reply

MicroStrategy 10 hacks: Loading jQuery under new Presentation Mode

First of all I’d like to thank Bryan Brandow because this post is inspired on his various posts about this subject:

http://www.bryanbrandow.com/search/jquery

Since MicroStrategy 10 was out last year 2015, I’ve been trying to achieve some jQuery hacks in order to provide more usability to our dashboards. The first problem I faced when migrating to MicroStrategy 10 is that Interactive mode is marked as obsolete (and won’t work anymore in future releases) and they’re encouraging people to use new “Presentation Mode” (former Express mode).<

Loading jQuery library in Presentation Mode (former Express Mode) in IE and Chrome

First problem I faced was how -the hell- I had to integrate jQuery with this new fancy mode. I followed steps at Bryan’s blog:

http://www.bryanbrandow.com/2013/01/using-jquery-in-microstrategy-dashboards.html

1) I downloaded current release of jQuery and located it under my MicroStategy installation folder:

MicroStrategyWeb ASPxpluginsjquery

2) After that,  I created an HTML Container and pasted my <script> section to load jQuery library… it worked perfectly under interactive mode… but it didn’t load anything under presentation mode.

After some debugging of my dashboard, I realized library was not being loaded at all. It seems Presentation Mode escapes certain characters as spaces, etc. so they’re not renderer properly on browser at runtime. My advice in this mode is to write as minimum code possible inside HTML Containers, use them only to call your .js files which should be placed on your webserver.

So finally, after many tests, I loaded library dynamically from JS which worked perfectly under Google Chrome:

HTMLContainer - Load jQuery from JS

Code above creates “script” DOM tag referencing jQuery library path and locates it at bottom of header section:

If you inspect your webpage you’ll see how it really works:

JQuery at header section

3) In case you’re using IE, you’ll find out your jQuery code is not executed because IE executes jQuery code before loading jQuery libraries… even if you place jQuery library call before your JS code. My workaround was to call dynamically your JS file (as in step 2 but calling your JS file instead of jQuery library) and including jQuery library call inside your .js file:

Your JS file:

Load jQuery library inside yous JS file

4) There is also another way of loading an external JS if you’re working under Presentation mode. It uses internal MicroStrategy (mstrmojo) JS libraries used at Presentation mode:

http://rinbo.consulting/microstrategy/2014/05/24/load-libraries-selectively.html

I’ve also tested this solution and works fine.

Loading a different JS file for each presentation mode

As you’ll discover, HTML generated under Presentation mode has no similarities as the one generated at Interactive mode (select lists are rendered as divs, ID’s of regions are absolutely different, etc.). So anything you programmed in jQuery needs to be rewritten. In case you want your JS code works at both presentation modes you need to:

  1. Create on JS for each presentation mode containing jQuery calls for each mode
  2. Detect which mode is being called in HTML Container and load corresponding JS file

No comments yet.

Leave a Reply

MicroStrategy 10 hacks: Loading jQuery under new Presentation Mode

First of all I’d like to thank Bryan Brandow because this post is inspired on his various posts about this subject:

http://www.bryanbrandow.com/search/jquery

Since MicroStrategy 10 was out last year 2015, I’ve been trying to achieve some jQuery hacks in order to provide more usability to our dashboards. The first problem I faced when migrating to MicroStrategy 10 is that Interactive mode is marked as obsolete (and won’t work anymore in future releases) and they’re encouraging people to use new “Presentation Mode” (former Express mode).<

Loading jQuery library in Presentation Mode (former Express Mode) in IE and Chrome

First problem I faced was how -the hell- I had to integrate jQuery with this new fancy mode. I followed steps at Bryan’s blog:

http://www.bryanbrandow.com/2013/01/using-jquery-in-microstrategy-dashboards.html

1) I downloaded current release of jQuery and located it under my MicroStategy installation folder:

MicroStrategyWeb ASPxpluginsjquery

2) After that,  I created an HTML Container and pasted my <script> section to load jQuery library… it worked perfectly under interactive mode… but it didn’t load anything under presentation mode.

After some debugging of my dashboard, I realized library was not being loaded at all. It seems Presentation Mode escapes certain characters as spaces, etc. so they’re not renderer properly on browser at runtime. My advice in this mode is to write as minimum code possible inside HTML Containers, use them only to call your .js files which should be placed on your webserver.

So finally, after many tests, I loaded library dynamically from JS which worked perfectly under Google Chrome:

HTMLContainer - Load jQuery from JS

Code above creates “script” DOM tag referencing jQuery library path and locates it at bottom of header section:

If you inspect your webpage you’ll see how it really works:

JQuery at header section

3) In case you’re using IE, you’ll find out your jQuery code is not executed because IE executes jQuery code before loading jQuery libraries… even if you place jQuery library call before your JS code. My workaround was to call dynamically your JS file (as in step 2 but calling your JS file instead of jQuery library) and including jQuery library call inside your .js file:

Your JS file:

Load jQuery library inside yous JS file

4) There is also another way of loading an external JS if you’re working under Presentation mode. It uses internal MicroStrategy (mstrmojo) JS libraries used at Presentation mode:

http://rinbo.consulting/microstrategy/2014/05/24/load-libraries-selectively.html

I’ve also tested this solution and works fine.

Loading a different JS file for each presentation mode

As you’ll discover, HTML generated under Presentation mode has no similarities as the one generated at Interactive mode (select lists are rendered as divs, ID’s of regions are absolutely different, etc.). So anything you programmed in jQuery needs to be rewritten. In case you want your JS code works at both presentation modes you need to:

  1. Create on JS for each presentation mode containing jQuery calls for each mode
  2. Detect which mode is being called in HTML Container and load corresponding JS file

No comments yet.

Leave a Reply