Tag Archives: html container

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!