Very often, we get customer requests for functionality not provided by the native SAP Design Studio components. To address them, we have developed a suite of Custom Add-on components. But creating components using the SDK, is a very involved, time-consuming process. For requirements that call for a quick and easy solution, we have what we call, the HTML and Script Boxes. Michael Howles has a post on the same topic – https://scn.sap.com/community/businessobjects-design-studio/blog/2013/12/17/ds-12-sdk–rapid-prototyping-addon-htmljs-templating. So here, we will focus on some common applications of these simple yet versatile components.

The HTML Box enables you to add HTML elements to a SAP Design Studio dashboard. Install the component and drag & drop it at the desired spot on the canvas.

Html Box Drag and Drop

Html Box Drag and Drop

In the Additional Properties of the component, in the ‘Html Code’ area, enter the desired code and click on the ‘Submit’ button. On running the application, you can see the video on your dashboard.

Video code

Video code

Functionality achieved with just 2 lines of HTML Code ! With this, you can include video (MP4, WebM, Ogg formats) using the HTML5 video tag and audio (MP3, Ogg, WAV formats) using the HTML5 audio tag.

 

Another commonly asked feature is to add custom shapes to the dashboard. This can be done using the HTML Box and SVG tags. This is the code for the star.

Code for star shape

Code for star shape

Custom shapes using SVG

Custom shapes using SVG

 

The Script Box is an invisible custom component that accepts JavaScript code. Let’s add some functionality to the custom shapes using this. How about a dynamic conditional alert ? Here, we have a Crosstab showing Actual and Expected values. Let’s display a red or green alert signal based on how the Actual compares to the Expected. Add a Script Box to the canvas.

 

Script Box drag and drop

Script Box drag and drop

 

The Element ID of the cells in the Crosstab can be found using the Developer’s tool, on any browser (F12 Key).

new element id

new element id

The IDs found using the tool are :

‘Actual’ value in the Crosstab – __cell2_contentDiv

‘Expected’ value –  __cell3_contentDiv

Alert circle created using the HTML Box – alertcircle

Text inside the Alert circle – txtval

 

Now that you we have all the Element IDs, enter the following JavaScript code in the Script Box and click on ‘Submit’ :

 

var act=document.getElementById(‘__cell2_contentDiv’);

var exp=document.getElementById(‘__cell3_contentDiv’);

var al=document.getElementById(‘alertcircle’);

var txt=document.getElementById(‘txtval’);

if(act.innerHTML>exp.innerHTML)

{

al.setAttribute(“fill”,”green”);

txt.innerHTML=act.innerHTML;

}

else

{

al.setAttribute(“fill”,”red”);

txt.innerHTML=act.innerHTML;

}

JS Box Code

JS Box Code

 

On running the application, you can see the alert displayed based on the Actual / Expected values.

Green alert Circle

Green alert Circle

Red alert Circle

Red alert Circle

Wasn’t that really easy ?  Wondered how you could incorporate an SAP XCelsius dashboard into SAP Design Studio ? Well, you can achieve that as well, using these components. The possibilities are endless !

Subscribe to our Newsletter

5920 Windhaven Pkwy
Plano TX 75093.

+1 888-227-2794

+1 972-232-2233

+1 888-227-7192

solutions@visualbi.com