Enabling professional web and mobile analytics with Design Studio 1.2 and Add-Ons
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
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:
- Visualization: Use better or different visualization to get information transferred more effectively to users.
- Productivity tools: Build applications faster and easier by simplifying technically difficult tasks for designers or by providing new design functionality.
- 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.
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.
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.
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.
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.
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.
Figure 6: Standard report with theme, context menu and micro charts
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.
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.
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.
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.
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.
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.
Thanks, Tammy, I'll probably explain a little bit more in future Blogs.
many thanks for sharing your experiences and the key insights of Design Studio!
Very Good one. Thanks for sharing
Hi Jörg,Thanks for sharing.i have a question..how 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.