Customize SAP Design Studio using HTML and Script Boxes

[Former Member]

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 – http://scn.sap.com/community/businessobjects-design-studio/blog/2013/12/17/ds-12-sdk–rapid-prototypi.... 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.

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.

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.

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.

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

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;

}

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

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 !

Source: http://visualbi.com/blogs/design-studio/customize-sap-design-studio-using-html-and-script-boxes/