Category Archives: HTML Container

Hiding menu options in a document

Hello there,

Have you ever wanted to hide a specific item from the document menu so the users won’t be able to use a specific feature? Some of the options can be removed at a user level, but what if you want to remove for a specific dashboard?

To do that, we can use a custom CSS code. In our example we will be removing the Export option. Let’s go!

  1. Open the document in web and add a HTML container to your document;
  2. Click on on the HTML container -> properties and formatting -> select HTML TEXT from the general menu;
  3. Double click on the HTML container and type this code:

<style type=”text/css”> .mstrmojo-Popup.mstrShortcutsListPopup .export, .mstrmojo-Popup.mstrShortcutsListPopup .zoom{display:none !important;}</style>

Voilà! The export button is no longer there.

If you want to remove other buttons, you just need to add the classes for the button inside of the <style> </style> tags and make sure to use the display:none !important.

To get the classes for the other buttons, you just need to use Chrome, for example, and inspect the button to get the classes.

Please, let you know if you need help inspecting elements.

God bless you!

HTML Container in MicroStrategy 10

Hello there!

I know that a lot of people are trying to use HTML Container with no success in version 10.

While using presentation mode there are a lot of tags and javascript functions that are not working properly.

I found a way to fix that issue. It’s not the best solution, because it changes the look and feel of MicroStrategy Web. But, at least it works.

You just have to:

  1. Go to preferences;
  2. Go to General and Dynamic HTML:
  3. Change the value to NO and save; pic1

Now you can test your HTML Containers.

Just let me know if that fixed all your issues with HTML Container.

Hope it helps.

God bless you!

Substr in Auto-texts

Hello there!

Today lets talk about how to create a substr in auto-texts.

You just have to:

1. Create a new document;

2. Create an HTML Container;

3. Insert this code:

<script type=”text/javascript”>

function substringFunc(){
var username= document.getElementById(“pText”).innerHTML;
document.getElementById(“pText”).innerHTML = username.substr(1,5);
}
</script>
<p id=”pText”>{&USER}</p>

<script>

document.getElementById(“pText”).onload= substringFunc();
</script>

4. Change the substr values to get what you need for your string. Here is an explanation of this javascript function: http://www.w3schools.com/jsref/jsref_substr.asp

You can also change the {&USER} to another auto-text.

Run your document in Express or Interactive mode and you will get something like that:

pic

 

Custom back button for MicroStrategy Web

Hello there!

Today let’s talk about how to create a back button in a MicroStrategy Web.

That’s pretty easy, just do that:

1. Create a new document;

2. Insert an HTML Container and paste this tag:

<a href=”javascript:history.go(-1)”>Back</a>

pic

Just run your document and click on this link. You will go back to the previous page that you were visiting.

Tip: You can also you images to create this link.

Hope it helps!

God bless you!

Using Jquery to change IFrame content

Hello there!

Today let’s talk about a cool hack: How to change the IFrame content using JQuery!

I’ve created this code to substitute the Layout feature in Document using IFrame, so when you click on a selector element or image, for example, it will change the IFrame content using the report/document specified for that selector element or image.

You must to execute your document in Interactive Mode to make it works.

To do that you have to:

For images:

1. Create a new document;

2. Insert 1 HTML Container and use it as an IFrame:

pic1

Rick click on the HTML Container inserted and go to Properties and Formatting…

pic1

Choose IFrame and click Ok:

pic1

3. Insert 2 images:

pic1

4. Use Google Chrome or Firefox with Firebug to inspect element to see their ids. In my case, I’m going to use Google Chrome and right click on a blank area to see the image ids.

Execute the document in Interactive Mode -> Right click on a blank area and choose Inspect Element -> Click on the Search button in the inspect section and click on the image -> Get the span id that has the image:

pic1

pic1

pic1

In my case is W46 and W48.

5. Insert another HTML Container and paste this code inside of it. Note that I inserted the W46 and W48 in the click event, you must use your id value. In the http//localhost… you must insert the link to your report/document:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$('#W46').click(function(){
$('.htmlContIframe').attr('src','http://localhost:8080/MicroStrategy/servlet/mstrWeb?evt=2048001&src=mstrWeb.2048001&visMode=0&currentViewMedia=2&documentID=4E7D7D5B46726C89E069ADBF1CF540AD&server=NB-033&Project=MicroStrategy%20Tutorial&port=0&share=1&hiddensections=header,path,dockTop,dockLeft,footer') ;
});
$('#W48').click(function(){
$('.htmlContIframe').attr('src','http://localhost:8080/MicroStrategy/servlet/mstrWeb?evt=4001&src=mstrWeb.4001&reportID=3D0A29164E09BC1B7733DB99D775B2FD&visMode=0&reportViewMode=1&server=NB-033&Project=MicroStrategy%20Tutorial&port=0&share=1&hiddensections=header,path,dockTop,dockLeft,footer') ;
});
 });
</script>

After you changed the $(“#W48”) and $(“#W46”) to your span id and changed the urls, you can now execute your documet in interactive mode and see that your IFrame will update using each chosen url. Remember to insert:

&hiddensections=header,path,dockTop,dockLeft,footer

After your urls.

pic1

Tip: Set border none in each html container:

pic1

For each button, repeat this code:

$('#W48').click(function(){
$('.htmlContIframe').attr('src','http://localhost:8080/MicroStrategy/servlet/mstrWeb?evt=4001&src=mstrWeb.4001&reportID=3D0A29164E09BC1B7733DB99D775B2FD&visMode=0&reportViewMode=1&server=NB-033&Project=MicroStrategy%20Tutorial&port=0&share=1&hiddensections=header,path,dockTop,dockLeft,footer') ;
});

Just remember to change the W48 id to the id of the span that has your image.

For selectors:

1. Repeat steps 1 and 2;

2. Add a dataset with Country attribute, for example;

3. Create a button bar selector and use Country as source. Disallow multiple selections and remove the All element;

4. Execute your document and see every element that you have in this selector:

pic1

In my case I have USA and Web.

5. Insert a new HTML Container and paste this code:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$('input[type="button"][value="USA"]').click(function(){
$('.htmlContIframe').attr('src','http://localhost:8080/MicroStrategy/servlet/mstrWeb?evt=2048001&src=mstrWeb.2048001&visMode=0&currentViewMedia=2&documentID=4E7D7D5B46726C89E069ADBF1CF540AD&server=NB-033&Project=MicroStrategy%20Tutorial&port=0&share=1&hiddensections=header,path,dockTop,dockLeft,footer') ;
});
$('input[type="button"][value="Web"]').click(function(){
$('.htmlContIframe').attr('src','http://localhost:8080/MicroStrategy/servlet/mstrWeb?evt=4001&src=mstrWeb.4001&reportID=3D0A29164E09BC1B7733DB99D775B2FD&visMode=0&reportViewMode=1&server=NB-033&Project=MicroStrategy%20Tutorial&port=0&share=1&hiddensections=header,path,dockTop,dockLeft,footer') ;
});
 });
</script>

Just change the USA and Web to your element names. If you have more than 2 elements in your Country attribute, just repeat this code changing the value to the name of your elements:

$('input[type="button"][value="Web"]').click(function(){
$('.htmlContIframe').attr('src','http://localhost:8080/MicroStrategy/servlet/mstrWeb?evt=4001&src=mstrWeb.4001&reportID=3D0A29164E09BC1B7733DB99D775B2FD&visMode=0&reportViewMode=1&server=NB-033&Project=MicroStrategy%20Tutorial&port=0&share=1&hiddensections=header,path,dockTop,dockLeft,footer') ;
});

In this case, for each element that you have in your selector, you can display a different report/dashboard.

pic1

Hope it helps!

God bless you!