the design studio cookbook ian mayor, director bi product strategy, sap · pdf filethe design...
TRANSCRIPT
© 2011 SAP AG. All rights reserved. 1
The Design Studio CookbookIan Mayor, Director BI Product Strategy, SAP
© 2011 SAP AG. All rights reserved. 2
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
© 2011 SAP AG. All rights reserved. 4
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
© 2011 SAP AG. All rights reserved. 5
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
© 2011 SAP AG. All rights reserved. 6
Future Direction
MOBILIZE VISUALIZE UNIFY
Dashboards
Design
Studio
© 2011 SAP AG. All rights reserved. 7
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
© 2011 SAP AG. All rights reserved. 9
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. 10
Design Studio Data Pipeline
Components
Data Source
QueryIn-memory Cube
Universe
Stylesheets Are Your Friends
© 2011 SAP AG. All rights reserved. 12
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. 13
Demo
© 2011 SAP AG. All rights reserved. 14
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
© 2011 SAP AG. All rights reserved. 16
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.
© 2011 SAP AG. All rights reserved. 17
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());
© 2011 SAP AG. All rights reserved. 18
Demo
© 2011 SAP AG. All rights reserved. 19
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
© 2011 SAP AG. All rights reserved. 21
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. 22
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. 23
Demo
Resources
© 2011 SAP AG. All rights reserved. 25
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.
Stump The Design Studio Experts
Thank You!
Contact information:
Ian Mayor
David Stocker
Session Code 0707
© 2011 SAP AG. All rights reserved. 29
Headline area
Drawing area
White space
The Grid