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.
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 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
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 !