In the last months since the release of Design Studio 1.2 and its SDK I was fortunate to get various great opportunities to find out, what this technology is really capable of. In this blog I’d like to share some key insights and recommendations. If you are thinking about your BI tool strategy, I hope that you’ll find this to be a helpful input. Really unlocking the potential works best with the right add-ons. However, at the end I’ll also provide a quick overview, what the standard is already capable of.

Extending the Design Studio standard with Add-Ons

No matter how well and feature-rich a standard tool is designed, there will always be something missing that users want. Design Studio allows adding this functionality with add-ons developed by customers and partners. Those add-ons can be developed using a mix of HTML, CSS and JavaScript.

If you think about developing your own add-ons a good starting point are the developer guide and the samples provided by SAP. Also, there are already some interesting open source examples available. The SAP examples available as jump start are already quite impressive after few months, e.g.:

  • Custom table components
  • KPI tiles
  • google maps
  • SAP UI5 components
  • Custom charts

However, a small warning in advance: developing your own add-on may be quick and easy for simple tasks. If the requirements become more complex, you’ll quickly require professional web development skills and a good test and maintenance strategy…

In my recent projects I was making use of add-ons in three major areas:

  1. Visualization: Use better or different visualization to get information transferred more effectively to users.
  2. Productivity tools: Build applications faster and easier by simplifying technically difficult tasks for designers or by providing new design functionality.
  3. Better management process support: Increasing the value of BI by including qualitative information in the solution.

Let’s have a look at some results we achieved with Design Studio technology and add-ons.

Better visualization with Add-Ons

In charts seemingly small features can make a big difference. And if the developers of the standard chart library do not regard them as important, you now have alternatives. Graphomate is providing a chart add-on that allows very precise formatting of most elements in a chart. Furthermore, it contains special chart types that easily enable users to set up applications based on HICHERT SUCCESS and Internation Business Communication Standard (IBCS) notation rules. I recommend evaluating and using graphomate add-ons for special visualization requirements. However, if they do not cover the required functionality or there are other reasons for not using them, we develop our own solutions.

graphomate chart leica dsag tt.png

Figure 1: time series charts with deviations and condensed bars based on graphomate

But also tables can be easily formatted according to notation rules and even be enhanced with charts, status icons or trend indicators. In the following example a standard design studio table has been formatted to fit to the defined notation rules and some charts have been included. This table allows full navigation (including all hierarchy types), sorting and filtering of the data while keeping those features.

dashboard with table theme and microcharts.png

Figure 2: tables with microcharts, data type indicators and status icons

KPI tiles are another popular visualization type. In a recent project we had the requirement do provide up to 100 performance indicators to some users. We built a data model that delivered all KPIs with one query and rendered the KPI list of that query into KPI tiles. This allowed us to show these tiles dynamically based on user authorization and data availability.

kpi tiles status and trends.png

Figure 3a and 3b: KPI tiles rendered dynamically from query data

Also geo visualization becomes easily accessible with add-ons. In the below example data from a BEx query is displayed in a Google map with markers, whose size and color depend on the data. The next version will also display more detailed data in popup windows for those markers.

google maps with markers and route.png

Figure 4: Google map with markers and route from query data

So the fantastic news is, any visualization that is possible with HTML is now possible with design studio, if someone builds an add-on for it.

Better design productivity with Add-Ons

But add-ons can also help you build solutions faster and easier. An obvious example is tweaking the appearance of the Design Studio controls and tables. Instead of fiddling together lots of CSS styles every time we build and fine-tune a design studio app we adjust those settings in design studio properties of an add-on. The big benefit is, that all developers can now make look and feel changes quickly and safely.

design studio editor with theme add-on properties.png

Figure 5: setting look and feel for tables, tab bar and controls with an add-on

With a few clicks a usually visually difficult to read table can be transformed into an interesting and appealing web and mobile report. Meanwhile the context menu is not yet available in the Design Studio standard, we have also built an add-on for that. Here also individual layout and content can be defined.

standard analysis with theme context menu and microcharts.png

Figure 6: Standard report with theme, context menu and micro charts

Also the requirement to flexibly render HTML from a query result or a web service can be made possible without developing different add-ons for each use case. All you need is an add-on that allows you to build your own HTML/JavaScript directly in Design Studio. This swiss-army-knife can let developers become creative, without the corporate difficulties of regularly deploying new add-ons on servers and development environments. The menu in figure 3a and 3b is rendered dynamically using this tool based on web service data.

Another really helpful tool we have applied is zoom-to-fit. This add-on can scale an application proportionally based on screen resolution and/or window size. Now users don’t have to worry anymore about the beamer or tablet resolution in their next presentation, the app will just zoom into place, like the old flash apps did.

With the layouting tools described it is possible to design apps with user interfaces, which are truly reusable across tablet and desktop devices – a fantastic productivity gain.

Better management processes with Add-Ons

Spicing and speeding up app development is one side. Add-Ons can also be used to add valuable information and context to the numbers. With the capability of add-ons to utilize web services we could provide a flexible commenting solution to enable entering and displaying qualitative content in Design Studio.  This solution interfaces with regular SAP BW comments or other repositories to allow a flexible reuse in other tools.

commenting and graphomate.png

Figure 7: Commenting using a data-sensitive rich text web editor, in combination with a graphomate chart

Standard functionality in Design Studio 1.2 and expected 2014 roadmap

The functionality in the next Design Studio releases in 2014 should enable the substitution of most BEx Web applications with the new technology (see roadmap). Version 1.2 was a major milestone on this path and is available since November 2013. Many key features are already available here. However, still work in progress for future versions is planning functionality, drag & drop support and a context menu.

What we easily get out-of-the-box already are standard tables, charts, filter and navigation elements as well as a set of controls to help you build an interactive application.

standard components and filter block.png

Figure 8: table, tabs, buttons and navigation block with standard components using the light blue theme

All this is available from an intuitive what-you-see-is-what-you-get editor and can be deployed on desktop and mobile devices. A theme optimized for iPad devices can be chosen to easily optimize for mobile app usage.

standard components and charts mobile.png

Figure 9: charts, tabs and controls with iPad theme

Spicing up the look and feel of such a standard application is possible by including custom CSS into the solution. With this CSS code it is possible to change the look & feel of any standard component in Design Studio.

enhancing standard with css.png

Figure 10: standard table and components with CSS optimizations

Furthermore, there are some nice little app design helpers available, like setting a fixed column width in tables and setting the scaling in charts.

The vision: Professional design once + run anywhere self-service analytics

The possibilities of the toolset are amazing. Design once + Run anywhere has become a realistic and easily accessible implementation strategy with Design Studio. The standard and add-on components allow more design flexibility, than any other BI tool in the SAP BusinessObjects world so far. Interestingly, this power is made accessible to the designer in a very simple and intuitive way with what-you-see-is-what-you-get layout editors and powerful property sheets. This actually makes the tool an ideal candidate for self-service BI in the web and mobile world. In my experience business users designing dashboards or web reports want both: powerful functionality and ease of use. In many areas the trade-offs between those two are already cleverly avoided.

However, there are some caveats in this still young tool, which make its use not trivial for more casual users. Some of them can be solved by using add-ins. Particularly, the design of the look and feel using CSS can made simple and safe with add-ons specialized in theming. On the downside, all decent Design Studio apps currently still require the use of scripting.  This is even the case for simple tasks like populating drop down boxes or applying their value selections to data sources. If those standard components would be customizable in a similar way as in the BEx Web Application Designer, the last barrier to providing Design Studio as self-service tool to power users would be removed. Now self-service is already possible, but would have to address power users that would be more development affine (e.g. capable of developing VBA code in Excel).

Based on my experience with v1.2 my conclusion and recommendation is: Use Design Studio as core development platform for all mobile and web reporting needs. It will most likely have all required capabilities for online reporting now or with upcoming versions. If a solution requires offline capabilities or PDF export, you’ll still need to watch the roadmap a little longer (but I know that there are already some smart people working on it).

Many thanks to all the developers, who have brought this fantastic technology to life!

If I may utter one wish, it would be: keep up the momentum and work on making the tool easier to use, so more people can use it.

For those interested in looking at specific customer project experiences I’d recommend the presentations held at the DSAG technology conference in February 2014 from BayWa [link] and Leica Geosystems [link].

In case you’d like to use the above add-ons in your projects or have other add-on ideas, please post below, send me a message or e-mail (it’s in the profile) or connect via Linkedin.

To report this post you need to login first.


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

  1. Tammy Powlas

    This is very good and thank you for sharing. Please note I edited out your e-mail address, as per the SCN rules of engagement The SCN Rules of Engagement | SCN this is not allowed.  If you want people to contact you please include your e-mail in the profile and make it public.

    Looking forward to more great contributions from you.


  2. Erdem Uren

    Hi Jörg,Thanks for sharing.i have a can i show cities in google maps like your show in figure 4.. i have a dimension that keeps city names,but google maps add on does not showing cities in maps.


Leave a Reply