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
Create script free applications
mobile devices

Unit 3
Define the layout of the application

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

 Unit 1:
Positioning & Architecture

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

Unit 1:Positioning & Architecture

Lesson 1
Tool Positioning

Lesson 2
Architecture

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

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

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

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)
© 2015 SAP SE or an SAP affiliate company. All rights reserved
Unit 1:Positioning & Architecture

Lesson 1
Tool Positioning

Lesson 2
Architecture

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

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

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

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

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

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)

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

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)

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

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.

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

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.

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

 Unit 2:
Create script free applications

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

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
Create script free applications
Understanding the interoperability
using container components
between the BI clients
and change the look and feel

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

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.

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

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

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

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

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

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

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

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

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

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

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

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)

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

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.

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

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“

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

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

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

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

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

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
Create script free applications
Understanding the interoperability
using container components
between the BI clients
and change the look and feel

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

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.

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

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

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

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.

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

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

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

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.

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

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

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

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

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

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

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

 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

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

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

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

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

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

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

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

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
Create script free applications
Understanding the interoperability
using container components
between the BI clients
and change the look and feel

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

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:

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

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

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

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

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

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

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

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).

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

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.

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

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

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

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.

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

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.

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

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
Create script free applications
Understanding the interoperability
using container components
between the BI clients
and change the look and feel

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

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)

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

Data bound component properties
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

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

Data bound component properties
Fill Listbox and define filtering

1. Enable the Data Binding

2. Define the Source settings 3. Define the Target settings

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

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
Create script free applications
Understanding the interoperability
using container components
between the BI clients
and change the look and feel

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

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.

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

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

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

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.

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

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…

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

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.

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

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
Create script free applications
Understanding the interoperability
using container components
between the BI clients
and change the look and feel

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

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

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

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

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

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

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

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

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

 Unit 3:
Define the layout of the application

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

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

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

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

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

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

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

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

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

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

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

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
© 2015 SAP SE or an SAP affiliate company. All rights reserved
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

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

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

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

Themes

Platinum Blue Crystal

High Contrast Black Mobile

Recommendation: use Blue Crystal theme as basis for your applications

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

CSS code as property of component

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

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

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.
© 2015 SAP SE or an SAP affiliate company. All rights reserved
 Unit 4:
Create advanced applications
using scripting techniques

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

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

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

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

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

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)

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

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

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

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>;

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

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

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

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.

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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)

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

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

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

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.

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

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.

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

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:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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…

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

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

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

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

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

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

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

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

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

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.

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

 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
© 2015 SAP SE or an SAP affiliate company. All rights reserved
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“

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

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

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

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]);

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

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
© 2015 SAP SE or an SAP affiliate company. All rights reserved
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

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

Context Menu enhancement

Enhanced context menu

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

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

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

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

 Unit 5:
Optimize applications for
mobile devices

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

Unit 5: Optimize applications for mobile devices

Lesson 1
Accessing applications on mobile
devices

Lesson 2
Optimizing applications for mobile
devices

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

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
© 2015 SAP SE or an SAP affiliate company. All rights reserved
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.

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

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

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

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

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

Unit 5: Optimize applications for mobile devices

Lesson 1
Accessing applications on mobile
devices

Lesson 2
Optimizing applications for mobile
devices

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

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

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

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

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

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

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

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.

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

 Appendix
Feature Dependencies

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

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)

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

Dependencies on Platform Deployment (2/4)
Features prior to 1.6

Feature Local Mode BIP NW HANA

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 -

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

Dependencies on Platform Deployment (3/4)
New 1.6 Features

Feature Local Mode BIP NW HANA

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 -

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

Dependencies on Platform Deployment (4/4)
New 1.6 Features

Feature Local Mode BIP NW HANA

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 -

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

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

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

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 or an SAP affiliate company. All rights reserved

© 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

© 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.

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