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!

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