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!

One thought on “Creating a custom radio button in MicroStrategy Mobile to change panels

  1. Ajay

    Hi,
    Does it work for only mobile? What changes are required if we want to do the for web dashboard.

    Thanks

    Like

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s