Tag Archives: html container

How to get the components with your custom CSS code

Hello there,

Today, let me show you a quick way to get the components in the HTML and use it in your CSS custom code.

The easiest way is to use Google Chrome, right click on the component and use INSPECT.

Once you are inspecting the component, try to find code where the component begins.To do it, mouse over the DIVs and check where it highlights in the document. Find the first node and keep going down until you find the first DIV with a “k” property.

When you find it, copy its value and you can refer to this component using a CSS code like this:

div[k=W6B9C3207D3764C09A234024F4CEFF5B0] {
display: none !important;
}

Now you can format this element using the a CSS code within your HTML Container.

I hope it helps.

God bless you!

Conditional Formatting for all components

Hello there,

Everybody knows that we can’t add a conditional formatting for grids/graphs or panel stacks, for example.

I’ve found a way to do it!

The solution is pretty simple. Add an HTML container, insert your CSS to customize the components and then you use a conditional formatting in the HTML Container to hide it based on a specific condition.

What it does is, if the HTML Container is visible, it applies the CSS, if not, it doesn’t.

Hope it helps.

God bless you!

Creating a custom radio button in MicroStrategy Mobile to change panels

Hello there,

I would like to share this implementation that I did for mobile devices. In this case, I had to create a custom radio button using an HTML Container with CSS and JavaScript to change the panels of a panel stack.

The trick is to create anchors with your URL API parameters to change the panels based on the click of the radio button.

I have one function per button in this case, but you can improve it to use only one.

You just need to create an HTML Container and past this code below:

<!DOCTYPE html>

<html lang="en-gb">

<head>

<meta charset="UTF-8">
<style>

.buttons{

margin-bottom : 1.5em;

}

input[type=radio   ]:not(old){

width     : 2em;

margin    : 0;

padding   : 0;

font-size : 1em;

opacity   : 0;

}

input[type=radio   ]:not(old) + label{

display      : inline-block;

margin-left  : -2em;

line-height  : 1.5em;

}

input[type=radio   ]:not(old) + label > span{

display          : inline-block;

width            : 0.875em;

height           : 0.875em;

margin           : 0.25em 0.5em 0.25em 0.25em;

border           : 0.0625em solid rgb(192,192,192);

border-radius    : 0.25em;

background       : rgb(224,224,224);

background-image :    -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));

background-image :     -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));

background-image :      -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));

background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));

background-image :         linear-gradient(rgb(240,240,240),rgb(224,224,224));

vertical-align   : bottom;

}

input[type=radio   ]:not(old):checked + label > span{

background-image :    -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));

background-image :     -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));

background-image :      -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));

background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));

background-image :         linear-gradient(rgb(224,224,224),rgb(240,240,240));

}

input[type=radio]:not(old):checked +  label > span > span{

display          : block;

width            : 0.5em;

height           : 0.5em;

margin           : 0.125em;

border           : 0.0625em solid rgb(115,153,77);

border-radius    : 0.125em;

background       : #000;

}
</style>

<script>

function clickLvl() {

var event = document.createEvent('MouseEvent');

event = new CustomEvent('click');

var a = document.getElementById('lvlLink');

a.dispatchEvent(event);

}

function clickVP() {

var event = document.createEvent('MouseEvent');

event = new CustomEvent('click');

var a = document.getElementById('vpLink');

a.dispatchEvent(event);

}

function clickDivision() {

var event = document.createEvent('MouseEvent');

event = new CustomEvent('click');

var a = document.getElementById('divisionLink');

a.dispatchEvent(event);

}

function clickDepartment() {

var event = document.createEvent('MouseEvent');

event = new CustomEvent('click');

var a = document.getElementById('departmentLink');

a.dispatchEvent(event);

}

function clickClass() {

var event = document.createEvent('MouseEvent');

event = new CustomEvent('click');

var a = document.getElementById('classLink');

a.dispatchEvent(event);

}

</script>

</head>

<body>

<a id="lvlLink" href="mstr://?evt=2048076&psName=ttl|comp&pName=Panel3531|Panel3531"></a>

<a id="vpLink" href="mstr://?evt=2048076&psName=ttl|comp&pName=Panel3535|Panel3535"></a>

<a id="divisionLink" href="mstr://?evt=2048076&psName=ttl|comp&pName=Panel3534|Panel3534"></a>

<a id="departmentLink" href="mstr://?evt=2048076&psName=ttl|comp&pName=Panel3533|Panel3533"></a>

<a id="classLink" href="mstr://?evt=2048076&psName=ttl|comp&pName=Panel4483|Panel4431"></a>
<div class="buttons">
<div>

<input id="radio1" type="radio" name="radio" value="1" checked="checked" onclick="clickLvl()"><label for="radio1"><span><span></span></span>Button 1</label></div>
<div>

<input id="radio2" type="radio" name="radio" value="2"><label for="radio2" onclick="clickVP()"><span><span></span></span>Button 2</label></div>
<div>

<input id="radio3" type="radio" name="radio" value="3"><label for="radio3" onclick="clickDivision()"><span><span></span></span>Button 3</label></div>
<div>

<input id="radio4" type="radio" name="radio" value="4"><label for="radio4" onclick="clickDepartment()"><span><span></span></span>Button 4</label></div>
<div>

<input id="radio5" type="radio" name="radio" value="5"><label for="radio5" onclick="clickClass()"><span><span></span></span>Button 5</label></div>
</div>
</body>

</html>

Each input is a different radio button.

Just let me know if you need help with this code.

Hope it helps.

God bless you!

Dynamic URL API for HTML Container

Hello there!

Today let’s talk about a quick tip: how to create a dynamic url api for HTML Container.

For J2ee you can do it:

./mstrWeb?Server={&SERVERNAME}&Project={&PROJECT}& …

Where is the rest of the parameters for the url.

For IIS:

./Main.aspx?Server={&SERVERNAME}&Project={&PROJECT}& …

pic

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!

Creating a Preview of your Links Using HTML Container

Hello there!

Today I’m going to talk about a cool features that works on Web using Interactive modeCss tooltip on links!

To do that you have to:

1. Create a screenshot of your dashboard/report and make the image small as possible.

Tips to take a screenshot:

If you use Windowsyou can use snippingtool: Open start menu -> Execute -> type: snippingtool
If you use Mac OS, you can use Grab: Command + space -> type: grab

2. Save this image inside images folder of your Microstrategy Web and name it as imagetooltip.png, for example:

For ISS the default folder is: C:\Program Files (x86)\MicroStrategy\Web Aspx\images
For J2EE the default folder is: webapps(of your java container)\MicroStrategy\images

3. Create a new Document in Web;

4. Create an HTML Container:

Click Insert -> Html Container

pic2

5. Paste this code below in your HTML Container (just double click on the HTML Container to edit it):

<style type="text/css">
a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;} 
a.tooltip span {
 z-index:10;display:none; padding:14px 20px;
 margin-top:-30px; margin-left:28px;
 width:300px; line-height:16px;
}
a.tooltip:hover span{
 display:inline; position:absolute; color:#111;
 border:1px solid #DCA; background:#fffAF0;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}

a.tooltip span
{
 border-radius:4px;
 box-shadow: 5px 5px 8px #CCC;
}
</style>
<a href="#" class="tooltip">
 Dashboard A
 <span>
 <img  src="./images/imagetooltip.png" class="callout" />
 </span>
</a>

6. Execute your Document using Interactive Mode, mouse hover the link and you will see something like this:

pic3

If you want to change the name of the link, just change the  “Dashboard A” to another text in:

<a href="#" class="tooltip">
 Dashboard A
 <span>
 <img class="callout" src="./images/imagetooltip.png" />
 
 </span>
</a>

You can:

A. Customize the CSS;

B. Use an Image to substitute the text link;

C. Insert more links. To do that just replicate this extract of code below and change the Dashboard Name and the src=”” of the img tag with another image URL:

<br />
<a href="#" class="tooltip">
 Dashboard Name
 <span>
 <img class="callout" src="./images/imagetooltip.png" />
 
 </span>
</a>

That’s it!
If you need help with the customization or how to create more links, just post a comment below.

Hope it helps!
God bless you!