Get control on Managed Dashboards

applying SAP Design Studio: this is what I learnt

The regular visitor of this website will know: I am a huge fan of bringing business analytics to the place where it belongs: with the business people. Having said that, you might immediately think of dedicated self-service tools. I don't think those will cover all needs: not every business users has the time to create their own analyses. A big part of them wants to get prepared dashboards that:


  • have a consistent lay-out

  • allow to interact with the data-objects that are embedded in the dashboard

  • provide the detail in data that is needed

  • can be accessed on a mobile device

  • are visually extremely appealing

  • allow to seamlessly integrate with a real self-service tool, for example to blend with data that the user gets from any source or place


It is this combination of managed dashboards and self-service that will dominate the future on-premise enterprise BI architectures. For me a trigger to study the managed dash boarding tools and share my experiences with you. I choose SAP Design Studio for this for the simple reason, it is by far the most powerful and capable managed dash boarding solution on the market. One gets even more excited if you study SAP's road-map for analytics: Yes, by July 2017 SAP Design Studio and SAP Lumira will be converged into the new SAP Lumira 2.0.


So this page summarizes how I learnt my way around in SAP Design Studio and nowadays SAP Lumira 2.0 Designer. The page is not a course ate all; the topics covered are chosen because I paid special attention to them. By all means it is recommended to join one of SAP Design Studio or Lumira 2.0 courses I you'd start from scratch. Let's continue:  I will start the next week with following best practices:


  1. Your core structure is key

  2. My mate in CSS

  3. Applying data filters to your sources

  4. Applying in-chart drill and cross-chart filtering

  5. Wow, the interactive cross-tab

  6. Working with tab-strips


My main resources are:


  • the SCN resources for Design Studio or the SCN resources for SAP Lumira 2.0: there are plenty of instruction video's and best practices here

  • this book that I can highly recommend: I am really not to technical, but still can easily follow this book that covers every single detail about SAP Design Studio

  • a good portion of perseverance: nothing new here. Just bite yourself through the first moments and you will notice like me, that the application is not difficult at all. The difficulty is in the limitless things you could do, but creating a good looking core dashboard, is way easier than you think

  • reverse engineering: try to collect some Design Studio applications and import them to your Design Studio client. It allows you to actually "see" how good applications are built. It opened up my eyes and quickly got me up to speed

  • this page is being accompanied by a technical page showing technical best





the natural will to stay focussed and get to the next step, is a pleasant drug you have to accept  


I have been using Design Studio - and nowadays SAP Lumira 2.0 Designer - all the time. On purpose I say using; not seriously developing with it. I have now started to do so, and my main conclusions are that:

  • it is way less difficult than I thought

  • Design Studio is just marvellous

On the right is a video with the results of a Design Studio application I mae for the Public Transport industry. The application measures the dalys of trains and busses. Every trip of course has a actual and planned departure time. But there are also actual and planned depertaure times for every stop thetrain makes. Using these times, I can calculate the delays and cumulate them, allowing for insights on trains with the most delays, area's with themost delays but also moments in time that typically have more delays than others.

SAP Dashboards versus SAP Design Studio

The SAP Business Intelligence Suite still holds two components for enterprise dashboarding: SAP dashboards and SAP Design Studio. Via this link you'll find a very comprehensive overview comparing both components. My choice is made, but you have to make yours yourself.

Starting my journey with SAP Design Studio

Structure please: draft before you start


Oh yes, like you, I also read all the recommendations to first draw a rough lay-out of the dashboard application on a piece of paper before start building. And yes, like you, I did not do the rough-layout upfront and started off in SAP Design Studio right away, assigning sources and dragging charts to my canvas. It is a quick start, though it doesn't pay off. If you start in SAP Design Studio without a proper structure set-up and without a plan, you'll quite quickly run into issues. These issues were in my case problems with the application when resizing it, issues with layers that were in the wrong order resukting in charts not visible. But also positioning of charts and graphs that changed without me asking for it. The trick in SAP Design Studio is that you start with defining the structure of the application:

  • draw your lay-out on a piece of paper, instead of designing your application while developing. If you don't have your draft upfront, you'll notice yourself "designing" the lay-out and structure of the Design Studio application while your are developing on it. It causes issues. By drafting a lay-out upfront, you will start in Design Studio with defining your grids, panels and pages

  • if possible, use one of the built-in templates. In th end it helped me quite a bit to use a template. The "blank template" for example already safes you from some work to properly define headers, footers and body. On the contrary, this templates leaves you all the freedom to develop as youneed without restrictions

  • first define roughly the number of pages you'll need in the application

  • ones the pages are defined, decide whether you'll need tabstrips on one/some of them

  • now start defining your grids for every single page. Take your time to do this properly

What worked best for me was to reverse-engineer some SAP Design Studio applications you like. Study their set-up thoroughly and you'll notice that all of the better applications have good structure. Tick the button above to download some sample applications. You do not have to "run" them (you probably have no access to the datasources) to understand the structure. Just use the import-function on your SAP Design Studio client to import the sample applications.

Draft you dashboard application: make a draft pictures of the core lay-out

Below you'll find an example of a draft lay-out I used for the design of one of my dashboards. Just hoover the pictures below to see the detail. I create the draft with a tool like Paper 53. On the left picture you see what I wanted the user to experience when opening the dashboard application: some key metrics at the top all guided with color-coded trend indicators. Also two drop-down boxes to select a certain time-period and region. In the center there is a large line-chart indicating trends over time with a smaller graph on the right indicating variances. On the bottom there is a cross-tab chart with various metrics and a dialog-box on the right with written key messaging from the management team, and a logo. When making selections with the drop-boxes, filters are set accordingly for all charts that you see

The second, middle picture shows what I want the user to see when tapping one of the KPI's: tapping the left KPI brings a new detailed bar chart on a dedicated panel that pops-up. Tapping the right KPI brings brings a second dedicated panel that pops up and shows a bubble chart with details. If a filter is (or will be) set using the dropboxes, both panels show their graphs according to the filters.

The third, right-hand picture is the same as the second but now indicating the workflow of the dashboard application after the user has opened the dashboard and has seen lay-out from picture 1. Than:

  • tapping KPI (1) opens up panel (B)

  • tapping KPI (2) opens up panel (C)

  • selecting one or more bar's on the graph from panel (B), sets a cross-chart-selection to chart (C), (D) and (E). Chart (A) stays as is.

  • making selections with one or both drop-down boxes, applies they filters accordingly to (1), (2), (A), (B), (C), (D) and (E)


Clarity on the above flow, lay-out and base functionality is crucial and needs to be in place before you start developing your SAP Design Studio dashboard application. The picture helped me with some important steps:

  1. it indicated my dropdown boxes needed to be in the header of my application

  2. it tought me I had to create a 3 by 2 grid in the body of my application: 3 rows and 2 columns. The middle-row grid was again splitted in 4 colums. The grids ensure the charts and graphs stay connected to the right place on the screen. Furthermore the grids acts as a pin-point to connect the graphs to, easinng the development. A third reason is that the grids ensure the lay-out of the final application stays correct when resizing the screen.

  3. Given the similar lay-out of the KPI tiles, you best develop and finish-up one and than copy it. With the copy, one simply changes the data source and both KPI structures are identical and consistent

  4. Since my draft indicated that I wanted the panels to pop-up only after (!) my user ticks a KPI, it learnt me to develop tha lay-out of the left picture first, and only than (!) start with the panels (B) and (C). If you work the other way around, your application will be messed up.

SAP Design Studio draft landing

SAP Design Studio draft landing

SAP Design Studio draft panel

SAP Design Studio draft panel

SAP Design Studio draft flow

SAP Design Studio draft flow

tap the pictures for zooming and detail


CSS: can I change some colors and fonts please

Some of the SAP top experts on Design Studio will laugh, but I spent more than an hour looking to change my font type and properties of certain objects on my dashboard. Couldn't find any of them. Searched the help, searched some books ... nothing .... untill ... untill, I found that everything in terms of formatting of fonts etc is done via CSS. Oh my god, do I have to learn CSS?

No worries. I learnt a few things regarding CSS. It is extremely powerfull, versatile and dynamic. One can create very complex pages, lay-outs and websites, but just changing some font-layout is not difficult at all. With the use of the online CSS mate, it is really a piece of cake. Just set up what you want in the CSS Mate; this tool generates the CSS code automatically that you can copy/paset into your Design Studio dashboard. By the way; there is a very nice alternative tool called EnjoyCSS that has some even more advanced options if CSSMate is not sufficient for you.

I am currently studying some CSS for the very simple reason that I want to learn how to create a complete style sheet with classes, that you can just pick from in SAP Design Studio. When creating a new application in Design Stuudio, you can add a CSS style sheet to it. That style sheet can contain various lay-out definitions organized in classes. Have a look at the Design Studio client application and notice that in almost any property of any object, you can select classes from the CSS style sheet that apply the formatting that you defined. Usefull and intelligent !!

Being eager to learn and discover, I did the exact same exercise on the Design Studio  public transport data application, using SAP Cloud for Analytics. See the Cloud for Analytics sample below

CSS Mate Editor: automatically generate your CSS code

To play, press and hold the enter key. To stop, release the enter key.

press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom

tap the pictures for zooming and detail

Applying CSS Styles in SAP Design Studio & SAP Lumira 2.0 Designer

CSS has tremendous capabilities, but I didn’t have the time to study the whole application. Using CSS Mate, I just set-up the color, font, alignment and other lay-out settings, and the editor generates the CSS code. Below is an example of the white-colored messaging on the landing page of my dashboard. The font is set to Trebuchet, with color-code green-magenta and weight on bold. Just copy this code and paste it into the Design Studio property called CSS Style. Don’t (!) forget the ; at the end of the code.

color: rgb(255, 255, 255); font-family: trebuchet ms; font-weight: bolder;;


Another example is the dashboard header that has transparent background and a font size of 36px with following CSS code I just copied from the CSS editor into the Design Studio CSS Style section:

text-align: left; color: whitesmoke; font-family: trebuchet ms; font-size: 36px; background-color: transparent;;


On page two of the application, you find two main panels both composing of certain charts. If you look in detail, you’ll see both panels have these borders that are slightly ridged. The CSS code required is below:

border: 2px ridge darkgray; border-image: none;;



It is worth to consider making a full CSS Style sheet with CSS classes. Such a sheet applies to the full Design Studio application. The sheet defines all CSS lay-out codes you want to use in your application, and divides those into different CSS classes. From within the majority of the Design Studio properties you can refer to the CSS Style sheet and the specific CSS Class you want to apply. This is done in the Design Studio


Applying filters to your datasets

A common misunderstanding is that managed dashboard are only good for summarized data. Products like SAP Design Studio are made for handling the lowest detail, and process massive (!) amounts of data. The product natively connects in online mode to SAP HANA; it can even run on HANA. I have tested both managing over 5 billion records and 20+ hierarchal dimensions, and that doesn't harm at all.

Having said the above, applying filters to provide your user the consolidated overview he/she probably wants to start with, is of utmost importance. There are plenty of possibilities to do so in SAP Design Studio, but the one I'd like to discuss, is the interactive dropbox. In terms of positioning the dropbox(es) in your application, I tend to leave a little space just above your Pagebook object, and beneath the header. In this case all your pages will show the same drop boxes that your user can apply.

With all of the above I was able to build below. Have a look at the video indicating how the end user would use the application. Below this video I'll share some technical details so you can learn how I built everything.

SAP announed to converge SAP Lumira and SAP Design Studio into one tool. This is excellent news. Rampup is in Q4 2016 and general availability is for Q1 2017. Everything will share one server engine. It will be possible to start-up a storyboard in Lumira and professionalize it in Design Studio. Read everything about it here.

Previously known as Xcelcius, the current flash-based SAP Dashboard component is still part of the SAP BusinessObjects Enterprise Suite. Though Design Studio is definately the more capable components for building enterprise dashboards, SAP Dashboards still does a very good job especially when it comes to stand-alone SWF flash file applications.At this page you can find 2 interactive (you can click them) examples.

Applying filters: the technical set-up

One of the great things in the latest versions of Design Studio is that quite a number of components now have embedded filter binding. There is absolutely no coding done. It means you can select a datasource for your component and a target datasource using binding. See below picture applicable for the Country dropdown box on top of my application. In the source property I define the datasource and dimension that acts as the core filter for the other datsources. These other datasources are defined in the target property by just ticking to which datasources the dropdown selection should apply.

Design Studio Dropdown
Design Studio Dropdown

This is the country dropdown box that the filter applies too

press to zoom
dropdown filter explanation source DS
dropdown filter explanation source DS

select the .... next to the source dimension property of my dropdown box, to select the dimension that will be the core for your selection. In this example I choose Country

press to zoom
dropdown filter explanation DS
dropdown filter explanation DS

Select the various target datasources that you want your filter to apply too

press to zoom

tap the pictures for zooming and detail

If you want to set up a filter between to charts, the filtering is set up using a code line. Filtering between charts means: I click on an area (i.e. an individual bar of a chart showing revenue by month) of one chart, that needs to affect the filtering of another chart.


In my example below I have a stacked barchart on the left that shows revenue per month. The name of the chart in my Design Studio application is INFOCHART_2 and its datasource is DS_3. I want to have a filter on the right barchart that shows delta figures per P&L element. That chart is named INFOCHART_3 and has datasource DS_4.

To ensure that the right hand barchart is dependent on the left hand stacked barchart, I go to the On Select property of INFOCHART_2 and apply following code:

DS_4.setFilter("MONTH", INFOCHART_2.getSelectedMember("MONTH"));

Note the following that you need to remind in the structure of the code: the code line starts with defining the target datasource that the filter needs to apply to. This sample uses the month from the DS_4 dataset as filter. In the second part of the statement, one defines to what object the filter needs to apply. In my case this object is INFOCHART_2. Of course the datasource assigned to the object also needs to have to month, so it can search for it.

DS filter between charts overview
DS filter between charts overview

This Design Studio page has two graphs. I want the left chart to "drive" the right chart when people select on a bar in the left chart

press to zoom
Design Studio filter between charts
Design Studio filter between charts

See the On Select statement I have put on the On Select propoerty of the LEFT chart

press to zoom

tap the pictures for zooming and detail



the fidget in me of not being able to sleep or rest before that one idea is being worked out 

Extensions compatibility from Lumira into Design Studio

Finding the ultimate visualization that thrills your dashboard; that ensures that specific touch you wanted to give to your communication ....... the excitement when you succeed .... do you recognize that feeling?


Quite often I use one of the 250+ extensions that are so detailly listed on the SAP Analytics Extensions Directory, to get what I am really looking for. In the near past one had to look for extensions that were specifically designed for Design Studio, but that has now changed. Did you know that a good part of the SAP Lumira extensions can be used in Design Studio. Here is a list of them that will interest you, but the above analytics extensions directory has them all.

To reuse Lumira extensions in Design Studio that are compatible to Design Studio, you have to port the extensions specifically. Itis not a difficult task and anybody can do it. Here is a good overview of the steps to take, and below a tutorial video on how to do it.

SAP Design Studio and Predictive Analytics come togther

Analyzing 3D predictive maintenance

I am sometimes staggered by the creativity found using SAP Design Studio to visualize insights or join forces with other software. Below is an example of analyzing predictive maintenance where a combination of SAP design Studio and SAP predictive Analytics was used to plot the results in animated 3D. A very nice way of making predictive maintenance visible and actionable. The animation here really makes the difference. Contact me if you are looking for details on how this was set up.