Create simple toggle button using VBX Scriptbox & Htmlbox

Create simple toggle button using VBX Scriptbox & Htmlbox

There has always been always some requirements to customize  native SAP Design Studio components. While some amount of customization can be done with the help of CSS, most cannot be done with CSS. The custom extension of VBX (Visual BI’s extensions for SAP Design Studio) – Scriptbox & HTMLbox, you can customize your dashboard to a very advanced level. So if you are ready to sweat and learn basic HTML,CSS,jquery and javascript, you can do more than simple customization using CSS. If you are well-versed with Javascript and HTML and you know you are doing, you can do much much more with this VBX extension.

What is Scriptbox?

Scriptbox is nothing but a simple component which can execute javascript/jquery code  in your dashboard.

Note: If you want to use jquery, your dashboard must have at least one component which includes with the jquery library file or you should manually include it with the scriptbox.

What is HTML box?

Html box is used to make quick prototype using simple html tags and css.

This extension comes in handy when you want to build something quick without actually putting much effort. So I am going to make a toggle button using this extension.

I have used the following html to create the layout for the toggle button:

.toggle {
  position:relative;
display:inline-block;
  width:40px;
  height:60px;
background-color:#bbb;
-webkit-border-radius:4px;
-moz-border-radius:4px;
  border-radius:4px;
  text-align:center;
}
.toggle input {
  width:100%;
  height:100%;
  margin:0 0;
  padding:0 0;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:2;
  cursor:pointer;
  opacity:0;
filter:alpha(opacity=0);
}
.toggle label {
  display:block;
  position:absolute;
  top:1px;
  right:1px;
  bottom:1px;
  left:1px;
background-image:-webkit-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
background-image:-moz-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
background-image:-ms-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
background-image:-o-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
background-image:linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
  -webkit-box-shadow:0 2px 3px rgba(0,0,0,0.4),
    inset 0 -1px 1px #888,
    inset 0 -5px 1px #bbb,
    inset 0 -6px 0 white;
  -moz-box-shadow:0 2px 3px rgba(0,0,0,0.4),
    inset 0 -1px 1px #888,
    inset 0 -5px 1px #bbb,
    inset 0 -6px 0 white;
  box-shadow:0 2px 3px rgba(0,0,0,0.4),
    inset 0 -1px 1px #888,
    inset 0 -5px 1px #bbb,
    inset 0 -6px 0 white;
-webkit-border-radius:3px;
-moz-border-radius:3px;
  border-radius:3px;
  font:normal 11px Arial,Sans-Serif;
  color:#666;
  text-shadow:0 1px 0 white;
  cursor:text;
}
.toggle label:before {
  content:attr(data-off);
  position:absolute;
  top:6px;
  right:0;
  left:0;
  z-index:4;
}
.toggle label:after {
content:attr(data-on);
  position:absolute;
  right:0;
  bottom:11px;
  left:0;
  color:#666;
  text-shadow:0 -1px 0 #eee;
}
.toggle input:checked + label {
background-image:-webkit-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
background-image:-moz-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
background-image:-ms-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
background-image:-o-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
background-image:linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
  -webkit-box-shadow:0 0 1px rgba(0,0,0,0.4),
    inset 0 1px 7px -1px #ccc,
    inset 0 5px 1px #fafafa,
    inset 0 6px 0 white;
  -moz-box-shadow:0 0 1px rgba(0,0,0,0.4),
    inset 0 1px 7px -1px #ccc,
    inset 0 5px 1px #fafafa,
    inset 0 6px 0 white;
  box-shadow:0 0 1px rgba(0,0,0,0.4),
    inset 0 1px 7px -1px #ccc,
    inset 0 5px 1px #fafafa,
    inset 0 6px 0 white;
}
.toggle input:checked:hover + label {
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4),
    inset 0 1px 7px -1px #ccc,
    inset 0 5px 1px #fafafa,
    inset 0 6px 0 white;
  -moz-box-shadow:0 1px 3px rgba(0,0,0,0.4),
    inset 0 1px 7px -1px #ccc,
    inset 0 5px 1px #fafafa,
    inset 0 6px 0 white;
  box-shadow:0 1px 3px rgba(0,0,0,0.4),
    inset 0 1px 7px -1px #ccc,
    inset 0 5px 1px #fafafa,
    inset 0 6px 0 white;
}
.toggle input:checked + label:before {
  z-index:1;
  top:11px;
}
.toggle input:checked + label:after {
  bottom:9px;
  color:#aaa;
  text-shadow:none;
  z-index:4;
}
</style>
<span class="toggle" >
    <input type="checkbox" id='togglebutton' >
    <label data-off="✖" data-on="✔"></label>
</span>

I then pasted this code into the html box extension and clicked on Submit. Now the  toggle button is ready to function. So to add some additional functionality for this toggle button, I have used the following Javascript

var myEl = document.getElementById("togglebutton");

myEl.addEventListener('click', function(e) {
   if(this.checked== true){
$('#BUTTON_2_button').click()   //button 1 id
    }else{
$('#BUTTON_1_button').click() //button 2 id
    }
}, false);

This small snippet of javascript will read the status of toggle button and execute the script of the buttons accordingly. Then paste the script to the scriptbox extension and submit.

And I have two button components which have the following script respectively. Move this button somewhere off the user layout to make it not visible.

On click of BUTTON_1

CHART_1.setVisible(false);
CROSSTAB1_1.setVisible(true);

On click of BUTTON_2

CHART_1.setVisible(true);
CROSSTAB1_1.setVisible(false);

I have added few components to show you simple demonstration for this. Let’s see how it’s working.

When toggled on

When toggled off

As you can see, it’s very helpful when you have to do some rapid development and customization if you really know what you are doing.