Skip to Content

While we had created dashboards from scratch in Design Studio, we set out to explore what it would take to ‘migrate’ an existing dashboard  (created in SAP Dashboards) to Design Studio. For this exercise, we took the Work Order Management dashboard, and targeted Design Studio version 1.0 SP02.

Design Studio - Publishing the applicationDesign Studio – Work Order Management App on desktop


Now, a major difference between SAP Dashboards and Design Studio is that while Excel is King in Xcelsius, scripts are the backbone of Design Studio. All functionalities such as dynamic visibility, selections, and drill downs that were possible in SAP Dashboards are achieved using BIAL (BI Action Language) scripting. Those accustomed to SAP Dashboards (Xcelsius) may find Design Studio concepts quite different, but you would get used to scripting pretty soon. In fact standard developers would pick it up easily, since Design Studio concepts are in many ways similar to that of other development tools such as Eclipse and Microsoft Visual Studio.

Following summarizes our steps in creating the Design Studio application.


Step 1: Choosing a backend

With Design Studio 1.0 SP2 having the ability to connect to SAP BW and HANA, we went with SAP BW. We quickly modeled an InfoProvider and loaded data and opened up the Design Studio client. We then created a connection to this data source.


Step 2: Creating the storyboard & layout

Since we already had the storyboard well defined, creating the layout was a breeze. We then started arranging elements such as selectors and charts in the canvas. The grid component came as a godsend, as it made alignment of controls much easier. In fact, the grid in version 1.1 has features to manage position, size and visibility of objects – a few things that are not available in the previous version 1.0. Makes for an easier life.

Design Studio - Creating the storyboard Design Studio – Creating the storyboard

Step 3: Adding Data Sources

We then added the Data Sources, and assigned them to charts and tables.


Step 4: Manipulating Data Sources

You need to be able to manipulate data sources when you interact with selectors at run time, so that the charts and tables show appropriate data. To do this, a basic knowledge of scripting is needed. If you are familiar with other development tools, it is just a matter of learning the Design Studio way (functions and syntax). A key feature that comes to aid here is Content Assistance, which doesn’t require you to remember syntax, methods or properties. Upon hitting Ctrl+Space, Content Assistance pops up and reveals available functions and attributes promptly, and it also has features such drop-downs, tool tip, and auto-complete.

Design Studio - Content Assistance Design Studio – Content Assistance


Step 5: Working with multiple views, dynamic visibility, etc.

We then had to incorporate dynamic visibility into Design Studio at two levels:

a)     One for each tab, which we easily achieved using the ‘pagebook’ component. This component also allows users to ‘swipe through pages’ on the mobile device with the swiping action. In fact there are also transition effects during swipes (à la powerpoint).

b)     One for each chart, where we had to toggle between chart and data. This was done using scripting, the snippet of which is provided below.

 Design Studio - Implementing Dynamic Visibility through scripting

Design Studio – Implementing Dynamic Visibility through scripting


Step 6: Adding visual appeal

This is usually the final step. We used text components with custom CSS scripts for the background and headers. CSS scripts are very useful to enhance the look and feel of Design Studio applications.


Step 7: Publish to BI Platform

Finally having finished our first design studio application, we published the application on to the desktop and iPad.

Design Studio on iPad - Tab 1 Design Studio on iPad – A view of Tab #1 of the Work Order Management App

Design Studio on iPad - Tab 2Design Studio on iPad – A view of Tab #2 of the Work Order Management App

Design Studio on iPad - Tab 3 Design Studio on iPad – A view of Tab #3 of the Work Order Management App


Our observations:

In short the Design Studio is an amazing tool. The whole set of steps above took us 2 days. It was highly rewarding to see an existing dashboard come up well in Design Studio. While SAP Dashboards is still a leader in its own right, Design Studio is a worthy contender for HTML5 and mobile-enabled dashboards/applications. There are few improvements required for this tool, but we expect many enhancements to come up in the upcoming releases.


Change is the only thing permanent! – Heraclitus

Source : http://www.visualbis.com/blogs/homepage/2013/05/20/migrating-sap-dashboards-to-design-studio/

To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

Leave a Reply