SAP Design Studio Tips and Tricks #2: Dynamic Thumbnails for better performance and usability

[Former Member]

SAP Design Studio Tips & Tricks Series

***

Executives typically demand multiple views of a single geography, business function, customer or process. Dashboards that deliver intelligence to support such requirements tend to either group them in a single view or break them down into multiple views.

SAP Design Studio makes a third approach feasible, whereby thumbnails can be used to help executives navigate to the KPI views they need. What’s more, SAP Design Studio can get this accomplished in an ultra-efficient manner. Consider the following:

• Unlike thumbnails seen in SAP Lumira, Design Studio can support thumbnails that are dynamic. In other words, the thumbnails can update themselves even when they are not selected (e.g. Multiple thumbnails are updated when the Region context is changed in the active view)

• Unlike with SAP Dashboards, Design Studio needs only ONE chart control in the main panel as it can support all types of native charts. Both the Data Source and the chart type could be updated during run time when a different thumbnail is selected.
• Imagine a scenario where you need to showcase 20 KPI views, each consisting of one chart. You can technically get the dashboard done using just 5 chart controls (for a layout similar to the above). In this case, as the user scrolls across the thumbnails, the thumbnail controls themselves are updated to show the next set of (four) views. This approach however has its own drawbacks as well, as it takes more time to refresh and load the thumbnails. In general, it all depends on striking a fine balance between factors such as (a) Initial load time (b) Lag time for subsequent interactions (c) Need for thumbnails to update themselves when context is changed in the active view etc. Note that we have foregone the minimal number of thumbnails (4) in this demo and instead opted for 8 thumbnails and used dynamic visibility.

The code:
The following code ensures that the main chart is updated, whenever a thumbnail is clicked. Each thumbnail will have a similar code in its OnClick event.

//to assign and load the data source
DS_MAIN.assignDataSource(“cuid:Afk2uBnjUxNDqrtx8EeWW1Q”,DataSourceType.INFOPROVIDER, “ZOIL_REG_CONS”);
DS_MAIN.loadDataSource();
//setting the chart type

CHART.setChartType(ChartType.HORIZONTAL_STACKED_BAR);

Also visit SAP Design Studio Tips & Tricks #1: Swapping charts into focus on demand

Source : http://www.visualbis.com/blogs/dashboards/2013/09/05/sap-design-studio-tips-tricks-2/