Adding Interactive User Help with Intro.js
Installing the Script
The first thing you have to do is download the script (and it’s accompanying CSS file) and put it locally on your web server. It comes with the full code version of Intro.js as well as instrojs.css. Personally, I prefer to deploy the /minified/Intro.min.js and introjs.min.css. The difference just saves you a couple of kilobytes of download for your users, which sometimes can matter (but probably not in this case).
I like to create a folder in my plugins directory and just drop the files in there. We aren’t changing any MicroStrategy files (so this technically isn’t a plugin), but it keeps external files in a single, neat place and hopefully makes administration easier later.
Helping Your Dashboard
Maybe there’s a better plugin free way, but to load this in a document, I had to use some jQuery.
First, create an HTML Container and add the code to import the Intro.js library:
Next, we have to include the CSS file, and the only way I could get that to work was with jQuery:
We then have to add HTML attribute tags to each piece that we want to call out. You’ll need to use your Chrome/Firefox Inspect tool to get the IDs or Classes.
Just add data-intro=”Your message” and data-step=”x” to each item.
I’m using this sample dashboard from tutorial:
And adding 3 items of help:
$('iframe').first().attr('data-intro', 'This is a map.');
$('#W25').attr('data-intro', 'These are some line graphs.');
$('.W28').attr('data-intro', 'This is the title box. It tells you things.');
Finally, you have to add a button that will start the show. I added a little “help” link in the top right corner by adding this code to an HTML Container with the start() function:
So, that works (kinda) and you can navigate through the items of the tutorial. But as you can see, the box that should be calling out the content is all but covering it up. I tried all kinds of things with all kinds of objects and couldn’t get it to work. Despite posts like these, I’m not a great web hacker, so hopefully some super cool reader will come along and figure out why this isn’t working like in the Intro.js demos. I’m sure the community (and me) will be forever grateful.
Sorry for the anti-climatic let down, but I messed with this for too long not to post something about it, so there you go.
.attr('data-intro', 'this is a map');
$('#W25').attr('data-intro', 'these are some line graphs. woo');
$('.W28').attr('data-intro', 'i hope this works');
Thanks for sharing…
First of all great post and many thanks.
I implemented the steps as outlined by you and in my environment this works correctly. I used Chrome and jQuery 1.10
I noticed your forecasting in the pictures… I am not a retail guru by any means, but when i use training metrics or do linear regression y=a+bx by hand, all my forecasts come out just basically straight lines, and yours are not. Mind sharing how you forecast?
That’s a stock dashboard out of tutorial, I didn’t build it. You’d have to ask a stats guy for that, I haven’t done it either 🙂
This comment has been removed by the author.
I want to display custom page after logining into project which shows new Report link and on mouse over shows snapshot of that report.
Used jquery scripts and works fine when opened jsp page alone.
But after using it in MSTR plugin, jsp page is unable to read jquery scripts. (Tried adding css to global css and jquery path looks good)
Do we need to config MSTR to use jquery? Any help is appreciated. (I am using MSTR 931 and Tomcat 6 as webserver)
Is it possilbe to do it in flash mode? I needed open popups with some help. Than you in advance
Hey Brian, This for sharing this awesome post. The dashboard you have used, is it Tableau dashboard by any chance?