Tag Archives: javascript

Creating a custom radio button in MicroStrategy Mobile to change panels

1 Reply

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!

Default selection on a Radio Button selector

2 Replies

Hello there,

Recently I was having issues with a selector that was selecting a radio button but it wasn’t selecting the first element by default and I couldn’t use a slice selector to solve that issue. So, I had to implement this code to do it using javascript.

It is very simple, you just need to insert an HTML Container and add this code to it:


<script type="javascript">

radioButtonIndex = 0; // change here the index if you have more than 1 radiobutton selector

document.body.addEventListener('mouseover',modifySelection,true);

function modifySelection(){ 

 radioButtonObj = document.querySelectorAll('[name='+ document.getElementsByClassName('mstrmojo-ListBase mstrmojo-RadioList')[radioButtonIndex].getAttribute('id') +']');

 selected = false;

  for(i = 0; i < radioButtonObj.length ; i++) {

	selected = radioButtonObj[i].checked;

	if(selected == true) {break;}

  }

	if(selected == false){
		radioButtonObj = mstrmojo.all[document.getElementsByClassName('mstrmojo-ListBase mstrmojo-RadioList')[radioButtonIndex].getAttribute('id')];
		radioButtonObj.selectedIndex = 0;
		radioButtonObj.value = 1;
		radioButtonObj.idx = 0;
		radioButtonObj.checked = true;
		radioButtonObj.onchange();
	}
}

</script>

You just need change the radioButtonIndex in case you have more than 1 radio button in your dashboard. Just test 0, 1, 2… until you find the right one.

Hope it helps.

God bless you!

Opening an Information Window using JavaScript

Leave a reply

Hello there!

Today let’s talk about how to open an Information Window using Microstrategy Web SDK.

To do that, you just have to edit your OIVM_Content_Core.jsp (if you are using J2EE for Microstrategy Web) and put a code like that:


    function openIW(){
        var idIW = mstrmojo.App.docModel.infoWinByKey;
        var idIWA = mstrmojo.App.docModel.infoWindows;
        var contIndex= 0;
        var indexVar= 0;
        for (var itemA in idIWA) {
            if(itemA == “filterPanelName“){
                indexVar= contIndex;
            }
            contIndex++
        }
        contIndex= 0;
        for (var item in idIW) {
            if(contIndex==indexVar){
                mstrmojo.App.docModel.showInfoWin(item, 1);
            }
        contIndex++;
        }   
    }

 

This is a simple implementation JavaScript code that opens an Information Window that has filterPanelName as it’s  id name. You can use the id name that you wish.

Now, you just have to create a button or link, for example, to trigger that event, like this:

<a href=”#”onclick=”openIW()”>Open IW</a>

 

Note: Just remember to set “Fixed” to the position of your IW.

Hope it helps!

God bless you!

 

Substr in Auto-texts

Leave a reply

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