While we had created dashboards from scratch in SAP 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.
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.
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.
Step 5: Working with multiple views, dynamic visibility, etc.
We then had to incorporate dynamic visibility into Design Studio at two levels:
- 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).
- 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.
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.
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