BOD310 EN Col06 FV Show

BOD310
Collection: 06
Material Number: 50130503
Design Studio 1.6 Basic Training
© 2015 SAP SE or an SAP affiliate company. All rights reserved.

Abstract
Target Group Project team members

Application consultants
General Description Course participants will be enabled to build applications with SAP
BusinessObjects Design Studio
Learning Objectives Understand the positioning and architecture

Create script free applications
Define the layout of applications
Create advanced applications using scripting techniques
Deploy and optimize applications on mobile devices
Duration 3 days
© 2015 SAP SE or an SAP affiliate company. All rights reserved

BOD 310 Unit Overview
Design Studio 1.6 Basic Training
Unit 4
Unit 1
Create advanced applications
Positioning & Architecture
using scripting techniques
Unit 5
Unit 2
Optimize applications for
mobile devices
Unit 3
Define the layout of the application

Unit 1:
Positioning & Architecture

Unit 1:Positioning & Architecture
Lesson 1
Tool Positioning
Lesson 2
Architecture

SAP BusinessObjects Design Studio
Product description
SAP BusinessObjects Design Studio enables application designers to create analysis applications and dashboards –
based on SAP NetWeaver BW, SAP HANA and universe data sources – for browsers and mobile devices.
It is the product of choice when full support for SAP NetWeaver BW and SAP HANA data models and engine capabilities is
required.
Personalized Online Composition
Drag & Drop Powerful Visualizations and
for End-Users
Controls: Tables, Charts, Geo Map, Filters etc.
Standard Apps for

Analysis, Planning,
Data Exploration,
Full OLAP Self-Service
& Planning
Support,
Dashboards
State of the art HTML5

Rendering & Mobile
Support
Rapid Prototyping with

Access Enterprise Data
Offline Data (CSV)
Sources: BW, HANA, UNX, ESP
Event Streaming

Convergence* of the SAP BI Client Portfolio
Discovery & Lumira

Lumira
Analysis Explorer
Interoperability
Design Studio
Common platform services

Dashboards & Dashboards Design Studio
Applications BEx Web Design Studio Apps
Interoperability
Analysis for OLAP
Analysis Office
Office EPM Add-in
Analysis Office
Integration Live Office
BEx Analyzer
Crystal Reports
Crystal Reports
Reporting Web Intelligence
Desktop Intelligence
Web Intelligence
© 2015 SAP SE or an SAP affiliate company. All rights reserved * Functional convergence, not legal successors
How IT and Business use Design Studio
IT
LOB
Corporate
Create & Deploy
Design Studio Analytic
Custom Apps Corporate
Applications Corporate
Analytic
Analytic
Applications
Personal Views
Modify (optional) Applications
Corporate
Corporate
Ready-To-Run Analytic
Corporate Analytic
Self-Service
Templates
Deploy Applications
AnalyticApps
Standard Applications
Dashboards
for Analysis, Exploration &
Self-Service Dashboards Applications
(out-of-the-box)
Design Studio design tool (Eclipse)

Design Studio Technology Design Studio app (HTML5)
Design Studio bookmark (HTML5)
Unit 1:Positioning & Architecture
Lesson 1
Tool Positioning
Lesson 2
Architecture

Deployment option: BI Platform
Consumer Designer BI Platform

 Available as of Design
Studio release 1.0
Browser  BI 4.0SP5 or BI 4.1SP0 as
client the pre-requisite
 Design Studio applications
stored on BI Platform
 Backend connections
through CMC, able to
connect to multiple SAP
BW and SAP HANA
Deployment Platforms systems
 Transportation via
BI Platform Promotion management
 Pre-requisite for SAP BI
Mobile Solutions
BW HANA UNX Data sources

Deployment option: SAP NetWeaver
Consumer Designer SAP NetWeaver

 Available as of Design Studio
release 1.1
 BW 7.3SP9, BW 7.31 SP7 or
Browser BW7.4SP2 as the pre-requisite
client (for Multi-Language Support
and Bookmarks there are
higher support packages as
pre-requisites)
 Design Studio applications
stored on SAP BW
 Transported though different
systems via TLOGO objects
Deployment Platforms (ABAP transport mechanism)
 Can only connect to one BW
system
SAP NetWeaver
 Mobile Solution: Portal on
Device
 Please refer to following note
for configuring Design Studio
BW Data sources
iView in SAP NetWeaver Portal
https://css.wdf.sap.corp/sap/su
pport/notes/2077647

Deployment option: HANA Native
Consumer Designer HANA Native

 Available as of Design
Studio release 1.3
Browser/  HANA 1.0 revision 90+
Client  Design Studio applications
stored in HANA repository
 Direct native connectivity
to HANA‘s Information
Access Service (INA) via
Firefly
HANA
Information SAP HANA Platform

Access Repository
Service (INA)

Other Option (Prototyping Only)
Local Mode
Designer Local mode

 Only for demo or quick
prototyping purposes
Clients  Direct connection to
backend data sources.
Uses local SAP logon.ini
file & ODBC HANA
connection info
 Design Studio Java
application runtime runs
Data locally on laptop or PC
BW HANA
source(s)

Future Platform Strategy
Platform Strategy for SAP BusinessObjects Design Studio
 To address reported customer issues around a clear platform strategy and supported
features on different platforms, and to accelerate delivery of new product capabilities, SAP
decided to streamline the platform strategy for Design Studio
 Going forward, SAP will focus Design Studio investments on the BI Platform
deployment, and recommends all customers to deploy Design Studio on the BI
Platform
 NetWeaver and HANA deployments only support a minimal feature scope, and new
investments are not planned
This is the current state of planning and may be changed by SAP at any time.

Maintaining the Startup Mode
 You can switch the startup mode in the Design Studio client.
 In the default setting, the Design Studio starts in Local Mode after installation.
 To maintain the startup mode choose: Tools > Preferences
 Changing the startup mode requires a restart of the design studio client.
Note:
In the "Logon to SAP BusinessObjects BI Platform" dialog
box and in the “Logon to SAP NetWeaver” dialog box, you
can still decide to log on locally by clicking Skip, even if the
startup mode is set to Connect to BI Platform or to SAP
NetWeaver. The design tool starts in local mode.

Unit 2:

Unit 2: Create script free applications
Lesson 4
Lesson 1
Using data bound component
Create a First Application
properties
Lesson 2 Lesson 5
Create script free applications Create highly formatted tables
using analysis components using a scorecard component
Lesson 3
Lesson 6
Understanding the interoperability
using container components
between the BI clients
and change the look and feel

Welcome page
 With Getting Started you can watch most recent tutorials.

 With Create New you can create the new application directly from welcome page.
 With Recently-Used
Analysis Application
you can directly open
the application which
you worked on.
 With Useful Links you
can open the related
public resources.

Create a new application
Create a new Application via

 The Application menu or
 The Toolbar
Deployment Storage Location

BI Platform „Favorites“ or „Public Folder“ on BI Platform Server
NetWeaver BW - ABAP Server
HANA HANA Repository
Local C:\Users\<YourUser>\Analysis-workspace\com.sap.ip.bi.zen\repository

How to use the “New Application” Dialog
1. Enter a unique name for your application in

1
the field under Application Name
2
2. Choose the rendering type for the

components in your application: SAPUI5 or
SAPUI5m
3. Choose the template you want to use for your 3

application
4. Choose Create
4

Main screen elements
Design Studio has the following main screen elements + additional views that can be added
 Components  Additional Properties
 Outline  Script Problems
 Layout  Search Results
 Properties  Error Log
Layout
Properties
Components
Outline

Sources for a Data Source object
Data Source
BW System HANA System Universe csv
 Query  Analytic view  Relational .UNX  CSV Data

 Query View  Calculation view universes connections
 InfoProvider (see notes for are only
details) supported in
local mode

How to create a new Data Source
There are several ways to create a new Data Source…
 In the Application menu choose > Add Data Source
 Right-click Data Sources in the Outline tab of the design tool and click New....
 Use „Copy and Paste“ from another Design Studio Application or within an Application
 Use the interoperability features from Analysis Office or Analysis OLAP

Initial view editor capabilities
The Initial View dialog box allows you to modify the initial state of any data source.
You can change the following data in the initial state of a data source:
 Dimensions in the rows/columns and the order of dimensions
 Measures displayed in the result set
 Dimensions in the background filter
For each measure you can change:
 The number of decimal places displayed
 The scaling factor used
 How totals are calculated
 The sorting order
For each dimension you can change:
 The additional result set attributes displayed
 The active hierarchy (if available) and its initial expansion level
 The member to be filtered
 The filter by input string
 The member presentation (text, key, text/key, key/text)
 The totals display mode (show, hide, hide if only one member)

Adding components to an application
In the Components view, click a component:

 Drag and drop the component of your choice into the preview area, or
 Drag and drop the component of your choice into the Layout folder of the Outline view.

Layout properties and docking behavior
Top Margin
Left Margin Width Right Margin
Height
Component
Bottom Margin
Borders
 Each component is always bound to its surrounding borders

 These borders can be the borders of the application or an surrounding object (e.g. Tabstrip)
 For each axis (horizontally/vertically) three values have to be specified
 One out of these three values is always defined as „auto“
Hints: Begin to define the properties with the two „auto“ values
Use the „Maximize Component“ button to define width/height as „auto“ and the margins as „0“

Align design studio components in layout
Comfortable align and distribute components in layout

 Convenient for designers to organize components without writing exact margin
 All type of components can be aligned and distributed
 Components within the same container or under the same root can be aligned and distributed
 Components can be automatically maximized
 Alignment and distribution can be done via context menu in Layout or per buttons in Design Studio menu
Aligned Left Distribute Horizontally

Assigning a Data Source to a component
There are several ways to assign a data source to a component:

 Work in the Outline view: Drag the data source from the Data Sources folder and
drop it onto the corresponding component in the Layout folder.
 Drag the data source from the Data Sources folder and drop it onto the corresponding
component in the design area of the tool.
 Select a Data Source in the Data Source property of the component

Lesson 4
Lesson 1
properties
Lesson 2 Lesson 5
Lesson 3
Lesson 6

Components overview
Analytic Components like crosstabs and charts to visualize your

data. After you have dragged and dropped a crosstab or a chart
into the layout editor, the component initially displays dummy data.
As soon as you assign a data source to the crosstab or chart, it
displays the data of the data source.
Basic Components folder contains a variety of components with

different functions.
Components like Dropdown Box, Radio Button and Checkbox are
used to select or filter data and thus enable user interaction at
runtime.
Components like Button and Image are used to enable navigation,
whereas components like Text and Date Field are used to enhance
the design and layout of the application.
Container Components are used to group and structure the

content of an application.
They can also be used to optimize an application for a mobile
device and thus enable specific motion gestures in mobile
applications.

Crosstab
The crosstab displays multi-dimensional data in a grid with analytic functions.
 Application designer can choose to enable/disable navigation functions like hierarchical navigation,
sorting and column resizing function
 Exceptions defined in SAP BW backend or in Analysis Office can be activated in crosstab setting
 The width of each column within a crosstab can be adjusted individually
 Context Menu available and can be adjusted
 Report-to-Report Interface supported

Crosstab – context menu
The technical component Context Menu enables the application user to navigate and analyse data at
runtime. Additionally for each Crosstab you can decide if you want to have a Context Menu or not.

Info Charts
Creating an Info Chart component

 Drag the “Info Chart” component into the canvas and assign a data source to it
 A default chart will be generated depending on the data contained in the data source
 To change the look of the chart, click on “Chart Configuration” property
 A configuration dialog will pop-up, allowing you to:
– Change the chart type
– Define the chart look by dragging measures and dimension into different feeds
Automatic Conditional Formatting on Info Charts

taken from undelying Data Source
How to change an Info Chart feeding

Setting for Info Charts
Additional Properties dialog
Offers settings for following groups:

• General
• Plot Area
• Axes
• Legend
• Data Series
• Interaction
The Data Selection Dialog
The Data Selection Dialog allows

you to select single or multiple rows
or columns from the Data Source.
With that you can define different
charts from the same Data Source.

Info Chart Feeding Panel
Creating an Info Chart Feeding Panel component

 Drag the “Info Chart Feeding Panel” component into the canvas and assign an
Info Chart using the “Chart Reference” property
 The current chart feeding will be displayed
 When running the application, the user will be able to drag dimensions from
one feed to the next to customize the look of the chart
A trellis Info Chart with a Feeding Panel on its left

Chart vs. Info Chart
Main differences between Charts and Info Charts

 Extra Chart types, including Bullet, Stacked Dual Axis, Combination Dual Axis
 Missing Chart types: Waterfall chart, multi charts (replaced by trellis charts)
 Feeding panel only compatible with Info Charts
 More additional properties
 Conditional formatting coming directly from the BW query: set the “Conditional Formatting
Visible” property to true
 Dimensions can now be split into more than 2 axes. With the Chart component you could
assign only crosstab rows and columns. With the Info Chart component, each dimension
can be assigned a different axis independently.
 Changes to the query structure that do not add or remove measures or dimensions will
have no impact on the info chart, so the swap axis functionality has no effect on the Info
Chart.
Recommendation: Use Info Charts whenever possible

Navigation Panel
Navigation Panel
 New component to let end-users navigate
data via drag and drop (dimensions and
measures)
 Measures can be shown separately
 Simplified view (as a dimension list)
 The order of dimensions can be determined
in design time
 Quick access to dimensions and measures
via search bar
 Option to pause refresh
Hint:
Drag & Drop from Navigation Panel to
Crosstab has to be enabled in Application
Property

Filter Panel
The Filter Panel Component can be used for Filtering and Navigation
 Application Designer can decide to enable „Filter only“, „Navigation only“ or „Filter and Navigation“
To filter values the user can use the direct input option or the member selector option. This depends on
the spot the user clicks in Application Runtime.
Filter Panel with direct input option Filter Panel Filter Panel with member
selector option

Filter Line
Filter Line
 Horizontal filter area
 End-users can easily select filter criteria and
filter values
 Application designers can configure whether key
figures should be included in filter line
 Configuration by properties, no scripting effort is
required

Dimension Filter
More convenient to use filter panel for selecting data

 Member display could be defined with key, text or both
 On Submit event enables triggering interactions
 Dimension name could be hide or shown
 Ranges are able to be defined in addition to the multiple selection of members
 Defined ranges and selected members could be deleted, included or excluded
other Data Source(s)

filters are to be
applied to
Specifies the one

dimension to be
filtered
Design Time in the property sheet Runtime

Prompt handling
In the Prompts dialog box, application designers and application users set values for
prompts. For SAP NetWeaver BW data sources, prompts are defined as variables.
Design Studio generates a generic prompt screen if prompts are defined as mandatory and do
not have a valid default value in the Data Source or the Application is set to “Force prompts on
Startup”.
Settings in the Application Properties
Merge Prompts: true Merge Prompts: false

Lesson 4
Lesson 1
properties
Lesson 2 Lesson 5
Lesson 3
Lesson 6

Grid Layout
You use the grid layout component to group and order the content of your application
in a grid that is not displayed at runtime.
Designtime:
Runtime:

Pagebook
The Pagebook component enables the user to switch between the different views of an
application.
You group the components and contents of a view on a separate page.
The Pagebook only shows one page at time.
Define transition effect
Enable Page Indicator
Enable Swiping action
Page Indicator
for iOS like visualization

Tabstrip
You use the Tabstrip component to group and order the content of your application in tabs.
You can also use it to enable user interaction within the application. To do this you add a
script to the tabstrip On select property. The script is triggered when the user selects one of
the tabs on the tabstrip in the application.
With the Selected Tab Index Property you can

specify which Tab is displayed initially. This
Index starts with 0, that means that the first Tab
is Index = 0

Panel
You use the Panel component to group other components in your application. The panel
component is a very simple container component. The components nested in the Panel
are positioned relative to the Panel and not to the Application borders.
With the use of the CSS Style Property you can visually group the nested components
together e.g. with a border.
Application Outline
Panel – CSS Style Property

Popup
The popup component helps users to quickly enter information, perform configurations or
make selections. In addition, popups can also be useful for displaying more specific data for
a selected item displayed on the main page of the application. As the popup is a container
component, you can put any other component into the popup (for example, crosstab, button
or checkbox).

Image
Using the image component, you can enhance applications by adding images. Depending on
the Deployment Type the images are stored in different places.
The Image component offers properties

to maintain
 the Image
 the Hover Image
 the Click Image
 and the Opacity
Images can be changed dynamically via scripting to be able to “react” on various elements like
for example active filters.

Graphics and Icons Library
Graphics, Shapes and Icons Library

 Select from standard graphics and icons library
 Import custom icon library (.ttf file)
 Fully scalable
Settings
 Rectangular or circular shape
 Select icon and background colors
 Scaling factor

Text & Formatted Text View
You use the Text component to add text to The Formatted Text View component enables
your application. Text can be formatted with you to apply text formatting within one control.
the Style-Property. This will use one of the The Formatted Text View editor appears in the
predefined styles out of the selected theme Additional Properties panel.
of the application.

Multi language support
Multi language support

 Work with Design Studio
Applications in native language
 Design Time is still English, DS
Applications are fully translatable
 New component „text pool“ to add
translations centrally
This feature is available on BIP, NetWeaver and local mode.

Lesson 4
Lesson 1
properties
Lesson 2 Lesson 5
Lesson 3
Lesson 6

Data bound component properties
For easy data binding and cascading filter scenario

 No scripting required
 Bind dropdown boxes, list boxes etc. to master data (member lists)
 Bind text elements to measure values
 Bind CSS style to measure value conditions (e,g, for conditional highlighting)

Bind text component to cell value
You can easily display the value of a single cell in a Text component with the data
bound properties
1. Enable the Data Binding

 Select the Text property
 Click on the Binding-Icon
 Choose the Select Data icon
2. Define the binding target

 Select the Data Source
 Click in the cell you want to use
as source
 Click OK

Fill Listbox and define filtering
1. Enable the Data Binding
2. Define the Source settings 3. Define the Target settings

Lesson 4
Lesson 1
properties
Lesson 2 Lesson 5
Lesson 3
Lesson 6

When to use Scorecard Component
When do you use a Scorecard?

 The Scorecard component is designed for use in dashboards and reports with controlled visualization
content and restricted navigation possibilities.
 Scorecard is not recommended to be used in applications with dynamic data sources and data
sources with free multidimensional navigation (slice & dice).
How to use Scorecard?

 You can add a Scorecard analytic component to an analysis application to allow users to view the data as
highly customizable table with addition of micro charts in columns. Depending on how you configure the
Scorecard column properties, each column can display information in form of a text, image or charts.
Each column property can be connected to a selection of the assigned data source.

Scorecard Component Function Overview
Header & Column Customizing

 Select Data from Result Set
 Multi-line headers, merged header cells
 Custom column header texts
 Text Alignment
 Custom Column Formats
Rule-based Highlighting
 Shows exceptions from BW Query as
Trend/Status Icons, colored text or background
 Shows conditional formats in smart copied
Analysis Office Views
Micro Charts
 Variance and trend charts

Auto Generation of Scorecard
Auto Generation of Scorecard

 Easy to define
 Select dimensions that should be
included into Scorecard
 All key figures will be added into
auto-generated scorecard
Pay attention that the Auto Generation has only a “show case” character to speed up the initial creation.

Steps to create a Scorecard
1. add a Scorecard to the Application
2. assign a Datasource
4. define Columns and Group Headers
3. define the Row Scope
Choose the visualization type that fits

to the content of your column
See next slide for details…

Definition of Row Scope
The definition of the “Row Scope” property defines how many / how detailed your
data is presented in the Scorecard
Lets assume your Datasource shows the following drilldown
Defining the Row Scope generates the following Scorecard content

Up to Region  1 line for each Region  2 Rows
Up to Division  1 line for each combination of Division and Region  4 Rows
Up to Product  1 line for each combination of Division and Region and Product  6 Rows
All dimensions that are not part of the Row Scope can be used to create content within the colums
Example: If you take „Region“ into the Row Scope you get 2 Rows and can create columns on Divisons or Product level
e.g. a Bar Chart for each Division.

Lesson 4
Lesson 1
properties
Lesson 2 Lesson 5
Lesson 3
Lesson 6

Analysis & Design Studio
Creating Next Generation BI Apps
Tight interoperability between Analysis & Design Studio
Analysis Office
Mobile
Design Studio
Analysis OLAP (BIP 4.1) Desktop

Create applications from Analysis Office
Analysis Office offers 2 ways of interoperability

Smart copy Create Web Application
 this copies the navigation state  This creates a new application

of a single Data Source into the and transfers the whole workbook
clipboard
 The visualization is created
 Data Source is added in Design automatically and can be
Studio via „Smart Paste“ changed in Design Studio in a
separate step
 No visualization is created in
Design Studio automatically  Check the restrictions in the Note
sections

Create applications from Analysis OLAP
Analysis OLAP offers 1 way of interoperability

Create Web Application
 This creates a new application
and provides the workspace
completely or partially
 The visualization is created
automatically and can be
changed in Design Studio in a
separate step
 Created Application can be
optimized for Desktop or Mobile
usage

Export crosstab to Lumira
Export to Lumira
 End-user / analyst can export Crosstab
data as a Lumira file (.lums)
 Lumira file can be opened in SAP Lumira
desktop for further data manipulation,
exploration and visualization

Unit 3:
Define the layout of the application

Unit 3: Define the layout of the application
Lesson 1
Using standard & custom created
templates
Lesson 2
Working with themes and the
embedded CSS editor

Provided templates
Provided templates
 Various pre-built apps that can
be used out-of-the-box or as
customizable templates
 Supports rapid roll-out of self
service scenarios on BW &
HANA online data
 Supporting Universe data
sources
 Can be further enhanced,
customized or simply used as
blueprints by designers
 Interoperability with Standard
Analysis App

Ready to run: Generic Analysis
Includes Menu
Settings for charts
 Menu Filter Area
 Filter Area
 Navigation Area
 Setting Area for chart
 Data Area with different
views
 Action Area
Improvements
 Simplified Layout
 New Info Charts and
Feeding Component
 Drag & Drop Navigation Panel Action Area
 Custom Measures and Top N Filters

Ready to run: Online Composition
Includes Overview page

 Overview page to see all compositions
 Create, edit, open, share and delete
compositions
 New: Global Filters for composition
Global Filters
Menu
Smart Objects

Export to PDF
Ready to run: Data Exploration & Visualization App
Analyze data, and gain insight with

visualizations
• Filter data on the dimensions
• Full pivot table experience
• Visualize data with BW hierarchies
• Use standard context menu
• Use report-report interface / open doc
• Create different visualizations for story
composition
• Visualize several datasources and display
them in one story
Compose a story to share with others

• Save to the BI Platform with document level
security
• Share a PDF export of a story
• Share a URL link to the story

Templates: Help you create your own application
Includes
 Basic Layout Template
 Basic Analysis Layout Template
 Planning Layout Template
Menu
Filter Area
Spreadsheet
/Crosstab /Chart View
Navigation Panel
Templates: Create custom templates
Define your Template Folders

Tools > Preferences > Application Design > Application Templates
Export the Application you want to use as new Template

Application > Export as Template
Provide all necessary information
As a result you will find the newly

created Template in the Application > New Dialog

Unit 3: Define the layout of the application
Lesson 1
Using standard & custom created
templates
Lesson 2
Working with themes and the
embedded CSS editor

Themes
Platinum Blue Crystal
High Contrast Black Mobile
Recommendation: use Blue Crystal theme as basis for your applications

CSS code as property of component
Many components offer a CSS Style attribute. With that you can precisely define the
design of the component.

CSS as seperate file
Using and maintaining an external CSS file 1.
 Using custom CSS to adopt customer corporate identity

 Changing the look and feel possible for every standard component
 Assigning CSS documents to Design Studio application (1.)
 Maintain CSS document directly in embedded Editor (2.)
 Assign CSS class to the Design Studio component (3.)
2.
3.
Note: If you use this function, keep in mind that SAP does not guarantee that custom CSS stylesheet will work properly.
Unit 4:
Create advanced applications
using scripting techniques

Unit 4: Create advanced applications using scripting
techniques
Lesson 1 Lesson 5
Introducing the Script Editor Using global scripting variables
Lesson 2 Lesson 6
Define the navigation behavior of Using global script objects and
basic components with scripting formatter functions
Lesson 3
Lesson 7
Using local variables in script
Other scripting scenarios
functions
Lesson 4
Reading Data in Script

Comfortable Scripting Engine & Editor
Flexible definition of
interactions between
components
 JavaScript based command editor
 Easy-to-use scripting wizard
 Intuitive content assistance via
CRTL+SPACE
 Display live data for selection
 Build-in documentation for script API
 Automatic check for the correctness
of the scripting

Basic Assumptions
You write scripts in a true subset of the JavaScript standard
Why JavaScript?
 Can be executed both, on Browser and on Server.
 Relatively easy to learn
 Sufficiently powerful
Why a subset?
 Full JavaScript is quite complex
 No type support (see later)
 Some constructs can be dangerous (e.g. endless loops)
 Design Studio can validate all scripts
The scripts are executed on the Analysis Application Design Service (unlike JavaScript
that is executed in the Web browser)

Push Model
Definition – Push Model

 Scripts „push“ data to components
 This is different to data bound (BEx)-Components and to Dashboards formulas, where components “pull”
data from data sources.
Why – Push Model

 Clearer semantic
 Easier to understand in more complex scenarios

Statement Types
Statement Types
conditional
Assignment
call statements execution
Statement
statements
e.g. change the Chart Type of a chart IF xxx THEN xxx ELSE Define a new variable or assign
or set a filter for a dimension a value to an existing one
Basic syntax: var <variable> = <expression>;
<Component>.<Method>(<Arguments>); or
<variable> = <expression>;

How to write a call statement
The most frequently used commands are the call statements
The basic syntax for these commands is:
<Component>.<Method>(<Arguments>);
Which element should be What should be done with the Which details are needed to
influenced? element? do it?
DS_1 setFilter Dimension = 0Division
Filter Value = 01
APPLICATION openPromptDialog Width = 300
Height = 500
TABSTRIP_1 setSelectedTabIndex TabIndex = 1

Script editor – help functions
Automatic syntax check

The system checks the syntax of your script in the background. Whenever there is a mistake, you will see
an error marker on the left hand side and the bad code is underlined. You can hover over the error marker
or the underlined text to see the error message.
Display of additional information

When you hover over the script text with the mouse and keep the mouse pointer still, you see additional
information about the text below the mouse pointer. For example, if you hover over a data source alias
name, you see the corresponding query or query view data source. Or if you hover over a dimension, you
see its display name.

Script editor – help functions
Most important shortcut on the keyboard is: Ctrl + Space

 Intelligent proposal offering by content assistance
 Linked mode and value help for member selection

Type system
All programming languages have the concept of “Types”.

In Design Studio we have:
• Primitive Types
– Integer: 2, 8, 6+4
– String: “Hello”, “I’m” + “ here”
– Boolean: true, false, true && false, “a” == “a”, 1 != 2
• BI Types:
– Dimension, Member, Filter, MemberPresentation, ChartType, …
(example: CHART_1.setChartType(ChartType.PIE);)
Design Studio needs to know what type a parameter has.

It will try to convert whatever you write to the required type – or emit an error

How to specify filter values
DS_1.SetFilter(<dimension>, <filterselection>);
What you want so select What you specify
single member Internal key

“DE”
multiple single members array of internal keys
[“DE”, “US”]
interval JSON-format with "low" and "high“
{"low": "0", "high": "10"}
open range JSON-format with either "low" or "high“
{"high": "10"}
combination of multiple single Combine the above
members, intervals, and ranges ["0", { "low": "10", "high": "50"}, { "low": "100" } ]
hierarchy nodes prefix the internal, fully compounded format with

HIERARCHY_NODE/Node Type/
HIERARCHY_NODE/0HIER_NODE/ROOT

Script Validation
Each script is validated before it is executed. If an error is found, for example, in the
syntax, the script is not executed. Instead a log entry and a message are created and
displayed.
The log entry in the Error Log view contains detailed error messages for the script.
At runtime, the end user will see a message in the message view stating that there is a
problem in the script.

techniques
Lesson 1 Lesson 5
Lesson 2 Lesson 6
Lesson 3
Lesson 7
functions
Lesson 4

Button
Buttons enable the user to interact within the application. To do this you add a script to
the button's OnClick property.
The script is triggered when the user clicks the button in the application. You can insert any
text for the button label and add an icon.
Icon Text

Generic navigation components
Dropdown box
Dropdown box allows single select
List box
List box allows multiple select
Radio button group
Radio button allows single select
Checkbox group
Checkbox group allows multiple select

Understanding generic navigation components
(valid for: Dropdown Box, Listbox, Radio Button Group)
What the end user will see… What the Application Designer defines…
Step 1: Define the Items for the component (Items Property)
Option A: this can be done manually as direct input into the list
Option B: this can be done with data bound property
Option C: this can be done via scripting e.g. with the Datasource.getMemberList command
Step 2: Define the action that should be executed (OnSelect Property)

Understanding Generic Navigation Components
(valid for: Dropdown Box, Listbox, Radio Button Group)
Example Codings:
Step 1: Define the Items for the component (Items Property)
DROPDOWN_1.setItems(DS_1.
getMemberList("0DIVISION", MemberPresentation.INTERNAL_KEY, MemberDisplay.TEXT, 20, "ALL"));
Step 2: Define the action that should be

executed (OnSelect Property)
DS_1.setFilter("0DIVISION", DROPDOWN_1.getSelectedValue());

Checkbox
Checkboxes enable the user to interact within the application. To do this you add a script to
the On Click property of the checkbox component. The script is triggered when the user
activates the checkbox in the application. You can use any text for the checkbox.

Date Field
The date field component enables the user to select a date. To activate user interaction with
the date field, you need to add a script to the On Select property. The script is triggered when
the user picks a date in the date field or when the user enters a date manually at runtime.
Specifies the initial

date in the format
yyyymmdd.
Opens the script editor.

With this property, you can
enable user interaction
with the date field by
writing scripts.

Input Field
The input field enables the user to write user-specific content in the input field at runtime.
Specifies the initial value that

the application user can
overwrite during runtime.
Script for the button:

How to write conditional execution statements
The most frequently used commands are the conditional execution statements
The basic syntax for these commands is:

if ((expression1 == value1) || (expression2 == value2))
{if_statements;}
else
{else_statements;}
You can use the context sensitive help function to get the basic syntax created in your script.
Technically this is done via a scripting template. These templates can be maintained via
Tools > Preferences

techniques
Lesson 1 Lesson 5
Lesson 2 Lesson 6
Lesson 3
Lesson 7
functions
Lesson 4

What are Script Variables?
Script variables store expression results. They are useful, for example, for storing
intermediate results that are used repeatedly in a script.
Design Studio has two different types of variable:

 Local script variables
 Global script variables

Local Scripting Variables
Local script variables are script variables that can only be used in the script in which they
were defined, and not in any other scripts. To define a local script variable, open a script with
the Script Editor and add a line with the following format:
The type of the script variable is automatically determined by the type of the expression.
var <variable> = <expression>;
Example Code:
//use local variable for storing Incoming Orders EUR for the country Germany
var int_IntOrd = DS_1.getData("GUID", {"T_SOLD_TO__0COUNTRY": "DE"}).value);

Type Conversion
The script editor offers the CONVERT Function to convert types.

 Float  String
 Format String
 String  Float
 String  Int
 SubString
 StringLength
 IndexOf
 ReplaceAll
 urlEncode

Math functions
The script editor offers the Math Object with the following methods:
 abs  log
 acos  max
 asin  min
 atan  pow
 atan2  random
 ceil  round
 cos  sin
 exp  sqrt
 floor  tan

techniques
Lesson 1 Lesson 5
Lesson 2 Lesson 6
Lesson 3
Lesson 7
functions
Lesson 4

Reading Data from Data Source – Example
Especially in “Dashboard-Like” Applications it is important to read single bits of

information and write them directly where you need them.
read the language dependent

description of a dimension
read the unit of Revenue read the level of conditional formatting

measure and visualize and change color accordingly
it as icon
120 Mio
read the scaling factor and visualize it
read value
of a measure

Reading Data from Application – How to Do it
This shows you how to read a single value of your Application.
Lets assume you want to

read name of the Application
and write it into a textbox
This can be done with the Application.getInfo() command.

This command can return different results and you have to specify which one you need.
Parameter Description Datatype

name Name of the application. String
dateNow Current date in the user's locale. String
dateNowInternalFormat Current date in the format "YYYYMMDD". String
Example Code:
TEXT_1.setText(APPLICATION.getInfo().name);

Reading Data from Data Source – How to Do it
This shows you how to read a single value of your data source. Keep in mind that only
values that are within the view of the data source can be read.
Lets assume you want to

read the value of that cell
and write it into a textbox
This can be done with the DataSource.getData(measure, selection) command.

This command can return different results and you have to specify which one you need.
Parameter Description Datatype

formattedValue The scaling factor has been already applied to this value. This value also reflects the String
user locale and number settings of the Query Designer.
scalingFactor Scaling factor in powers of ten that has been applied to the value of this cell. Integer
unitOfMeasure Unit of measure of the value of this cell, for example, a currency. String
value Raw data value of this cell. The scaling factor has been already applied to this value. float
Example Code:
TEXT_1.setText(DS_1.getData(“GUID", {"T_SOLD_TO__0COUNTRY": "DE"}).formattedValue);

Reading Data from Data Source – Available Commands
To read single bits of information you have a variety of different commands.
DataSource. getData(measure, selection)

getDimensionText(dimension)
getInfo()
getFilterExt(dimension)
getConditionalFormatValue(measure, selection)
getStaticFilterText(dimension)
getVariableValueText(variable)
and many more…

techniques
Lesson 1 Lesson 5
Lesson 2 Lesson 6
Lesson 3
Lesson 7
functions
Lesson 4

Global Scripting Variables
Global variables can be defined as a property of the application.

They can be used as URL Parameters.
When you create a global script variable you specify

 Name
 Data Type,
 Default Value
 URL Parameter (true/false)
When you execute the Application you specify the URL parameter by adding
e.g. http://<<applicationURL>>&Xcurrency=USD

Business Case for URL Parameters
URL Parameters can for example be used to start other BI documents with predefined
filter or variable settings via the open document syntax.
http://........&Xmode=display
http://........&Xmode=navigation

techniques
Lesson 1 Lesson 5
Lesson 2 Lesson 6
Lesson 3
Lesson 7
functions
Lesson 4

Global Script Object - I
In the Technical Components folder, you will find the Global

Script Objects, which provides a grouping of global script
functions. On each global scripts object, you can create any
number of script functions.
Each script function has a configurable return type and can have any number of typed input
parameters.

Global Script Object - II
With Design Studio you have the possibility to

define global script objects to reuse scripting.
 To create a new global script object, right-
click on the folder Technical Components in
the Outline view and choose Create Child ->
Global Script Object. Rename via Properties
sheet.
 To create a new global script function, right-
click a global scripts object in the Outline
view and choose Create Global Script
Function.
 Enter the function name in the Create Script
Function dialog box and click OK. The
Create Script Function dialog box is
displayed again.
 You can now enter a description for the
function and enter the code for the global
script function. Click OK, when you have
finished the global script function. The
function is now displayed under the
corresponding global scripts object
Formatter functions
When you use data bound properties you can additionally use formatter funtions.
These are always part of a global script object.
Lets assume you write the value of a cell in a text component. The typical output would be
„22.147 EUR“
To change the standard output you can use a formatter function to get an output like that:
„The value is: 22.147 Euro“

techniques
Lesson 1 Lesson 5
Lesson 2 Lesson 6
Lesson 3
Lesson 7
functions
Lesson 4

Export to Excel
Enables the user to specify and export a crosstab from the SAP BusinessObjects
Design Studio into Microsoft Excel.
The following export file formats are
supported:
 CSV
 Microsoft Excel 2004 (.xls)
 Microsoft Excel 2007 (.xlsx)
Example Code:
APPLICATION.export(ExportType.EXCEL_xlsx, [CROSSTAB_1]);

There are 3 Export to PDF Types
Export to PDF
WYSIWYG Export to PDF

Screen Report Style
 Exports to PDF a screenshot  Exports Crosstab as a

of exactly what's on the screen rendered table including
at the time of print WYSIWYG exception and notification
Panel formatting and symbols.
 No hidden components are
printed  Wraps larges tables by a set
 Designer can pinpoint a list of
column
panels (Array) that
they wish to be exported as  Exports each component Chart
WYSIWYG to PDF or SDK to its own page full size
 Allows for more control over  Exports all meta data
what is exported i.e. exclude associated with query for
components component to the Header.
not required in PDF (dropdowns,
list boxes etc)
This feature is only available on BIP, NetWeaver and local mode, not HANA
Exporting to PDF overview
Exporting to PDF
 PDF as technical object needs to be added in the design time
With this new technical Object you can now refer to the PDF export
script as follows:
– PDF.exportApplicationScreen(); // WYSIWYG application
– PDF.exportPanelScreen(Panel); // WYSIWYG Panel
– PDF.exportApplication(); // PDF Export report style
 Conditional formatting of the crosstab is exported

Export configuration option:
– Page size
– Page Orientation
– Header and Footer with Text
– Images (e.g. Logo) can be defined in design time
– Display of Metadata
– Page Numbers

Context Menu enhancement
Enhanced context menu

 Custom entries can be added via properties
 Entries can be hidden via scripting

Personalization
Personalization
 The personalization feature is available at runtime
only
 Personalization allows user to save his/her own view
about the Design Studio application
 Personalization is always user specific and cant be
transferred from one user to another
 Every time personalization is set, that particular
analysis application state is overwritten by the last
personalization saved
 There is no scripting method to load personalization
 The following script methods apply to
personalization:
– State.setPersonalization();
– State.deletePersonalization();

Unit 5:
Optimize applications for
mobile devices

Unit 5: Optimize applications for mobile devices
Lesson 1
Accessing applications on mobile
devices
Lesson 2
Optimizing applications for mobile
devices

Integration into SAP Business Objects Mobile Solution
Convienient and unified user access for large mobile community:

 Download and access Design Studio applications via SAP Business Objects Mobile Solution
(native iOS application)
 Leverage the collaboration functionality (e.g annotation, SAP Jam…)
 Unified usability through SAP BI Mobile Solutions
 Enable large mobile community
Overview page on SAP BI Mobile Design Studio App

embedded within SAP BI Mobile
Assigning analysis applications to the mobile category
Before users can access analysis applications on a mobile device using the SAP BusinessObjects Mobile
solution, you need to assign the analysis applications to the “mobile” category on the BI platform.
1. In the BI launch pad, go to the folder that contains the analysis application that you want to assign to the
mobile category.
2. Select the analysis application, and click on the Categories in the context menu
The "Categories" dialog box appears.
3. Choose the “Mobile” category.
4. Click OK.

Integration into SAP NetWeaver Portal Mobile
Mobile optimized logon screen to

SAP NetWeaver Portal
Launcher View to open Documents

or Applications
Design Studio Application

on NetWeaver Portal Mobile

QR code scan for simple deployment on iPad/iPhone
Rapid deployment of mobile applications. For Testing only!

 Using QR Code to send to device
 QR code represents application URL
 Scan with QR Code Scanner on mobile device
Application Designtime Runtime on iPad

Unit 5: Optimize applications for mobile devices
Lesson 1
Accessing applications on mobile
devices
Lesson 2
Optimizing applications for mobile
devices

Ensure mobile like navigation behavior for crosstabs
The crosstab component offers 2 different scrolling behaviors.
 scrolling is row-based
 not „mobile-like“
 scrolling is Pixel-based
 „mobile-like“
 not suitable for large data
sets
 Data is cropped after
specified number of rows or
columns

Ensure mobile like navigation behavior for dimension filter
The dimension filter component offers 2 different layout styles.
Desktop Style for Popup = false Desktop Style for Popup = true

Optimize page caching for Pagebook component
Keep the datavolume that needs to be transfered „as small as possible“ to ensure
an acceptable loading behaviour. Especially when using a mobile network connection.
Settings for the Pagebook component
Value Which Pages get cached? Recommendation
None No page high data volume

scenarios
All Every page low data volume
scenarios
Adjacent The previous and the next page

SAP recommendations for iPhone applications
When creating mobile analysis applications for an iPhone, note the

following SAP recommendations:
• Keep the applications simple and do not use too many components.
• Only create applications based on the predefined templates for
iPhones (do not use the blank template for iPhones).
• Do not use crosstab components for iPhone applications as this is not
supported by SAP.
• Only design iPhone applications in portrait format.
Landscape orientation is not supported when running the application
in the SAP BusinessObjects Mobile solution.

Appendix
Feature Dependencies

Dependencies on Platform Deployment (1/4)
Features prior to 1.6
Feature Local Mode BIP NW HANA

Geo Maps x x x -
Export to PDF & Printing x x x -
Standard Analysis App x x x -
Filter Line x x x -
Navigation Panel x x x x
Chart Type Picker x x x -
Data Exploration & Visualization App x x - -
Crosstab Enhancements x x x x
Offline Click-Through x x x -
Export to Lumira x x x -
(but not for BI Mobile)
Query Parallelization x x - (x)

Unmerge Variables x x x (x)

Features prior to 1.6

Data Bound Component Properties x x x -
Context Menu x x x x (limited)
Bookmarking x x x -
Bookmark Administration on BI Platform - x - -
Multiple Language Support - x x -
(BIP >= 4.1 SP6)
Enhanced Data Connectivity (HANA) x x - x (design-time)
Enhanced Data Connectivity (UNX) - x - -
Export and Import wizard x x x x
SDK Enhancements x x x -
Commentary Solution based on BW-IP x x x -
Attribute Planning based on BW-IP x x x -
Online Composition App x x x -

New 1.6 Features

Drag & Drop to Crosstab x x x -
Custom Measures, Top N filters, x x x -
Icon, Shapes and Graphics Library x x x -
Scorecard x x x -
Spreadsheet x x x -
Right-to-Left support x x x -
Info Chart x x x -
Chart Feeding Configurator x x x -
UNX Enhancements - x - -
CSV Data Source / Rapid Prototyping with CSV x - - -
Embedded CSS Editor x x x -

Global Filters in Online Composition x x x -

New 1.6 Features

Standard Apps x x x -
New Layout Templates x x x -
Tree, Timer x x x -
Fiori Component Library x x x -
Context Menu Enhancements x x x -
PDF & Excel Export Enhancements x x x -
Improved Data Binding x x x -
SDK Enhancements x x x -

Dependencies on Data Source
New 1.6 Features
Feature BW HANA UNX CSV

Scorecard Conditional Formatting x (x)* (x)* (x)*
Info Chart Conditional Formatting x (limited)* - (planned)* - (planned)* - (planned)*
Cascading Filters x x - (planned) - (planned)
Top N Filters x (x)** - -
Calculations at Runtime x x - -
Dynamic Calculations at Runtime x - x x
Generic Analysis Template x x - -
Data Discovery & Visualization Template x x - -
Online Composition Template x x - -
Spreadsheet x)*** x)*** x)*** x)***
)* For data sources other than BW, scorecard conditional formatting is limited to single values, value ranges are not yet supported. It is planned to lift those limitations in a
future release and allow the definition of more sophisticated rules within Design Studio. The same is true for the Info Chart (including support for HANA, UNX and CSV).
)** Supported with new, http-based HANA connector (single Top N Filter on flat dimensions)
)*** Data Entry / Copy & Paste only available in planning applications with BW-IP / BPC 10.1

Dependencies on Component Library
Feature Common Fiori

(SAPUI5) (SAPUI5.m)
Most Components (exceptions listed below) x x
Info Chart x x
Chart x -
Filter Line x - (planned)*
Split Cell Container x - (planned)*
Popup x - (planned)*
Action Sheet - x
Self-Service Templates x - (planned)**
Right-to-Left Support - x
)* Equivalent components planned in Fiori Library for: Filter Line, Split Cell Container (enabling Online Composition), Popup
)** It is planned to provide equivalent Fiori Library versions of the Templates for Standard Analysis, Data Exploration and Online Composition (self-service templates)

© 2015 SAP SE oder ein SAP-Konzernunternehmen.
Alle Rechte vorbehalten.
Weitergabe und Vervielfältigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher Form auch immer, ohne die
ausdrückliche schriftliche Genehmigung durch SAP SE oder ein SAP-Konzernunternehmen nicht gestattet.
SAP und andere in diesem Dokument erwähnte Produkte und Dienstleistungen von SAP sowie die dazugehörigen Logos sind Marken oder
eingetragene Marken der SAP SE (oder von einem SAP-Konzernunternehmen) in Deutschland und verschiedenen anderen Ländern weltweit.
Weitere Hinweise und Informationen zum Markenrecht finden Sie unter http://global.sap.com/corporate-de/legal/copyright/index.epx.
Die von SAP SE oder deren Vertriebsfirmen angebotenen Softwareprodukte können Softwarekomponenten auch anderer Softwarehersteller enthalten.
Produkte können länderspezifische Unterschiede aufweisen.
Die vorliegenden Unterlagen werden von der SAP SE oder einem SAP-Konzernunternehmen bereitgestellt und dienen ausschließlich zu Informations-
zwecken. Die SAP SE oder ihre Konzernunternehmen übernehmen keinerlei Haftung oder Gewährleistung für Fehler oder Unvollständigkeiten in
dieser Publikation. Die SAP SE oder ein SAP-Konzernunternehmen steht lediglich für Produkte und Dienstleistungen nach der Maßgabe ein, die in der
Vereinbarung über die jeweiligen Produkte und Dienstleistungen ausdrücklich geregelt ist. Keine der hierin enthaltenen Informationen ist als zusätzliche
Garantie zu interpretieren.
Insbesondere sind die SAP SE oder ihre Konzernunternehmen in keiner Weise verpflichtet, in dieser Publikation oder einer zugehörigen Präsentation
dargestellte Geschäftsabläufe zu verfolgen oder hierin wiedergegebene Funktionen zu entwickeln oder zu veröffentlichen. Diese Publikation oder
eine zugehörige Präsentation, die Strategie und etwaige künftige Entwicklungen, Produkte und/oder Plattformen der SAP SE oder ihrer Konzern-
unternehmen können von der SAP SE oder ihren Konzernunternehmen jederzeit und ohne Angabe von Gründen unangekündigt geändert werden.
Die in dieser Publikation enthaltenen Informationen stellen keine Zusage, kein Versprechen und keine rechtliche Verpflichtung zur Lieferung von
Material, Code oder Funktionen dar. Sämtliche vorausschauenden Aussagen unterliegen unterschiedlichen Risiken und Unsicherheiten, durch die
die tatsächlichen Ergebnisse von den Erwartungen abweichen können. Die vorausschauenden Aussagen geben die Sicht zu dem Zeitpunkt wieder,
zu dem sie getätigt wurden. Dem Leser wird empfohlen, diesen Aussagen kein übertriebenes Vertrauen zu schenken und sich bei Kaufentscheidungen
nicht auf sie zu stützen.

© 2015 SAP SE or an SAP affiliate company.
All rights reserved.
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an
SAP affiliate company.
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE
(or an SAP affiliate company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional
trademark information and notices.
Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors.
National product specifications may vary.
These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind,
and SAP SE or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or
SAP affiliate company products and services are those that are set forth in the express warranty statements accompanying such products and
services, if any. Nothing herein should be construed as constituting an additional warranty.
In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related
presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated
companies’ strategy and possible future developments, products, and/or platform directions and functionality are all subject to change and may be
changed by SAP SE or its affiliated companies at any time for any reason without notice. The information in this document is not a commitment,
promise, or legal obligation to deliver any material, code, or functionality. All forward-looking statements are subject to various risks and uncertainties
that could cause actual results to differ materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking
statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.

BOD310 EN Col06 FV Show

Uploaded by

Copyright:

Available Formats

BOD310 EN Col06 FV Show

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

BOD310 EN Col06 FV Show

Uploaded by

Copyright:

Available Formats

BOD310

Design Studio 1.6 Basic Training

© 2015 SAP SE or an SAP affiliate company. All rights reserved.

Target Group Project team members

Learning Objectives Understand the positioning and architecture

© 2015 SAP SE or an SAP affiliate company. All rights reserved

© 2015 SAP SE or an SAP affiliate company. All rights reserved

© 2015 SAP SE or an SAP affiliate company. All rights reserved.

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Standard Apps for

State of the art HTML5

Rapid Prototyping with

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Discovery & Lumira

Common platform services

Design Studio design tool (Eclipse)

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Consumer Designer BI Platform

BW HANA UNX Data sources

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Consumer Designer SAP NetWeaver

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Consumer Designer HANA Native

Information SAP HANA Platform

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Designer Local mode

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Platform Strategy for SAP BusinessObjects Design Studio

© 2015 SAP SE or an SAP affiliate company. All rights reserved

© 2015 SAP SE or an SAP affiliate company. All rights reserved

© 2015 SAP SE or an SAP affiliate company. All rights reserved.

© 2015 SAP SE or an SAP affiliate company. All rights reserved

 With Getting Started you can watch most recent tutorials.

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Create a new Application via

Deployment Storage Location

© 2015 SAP SE or an SAP affiliate company. All rights reserved

1. Enter a unique name for your application in

2. Choose the rendering type for the

3. Choose the template you want to use for your 3

© 2015 SAP SE or an SAP affiliate company. All rights reserved

© 2015 SAP SE or an SAP affiliate company. All rights reserved

BW System HANA System Universe csv

 Query  Analytic view  Relational .UNX  CSV Data

© 2015 SAP SE or an SAP affiliate company. All rights reserved

There are several ways to create a new Data Source…

 In the Application menu choose > Add Data Source

 Use the interoperability features from Analysis Office or Analysis OLAP

© 2015 SAP SE or an SAP affiliate company. All rights reserved

© 2015 SAP SE or an SAP affiliate company. All rights reserved

In the Components view, click a component:

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Left Margin Width Right Margin

 Each component is always bound to its surrounding borders

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Comfortable align and distribute components in layout

Aligned Left Distribute Horizontally

© 2015 SAP SE or an SAP affiliate company. All rights reserved

There are several ways to assign a data source to a component: