the design studio cookbook ian mayor, director bi product strategy, sap · pdf filethe design...

© 2011 SAP AG. All rights reserved. 1

The Design Studio CookbookIan Mayor, Director BI Product Strategy, SAP


Agenda

Design Studio and Dashboards

Understanding the Design Studio Architecture

Stylesheets Are Your Friends

Don’t Fear Scripting

Leverage the SDK and Add-Ins

Resources

Stump the Design Studio Experts

Design Studio and Dashboards


Client Portfolio: Today

• Securely distribute information

across your organization

• Answer related questions by

interacting with pre-defined

reports

• Build printable reports for

operational efficiency

• Deliver engaging information to

users where they need it

• Track key performance

indicators and summary data

• Build custom experiences so

users get what they need quickly

• Discover areas to optimize your

business

• Adapt data to business needs

• Tell your story with beautiful

visualizations

Distribute Information Build Engaging Experiences Discover. Predict. Create.

Reporting Dashboards and Apps Agile Visualization


Today: two experiences to cover customer needs

SAP BusinessObjects Dashboards

Flexible visualization across diverse data

sources

SAP BusinessObjects Design Studio

BI applications and guided analysis on

top of multi-dimensional and relational

data


Future Direction

MOBILIZE VISUALIZE UNIFY

Dashboards

Design

Studio


Ian’s 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.

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


Design Studio Data Pipeline

Components

Data Source

QueryIn-memory Cube

Universe

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


Demo


CSS Tips and Tricks

Chrome’s 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/

Don’t Fear Scripting


Scripting isn’t scary

Scripting looks intimidating because it looks like programming

It’s 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.


Example

A formula from a real Dashboards dashboard to display a chart of sub-

products 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());


Demo


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

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…

http://bit.ly/1qu5EcV


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/


Demo

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.

http://scn.sap.com/community/businessobjects-design-studio/

http://help.sap.com/boad

Stump The Design Studio Experts

Thank You!

Contact information:

Ian Mayor

[email protected]

David Stocker

[email protected]

Session Code 0707

mailto:[email protected]

mailto:[email protected]


Headline area

Drawing area

White space

The Grid

the design studio cookbook ian mayor, director bi product strategy, sap · pdf filethe design...

Documents