NEWS LETTERS AND UPDATES

Interested in my newsletter or want to be informed when new blogs, insights and best practice are available? Subscribe here

2016 CREATED AND OWNED BY IVER VAN DE ZAND

  • Grey LinkedIn Icon
  • Grey Twitter Icon
  • Grey YouTube Icon
  • Google+ - Grey Circle
  • Grey Facebook Icon

Statements, thoughts, impressions and insights on this website are my own and do not necessarily represent an employer I am working for or worked for in the past.

All my webinars are available on BrightTalk.com

Get control on Managed Dashboards

SAP Design Studio best practices: some technical tips & tricks

A number of the best practices, tips, tricks and workflows I learned in my Design Studio journey are listed on this page. The page will grow with content any moment if find relevant new best practices. At the bottom of this page you'll find a video that I use as reference. The most of the topics discussed on this page, are being demonstrated in the video.

I learn from you too: any moment you have advice to me, or want to to highlight certain topics, please do let me know by dropping an email.

Export to Lumira

 

If you want your user to be able to blend the dashboards data with other data – not yet in the dashboard application – the “export to Lumira” feature comes very useful. The command to do so can easily be applied to an On Click event of the most components. In my example I simply use a Button. Note that the export is based on a Design Studio data source you have assigned in your application. Sample code to apply to the buttons on click event, could look like follows:

DS_1.export(DataSourceExportType.LUMIRA_lums);

 

The above implies you should be careful defining the data source since it rules what data goes to Lumira. In my applications I use a dedicated source specifically for this feature.

Using Lumira offers the end users a lot of flexibility and freedom. As such it is important to manage the Lumira governance (who can see what) very well. This article provides you every single detail on how to use the CMS (Central Management System) to do all that)

tap the pictures to zoom in

Cross Chart selection

On the first page of the Financial Performance application you’ll notice I have built in cross-chart selection. This means that the user can tap a bar on the left chart with Revenue and DeltaActPlan per month, selecting a specific month. As a result the right hand graph with the same metrics per P&L Element is now filtered for the month tapped. The structure to set this up is as follows:

  • In the On Select properties of the left graph, set up a SelectMember and filter statement for the data source of the right graph

  • Make sure that the selected dimension (in my example month) appears in the sources of both charts involved. This can be a row or column member, but also as filter member in the initial view of the data source

  • DS_SrcRighChart.setFilter("MONTH", ChartLeft.getSelectedMember("MONTH"));

  • If you want your users to easily go back to the initial situation, you can use a Clear Filter command. I have put this command under a small icon, but you can put it anywhere. An example is DS_SrcRighChart.clearFilter("MONTH");

The panel and trend indicators - trick

 

Panels and arrows are valuable objects to highlight information or attract the user’s attention. Key here is the setVisible(true/false) command. With any On Click event you can set the visibility of an object to True or False. I often put the objects to False by default, so they only appear after the On Click event. One of the things I do when I want the user to be able to zoom on a graph, is that I put the graph twice in two different panels. In the first panel the graph is in its original, smaller size. In the second – which by default is set to not visible – I put the bigger version. With the setVisible command set on the small one, I activate the bigger one when the user clicks.

 

If you combine the setVisible command with a variable and an If Then Else command, a huge array of possibilities opens up: “If variable is bigger the x the make red arrow visible, else make green arrow visible”. Some sample code for a panel to appear and the accompanying red or green arrows, could look like follows:

 

if (valuetebdgt >= 40000) {

                                PANEL_MID_RED.setVisible(true);

                }else {

                                PANEL_MID_RED.setVisible(false);

                                PANEL_MID_GREEN.setVisible(true);

                }

                if (valueordr >= 70000) {

                                ICON_MID_RED.setVisible(true);

                }else {

                                ICON_MID_RED.setVisible(false);

                                ICON_MID_GREEN.setVisible(true);

                }

 

Binding of properties

 

As of version 1.5, Design Studio has filter binding properties to a whole lot of components. It prevents from doing any coding. Just select the applicable component and click the display binding property. This property allows to select the filter data source of the objects, but also the target data sources. In my Financial Performance application I have used filter binding for the drop down boxes, but also for the Radio Button Groups component.

The binding also works with measures! This allows you to present your end user a graph or bar, accompanied by for example radio buttons where the user can select to add more measures to the chart. For example: you present a line graph with Revenue per Month. Ensure you have in your datasource additional measures available (i.e. Budget and Forecast). Now create a radio button group with the source and target databinding on the measures. The user now can add Budget and Forecast by simply ticking the buttons.

Dynamic text

From SAP Lumira I learnt the dynamic text feature, but you also easily apply it in SAP Design Studio. Dynamic text is text that is linked to a data source, and thus the text may change depending on what the user of the application selects. For example, if you dashboard shows the text: “the forecast of this month is 45100”, you may split this up in two text boxes. A static one with “the forecast of this month is” and a dynamic one with “45100”. Just use the text binding property and assign the accompanying data source to it.

Overview of Tips & Tricks

To my stance Design Studio has an enormous flexibility in graphical capabilities and user interactivity you can set-up. Some of these are maybe not always recognizable at first sight, and require some experience with the tool. However, some very smart people summazized these special tricks & tips and noted them down in this document.

 

A technical video shwoing how some of the above are applied in Design Studio 1.6

Custom Datasources

Profiling your Application

The support settings in your Design Studio preferences allow to activate Runtime profiling. This is very handy when you want to check the performance of your application. Find here some valuable resources to do so: