The Design Studio Cookbook

Ian Mayor, Director BI Product Strategy, SAP

2011 SAP AG. All rights reserved.

Agenda

Design Studio and Dashboards

Understanding the Design Studio Architecture
Stylesheets Are Your Friends
Dont Fear Scripting
Leverage the SDK and Add-Ins
Resources
Stump the Design Studio Experts

2011 SAP AG. All rights reserved.

Design Studio and Dashboards

Client Portfolio: Today

Reporting

Dashboards and Apps

Agile Visualization

Distribute Information

Build Engaging Experiences

Discover. Predict. Create.

Securely distribute information

across your organization

Deliver engaging information to

users where they need it

Discover areas to optimize your

business

Answer related questions by

interacting with pre-defined
reports

Track key performance

indicators and summary data

Adapt data to business needs

Tell your story with beautiful

visualizations

Build printable reports for

operational efficiency

2011 SAP AG. All rights reserved.

Build custom experiences so

users get what they need quickly

Today: two experiences to cover customer needs

SAP BusinessObjects Dashboards

SAP BusinessObjects Design Studio

Flexible visualization across diverse data

sources

BI applications and guided analysis on

top of multi-dimensional and relational
data

2011 SAP AG. All rights reserved.

Future Direction
MOBILIZE

VISUALIZE

UNIFY

Dashboards

Design
Studio

2011 SAP AG. All rights reserved.

Ians Rule for Learning Design Studio

What was hard to do in Dashboards is easy in

Design Studio.

What was easy to do in Dashboards is hard in

Design Studio.

2011 SAP AG. All rights reserved.

Understanding the Design Studio

Architecture

Key Differences in Architecture

Design Studio dashboards are rendered dynamically at runtime

Data operations are performed on cubes
Queries are executed serially, but can be done in the background

Runtime data filtering is done at the query level not component level

2011 SAP AG. All rights reserved.

Design Studio Data Pipeline

Universe

In-memory Cube

Query

Data Source

Components

2011 SAP AG. All rights reserved.

10

Stylesheets Are Your Friends

CSS Style Sheets

Most fundamental layout (text formatting, colors, borders, etc) are controlled
via CSS stylesheets.
This is one of the most challenging aspects of Design Studio compared to
Dashboards

Two ways to lay out: master style sheet or quick and dirty CSS
Master style sheets make it easier to have consistent formatting and a cleaner
design, but need more planning
There are lots of good CSS editors out there
Chrome Developer Mode is great for troubleshooting

2011 SAP AG. All rights reserved.

12

Demo

2011 SAP AG. All rights reserved.

13

CSS Tips and Tricks

Chromes developer mode is awesome for debugging.

Turn off caching while testing
In Chrome: start developer mode, go to settings, disable cache
If you close developer mode, caching turns back on automagically

In IE: F12 Developer Tools, go to Network, Always Reload from Server

IE11 turns this on by default

Leverage a common style sheet for ease of maintenance

There are lots of CSS editors out there on the web
http://enjoycss.com/

2011 SAP AG. All rights reserved.

14

Dont Fear Scripting

Scripting isnt scary

Scripting looks intimidating because it looks like programming

Its really no more complex then Excel formulas, it just look different
Excel formulas are functional programming, Design Studio is procedural
programming.
Scripting is often simpler in Design Studio.

2011 SAP AG. All rights reserved.

16

Example

A formula from a real Dashboards dashboard to display a chart of subproducts based on a selected product:
=IF(A49="Product1",HLOOKUP(B81,A9:N26,2),IF(A49="Product2",HLOOKUP(
B81,A28:N32,2),IF(A49="Product3",HLOOKUP(B81,A34:N36,2),IF(A49="Produ
ct4",HLOOKUP(B81,A38:N39,2)))))
The same thing in Design Studio scripting:
DS_2.setFilter(Product, DROPDOWN.getSelectedValue());

2011 SAP AG. All rights reserved.

17

Demo

2011 SAP AG. All rights reserved.

18

Scripting Tips and Tricks

Autocomplete and Help are your friends

Look at examples and tutorials
http://sap.com/learnbi
Create re-usable scripts with hidden buttons
Use global variables to remember values between scripts and dashboards

2011 SAP AG. All rights reserved.

19

Leverage the SDK and Add-Ins

Use Add-Ins to extend functionality

The Design Studio SDK allows new component types to be added.

Lots of free components on SCN
Gauge
Slide Show
Super Image
See http://bit.ly/1qu5EcV for full catalog
Lots of commercial ones as well
Advanced charting from Graphomate
Dashboard Migrator from APOS
ESRI integration from Galigeo
and more

2011 SAP AG. All rights reserved.

21

You can also create your own

Add-ins are built using HTML5, Javascript and CSS

Use Eclipse framework for packaging and deployment
Built in SAP UI5, jQuery and D3.js

Lots of samples in the SDK documentation

See http://help.sap.com/boad/

2011 SAP AG. All rights reserved.

22

Demo

2011 SAP AG. All rights reserved.

23

Resources

Learning Resources
Online:
BI Tutorials: http://sap.com/learnbi
SCN: http://scn.sap.com/community/businessobjects-design-studio/
Online Documentation: http://help.sap.com/boad
Books:
Mastering SAP BusinessObjects Design Studio with SAP Netweaver BW
By Ingo Hilgefort
Despite title, most material is not BW specific
Getting Started with SAP BusinessObjects Design Studio
By Xavier Hacking and Jeroen van der A
Published by SAP Press
Both books available on Amazon in ebook and/or dead-tree format.
2011 SAP AG. All rights reserved.

25

Stump The Design Studio Experts

Thank You!
Contact information:
Ian Mayor
ian.mayor@sap.com
David Stocker
david.stocker@sap.com
Session Code 0707

The Grid

Headline area
White space

Drawing area

2011 SAP AG. All rights reserved.

29