BOD410 - EN - Col17 SAP Lumira Designer - Basic

Download as pdf or txt
Download as pdf or txt
You are on page 1of 121

BOD410

SAP Lumira Designer - Basic


Training

.
.
PARTICIPANT HANDBOOK
INSTRUCTOR-LED TRAINING
.
Course Version: 17
Course Duration: 5 Day(s)
e-book Duration: 5 Hours 10 Minutes
Material Number: 50155684
SAP Copyrights, Trademarks and
Disclaimers

© 2020 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 may have been machine translated and may contain grammatical errors or
inaccuracies.
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.

© Copyright. All rights reserved. iii


Typographic Conventions

American English is the standard used in this handbook.


The following typographic conventions are also used.

This information is displayed in the instructor’s presentation

Demonstration

Procedure

Warning or Caution

Hint

Related or Additional Information

Facilitated Discussion

User interface control Example text

Window title Example text

© Copyright. All rights reserved. iv


Contents

vii Course Overview

1 Unit 1: Positioning and Architecture

2 Lesson: Describing the positioning of SAP Lumira


4 Lesson: Describing the Architecture of SAP Lumira, Designer Edition

6 Unit 2: Creating an Application

8 Lesson: Understanding and Using the Format LUMX


12 Lesson: Creating an Application with Online Data Access
17 Lesson: Using a Data Source with Data Acquisition
20 Lesson: Creating a Basic Application
27 Lesson: Using Filter Components
33 Lesson: Using Data Bound Component Properties
36 Lesson: Using Scorecards
39 Lesson: Using Structural Elements for Design
45 Lesson: Creating the Simple Map Component Presentation
49 Lesson: Using Composites
53 Lesson: Describing Interoperability Between BI Clients

59 Unit 3: Defining Layouts and Formats

60 Lesson: Using Standard and Custom Templates


64 Lesson: Working with Themes, CSS Formatting, and the Embedded
CSS Editor
67 Lesson: Using Conditional Formatting

71 Unit 4: Advanced Design Techniques

73 Lesson: Describing the Script Editor


78 Lesson: Defining the Navigation Behavior of Basic Components by
Scripting
83 Lesson: Using Conditional Statement in Scripts
84 Lesson: Using Metadata and Single Values in Documents
87 Lesson: Using Variables in Scripting
91 Lesson: Using Keyboard Shortcuts
93 Lesson: Outling Export Scenarios
97 Lesson: Using Action Sheets
100 Lesson: Describing Commentary Functionality

© Copyright. All rights reserved. v


103 Unit 5: Optimizing Applications on Mobile Devices

104 Lesson: Accessing Application on Mobile Devices


107 Lesson: Using the Adaptive Layout Container
110 Lesson: Using Movable Components
112 Lesson: Optimizing Components for Mobile Devices

© Copyright. All rights reserved. vi


Course Overview

TARGET AUDIENCE
This course is intended for the following audiences:

Application Consultant

Development Consultant

Technology Consultant

Business User

© Copyright. All rights reserved. vii


© Copyright. All rights reserved. viii
UNIT 1 Positioning and
Architecture

Lesson 1
Describing the positioning of SAP Lumira 2

Lesson 2
Describing the Architecture of SAP Lumira, Designer Edition 4

UNIT OBJECTIVES

Describe the positioning of SAP Lumira

Describe the architecture of SAP Lumira, designer edition

© Copyright. All rights reserved. 1


Unit 1
Lesson 1
Describing the positioning of SAP Lumira

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Describe the positioning of SAP Lumira

Overview and Positioning

Figure 1: Convergence of the SAP BI Client Portfolio

Figure 2: Convergence of SAP Lumira and SAP BusinessObjects Design Studio

The convergence of SAP BusinessObjects Lumira and SAP BusinessObjects Design Studio,
has the following benefits:

© Copyright. All rights reserved. 2


Lesson: Describing the positioning of SAP Lumira

Promotes business-user visualizations to enterprise dashboards.

Supports changing requirements, without a tool switch.

Improves ease-of-use, driving broad adoption with improved Discovery UX.

Supports BW online analysis in SAP Lumira Discovery (formerly SAP BusinessObjects


Lumira).

Supports offline applications in SAP Lumira Designer (formerly SAP BusinessObjects


Design Studio).

Combines server-side add-ons, and reduces IT administration cost.

Respects existing customer investments in Design Studio and Lumira.

Figure 3: Overview and Positioning

SAP Lumira 2.x is one tool, with two combinable user interfaces.

LESSON SUMMARY
You should now be able to:

Describe the positioning of SAP Lumira

© Copyright. All rights reserved. 3


Unit 1
Lesson 2
Describing the Architecture of SAP Lumira,
Designer Edition

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Describe the architecture of SAP Lumira, designer edition

Architecture

Figure 4: Architecture Overview

Figure 5: Architecture in Detail

SAP decided to streamline the platform strategy for SAP Lumira Designer for the following
reasons:

© Copyright. All rights reserved. 4


Lesson: Describing the Architecture of SAP Lumira, Designer Edition

To address customer issues about platform strategy.

To address customer issues about supported features on different platforms.

To accelerate the delivery of new product capabilities.

Going forward, SAP intends to focus on SAP Lumira Designer investments on the BI platform.
We recommend that all customers deploy SAP Lumira Designer on the BI platform.
SAP NetWeaver and SAP HANA deployments only support a minimal feature scope. New
investments are not planned.

LESSON SUMMARY
You should now be able to:

Describe the architecture of SAP Lumira, designer edition

© Copyright. All rights reserved. 5


UNIT 2 Creating an Application

Lesson 1
Understanding and Using the Format LUMX 8

Lesson 2
Creating an Application with Online Data Access 12

Lesson 3
Using a Data Source with Data Acquisition 17

Lesson 4
Creating a Basic Application 20

Lesson 5
Using Filter Components 27

Lesson 6
Using Data Bound Component Properties 33

Lesson 7
Using Scorecards 36

Lesson 8
Using Structural Elements for Design 39

Lesson 9
Creating the Simple Map Component Presentation 45

Lesson 10
Using Composites 49

Lesson 11
Describing Interoperability Between BI Clients 53

© Copyright. All rights reserved. 6


UNIT OBJECTIVES

Understand and use the format LUMX

Create an application

Use a data source with data acquisition

Create a script free basic application

Use filter components to enable user interaction

Use basic components with data bound component properties

Use scorecard components

Use structural elements for design

Create s simple map component presentation

Use composites

Describe the interoperability between BI Clients

© Copyright. All rights reserved. 7


Unit 2
Lesson 1
Understanding and Using the Format LUMX

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Understand and use the format LUMX

Overview and Positioning

Figure 6: SAP Lumira Designer: Modes

SAP Lumira Documents mode is the default mode of SAP Lumira Designer. It can be
considered as the 2.x mode. In this mode, you can create new applications to use the 2.x
features, such as composites and bookmarks. This mode can handle both local documents
and documents stored on the BI platform.
Note that, as in SAP Lumira Designer, local documents are meant for demo purposes only.
Store documents meant for productive use on the BI platform.
If you have used SAP BusinessObjects Design Studio before, you are familiar with BI Platform
mode (legacy) and Local mode (legacy). In SAP Lumira Designer, you can consider those
modes as the design-studio-compatibility modes.
You work with these modes just as you would in SAP BusinessObjects Design Studio. The only
exception is that you cannot create new applications using New or Save As. As a workaround,
you can create copies of SAP BusinessObjects Design Studio applications in the BI
Launchpad. You can open, edit, and save existing SAP BusinessObjects Design Studio
applications in these modes.
You need these modes as a starting point for a conversion of existing SAP BusinessObjects
Design Studio objects.

© Copyright. All rights reserved. 8


Lesson: Understanding and Using the Format LUMX

Figure 7: SAP Lumira Document Content Types (LUMX Files)

In SAP Lumira Designer, users can create applications and composites. Multiple applications
and multiple composites can be created within one LUMX file.
A LUMX file created in SAP Lumira Discovery contains one or multiple stories and data sets
(for example, acquired Microsoft Excel files). Since data sets can be shared between stories in
SAP Lumira Discovery, they are not contained within a story element. Instead, they are stored
as root level objects in the LUMX file. They are available as offline data sources in SAP Lumira
Designer.
LUMX files, regardless of their content, are the entities that are exposed to the BI platform
and its users. Administrators secure SAP Lumira documents by defining user authorizations
for LUMX files in BI Launchpad folders.

Figure 8: SAP Lumira Designer - Documents View 1

One of the significant changes for users of SAP BusinessObjects Design Studio, is the new
Documents view in SAP Lumira Designer. This view is only available in Documents mode. In
this new mode, you can handle both local documents and documents on the BI platform.
Documents created in the local file system appear under the Local Documents folder node in
the figure, SAP Lumira Designer - Documents View 1. However, local documents are meant
for non-productive purposes only. For example, if you want to test a feature of SAP Lumira
Designer, or if you want to create a demo application that you do not need to share with other
users. In a default installation, the local documents folder is located as follows: C:\Users
\ <userid> \Documents\SAP Lumira Documents
You would create documents that are meant to be used by multiple users on the BI platform.
Those documents appear under the BI Platform Documents folder node in the figure, SAP
Lumira Designer - Documents View 1.

Note:
In SAP Lumira Designer, make sure that you create a document that is meant for
productive use on the BI platform from the very beginning.

© Copyright. All rights reserved. 9


Unit 2: Creating an Application

Figure 9: SAP Lumira Designer - Documents View 2

In the figure, SAP Lumira Designer - Documents View 2, you can see the Create Document
option and the Download Documents option.
The Create Document option allows you to create a new, empty document (LUMX file) on the
BI platform.
The Download Documents option allows you to open an existing LUMX file from the BI
Launchpad folders. Any documents that you download from the BI platform appears under
the BI Platform Documents folder node. They are kept by the designer component of SAP
Lumira as local copies. These local copies are not to be confused with the documents under
the Local Documents folder node.
SAP Lumira Designer also remembers the original location on the BI platform (BI Launchpad
folder), and ensures synchronization with the BI platform. SAP Lumira Designer edition
checks the state of the local copy against the state on the BI platform, to determine whether
they are in sync. Therefore, it is a good idea to remove documents from the client if you know
they are not being worked on.

Figure 10: SAP Lumira Designer - Documents View 3

To edit a document in SAP Lumira Designer, you need to open it. To do so, right-click the
document, and choose Open. You can recognize open documents by the dark font. While
documents that are not open are displayed in grey font.
When opening a document, SAP Lumira Designer reads all metadata, detects dependencies,
and loads acquired data from discovery documents. It also performs a number of other tasks,
which can be time consuming. This is the reason why not all documents under the BI Platform
Documents and Local Documents folder node are automatically opened by default.
Once you start editing the document in SAP Lumira Designer, an asterisk (*) appears in front
of the document name. This indicates that the local copy is out-of-sync with the version on

© Copyright. All rights reserved. 10


Lesson: Understanding and Using the Format LUMX

the BI platform. The same indicator appears if someone else modifies the version on the
server. In case of conflicts between local and server changes, a merge dialog appears to help
to resolve the conflicts.

Figure 11: Defining the Default Application

In the figure, Defining the Default Application, you see the open LUMX document: Global
Fashion Material Trend Analysis.
The document contains one SAP Lumira Discovery component story: Story -01. As well as two
SAP Lumira Designer component applications: APPLICATION_01 and APPLICATION_02.
You need to define which of these three executable elements should be displayed when an
end user opens the LUMX document from the BI Launchpad. To do this, define the default
application in the context menu of the document itself.
If you use the OpenDocument functionality of the BI Platform, you can add the URL parameter
&APP_TO_LAUNCH= <applicationname> to the URL of the LUMX document to start a non-
default application.

LESSON SUMMARY
You should now be able to:

Understand and use the format LUMX

© Copyright. All rights reserved. 11


Unit 2
Lesson 2
Creating an Application with Online Data
Access

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Create an application

Application Creation with Online Data Access

Figure 12: Welcome Page

The figure, Welcome Page, shows the sections Getting Started, Create New, Recently-Used,
and Useful Links.
In Getting Started, you can watch recent tutorials.
In Create New, you can create a new application.
In Recently-Used, you can directly open applications or composites you have worked on.
In Useful Links, you can open related public resources.

Figure 13: Create an SAP Lumira Designer Application

© Copyright. All rights reserved. 12


Lesson: Creating an Application with Online Data Access

Figure 14: How to Use the New Application Dialog

Figure 15: Define and Design the Application: Main Screen Elements

SAP Lumira Designer has the following main screen elements:

Documents

Components

Outline

Layout

Properties

You can also add the following additional views:

Additional Properties

Script Problems

Search Results

Error Log

© Copyright. All rights reserved. 13


Unit 2: Creating an Application

Figure 16: Sources for Online Data Access

Restrictions for universes as data sources are as follows:

Supported Platform:
SAP Lumira Designer only supports universe access as of BI platform 4.2.
Supported Universe Types:
SAP Lumira Designer supports the following universe types:

Relational universes

Single-source universes

Multi-source relational universes

Maximum Result Set:


The result set has a fixed limit of 20.000 rows, or 200.000 data cells. If either limit is
exceeded, no data is displayed.
Retention Policy:
In SAP ESP, or SAP HANA SDS, a topic is either a stream or a window.
If the topic you select is a stream, a Text field displays. You are required to specify the
retention policy. This option allows you to specify the maximum number of rows that the
chart or info chart displays. If a new event occurs when the chart is already displaying its
maximum number of rows, the oldest row is deleted to make room.
If the topic you select is a window, the retention policy text field does not appear. SAP
ESP or SAP HANA SDS handles the retention policy of windows.

How to Create a New Data Source


There are several ways to create a new data source:

1. In the Application menu, choose Add Data Source.

2. In the Outline tab of the design tool, right-click Data Sources, and choose New.

3. Use Copy and Paste from another Design Studio application, or within an application.

© Copyright. All rights reserved. 14


Lesson: Creating an Application with Online Data Access

4. Use the interoperability features from SAP BusinessObjects Analysis for Microsoft Office
or SAP Lumira Discovery.

Figure 17: Initial View Editor Capabilities

The Initial View dialog 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 and columns.

The order of dimensions.

Measures displayed in the result set.

Dimensions in the background filter.

For each measure, you can change the following:

The number of decimal places displayed.

The scaling factor used.

How totals are calculated.

The sorting order.

For each dimension, you can change the following:

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.

© Copyright. All rights reserved. 15


Unit 2: Creating an Application

The member presentation (text, key, text/key, key/text).

The totals display mode (show, hide, hide if only one member).

Figure 18: Initial View: Using Hierarchies

The Initial View dialog allows you to use predefined hierarchies. Hierarchies must be
activated. The Initial view assistant cannot initiate hierarchies.
Activate hierarchies provide the following options:

You can expand hierarchies to selectable level.

You can use hierarchies to filter.

Figure 19: Adding Components to an Application

In the Components view, click a component, and drag-and-drop it into the preview area.
Alternatively, drag-and-drop the component into the Layout folder of the Outline view.

LESSON SUMMARY
You should now be able to:

Create an application

© Copyright. All rights reserved. 16


Unit 2
Lesson 3
Using a Data Source with Data Acquisition

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Use a data source with data acquisition

Data Source Usage with Data Acquisition

Figure 20: Data Preparation

SAP Lumira Discovery allows you to change and work with imported data from different
sources.
You can import data from SAP Business Warehouse, add new data, and use the imported
data for calculating or aggregating functions.
SAP Lumira Discovery can also be used to merge data from different sources.
The new dataset can be used by all tools of the SAP Lumira family. This allows the designer
component of SAP Lumira to access the same information level as the discovery component.

Hint:
This can only be done with imported data. There is no live data support for that
kind of data manipulation.

© Copyright. All rights reserved. 17


Unit 2: Creating an Application

Figure 21: DataView

Upon acquisition, SAP Lumira Discovery converts the data into a flat file structure (rows and
columns). This makes it easier to combine data across multiple sources.
Once you complete the data acquisition, select the Data View option.

Figure 22: Modification

After changing and setting the data configuration, the changes can be used further.
This data source is now ready to be used in the discovery edition, but can also be exported to
the designer component, using the same .lumx document.

Figure 23: Data Implementation (Acquirement)

After saving the document, the lumx file contains data about changes to the data source.

© Copyright. All rights reserved. 18


Lesson: Using a Data Source with Data Acquisition

After opening the same document, SAP Lumira Designer can recycle all data about the used
data set. The old data source, from SAP Lumira Discovery can now be part of a new
application in SAP Lumira Designer.
In a new application in SAP Lumira Designer, the reuse of data from the data manipulation
tool is called an internal data acquirement solution in SAP Lumira 2.x.
Data can be prepared and further used in the discovery edition.

Figure 24: Dataset Use: Complete Acquisition

Figure 25: Use of an acquired DataSet

LESSON SUMMARY
You should now be able to:

Use a data source with data acquisition

© Copyright. All rights reserved. 19


Unit 2
Lesson 4
Creating a Basic Application

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Create a script free basic application

Script-Free Basic Application Creation

Figure 26: Components Overview

Table components, such as crosstabs, help you to visualize your data. After you have dragged
and dropped a crosstab into the layout editor, the component initially displays a placeholder
waiting for data from your individual data source.
Once you assign a data source to the crosstab, it displays the data of the data source.
The Chart Components folder contains a number of components with different functions.
Components, such as Chart, help you to visualize aggregated data. Components, such as the
Chart Feeding panel or the Chart Type Picker, help you to navigate through the possibilities
that the chart components have granted. It helps you to customize components in your
application.
The Basic Components folder contains a variety of components with different functions. Filter
components, such as Dropdown Box, Radio Button, and Checkbox, are used to select or filter
data, and thus enable user interaction at runtime.
Components, such as Button and Image, are used to enable navigation. Whereas components
such as 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.

© Copyright. All rights reserved. 20


Lesson: Creating a Basic Application

Figure 27: Using a Table Component: Crosstab

The application designer can choose to enable or disable navigation functions, such as
hierarchical navigation, sorting, and column resizing.
Exceptions defined in the SAP BW backend, or in conditional formatting rules for SAP
BusinessObjects Analysis for Microsoft Office, can be activated in the crosstab setting.
The width of each column within a crosstab can be adjusted individually. A context menu is
available and can be adjusted. A report-to-report interface is also supported.

Figure 28: Crosstab Context Menu

The context menu enables the application user to navigate and analyze data at runtime.
Additionally, for each crosstab, you can decide if you want to have a context menu or not.
The context menu enhances the optional function of a crosstab, without scripting.
The context menu must be activated in Outline, as a technical component.

© Copyright. All rights reserved. 21


Unit 2: Creating an Application

You can add entries to the context menu in the properties of the context_menu component.
You can show and hide the standard entries, via scripting commands.

Figure 29: Using Charts

To create a chart component, perform the following steps:

Drag the Chart component into the canvas.

Assign a data source to it.


A default chart is generated, depending on the data contained in the data source.

To change the look of the chart, perform the following steps:

Choose the Chart Configuration property.


A configuration dialog appears, with the following options:
- Change the chart type.
- Define the chart look, by dragging measures and dimension into different feeds.

Figure 30: Visual Analysis in Charts

Charts provide improved visual analysis, as follows:

© Copyright. All rights reserved. 22


Lesson: Creating a Basic Application

Forecasting support with trend and regression lines

Support for time series representation on charts

Ad hoc data comparison and profiling

Figure 31: Conditional Formatting in Charts

Figure 32: Chart Configuration I

The Activated Configuration menu of charts offers additional settings:

Chart properties can be changed.

Chart type can be changed.

Data can be assigned to different parts of the chart.

The Trellis component can be activated.

All options of the chart can be handled.

Colors can be changed.

Views can be chosen.

As well as many more formatting options.

© Copyright. All rights reserved. 23


Unit 2: Creating an Application

Figure 33: Chart Configuration II

Many formatting options can be given to the user of the application by special formatting
components.
These formatting components have the following benefits:

Save on development time

More flexibility

Easy and fast data allocation, through self-service

Components as part of the application

Figure 34: Data Selection by Data Binding

The Data Selection dialog allows you to select single or multiple rows, or columns from the
data source. This allows you to define different charts from the same data source.
Data binding can be used to restrict data on columns, rows, and cells of the Initial view.
Data binding is used to restrict data in a view, without using a query filter. It depends on an
area of the Initial view, which can be chosen in the Binding Assistant.
The Binding Assistant has its own syntax, and can be used to extract different calculated
areas of the Initial view.
Data binding can be used in many ways:

© Copyright. All rights reserved. 24


Lesson: Creating a Basic Application

Bind data to a function

Bind data to a view

Use condition and exception of a query

The data volume in the Initial view is not reduced, so it can be used further in another
component. It can only be used for a component where it is defined — it cannot be copied.

Position and Alignment of Components


Normally you use more than one component for your application (e.g. Chart and Crosstab).
Therefore, it is good to know how to position and align your components.

Figure 35: Layout Properties

Each component is bound to its surrounding borders. These borders can be the borders of the
application, or a surrounding object, such as a Tabstrip.
For each axis (horizontal or vertical), specify the three values. One of these values is always
defined as Auto. You can specify the position values in the Layout Properties of each
component.

Figure 36: Align SAP Lumira Designer Components

SAP Lumira Designer allows you to align and distribute components. It is convenient for
designers to organize components, without writing exact margin. All types of components can
be aligned and distributed.
Components within the same container, or under the same root, can be aligned and

distributed. Components can also be automatically maximized by using this button .

© Copyright. All rights reserved. 25


Unit 2: Creating an Application

Alignment and distribution can be done via the context menu in layout, or via buttons in the
SAP Lumira Designer menu.

LESSON SUMMARY
You should now be able to:

Create a script free basic application

© Copyright. All rights reserved. 26


Unit 2
Lesson 5
Using Filter Components

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Use filter components to enable user interaction

Enable User Interaction with Filter Components

Figure 37: Navigation Panel

The Navigation Panel allows end users to navigate data, via drag-and-drop (dimensions and
measures). In the navigation panel, measures can be shown separately.
It has a simplified view (as a dimension list), in which the order of dimensions can be
determined in design time.
It also has a search bar for quick access to dimensions and measures, and a list-only function.

© Copyright. All rights reserved. 27


Unit 2: Creating an Application

Figure 38: Filter Panel

In the Application Designer , you can enable the following:

Filter Only

Navigation Only

Filter and Navigation

To filter values, the user can use the direct input option, or the member selector option. This
depends on where the user clicks during Application Runtime.

Figure 39: Filter Line

The filter line is a horizontal filter area. End users can easily select filter criteria and filter
values.
Application designers can configure whether key figures are included in the filter line.
Configuration is completed through properties. No scripting effort is required.

© Copyright. All rights reserved. 28


Lesson: Using Filter Components

Figure 40: Dimension Filter

The dimension filter is a more convenient way to use the filter panel for selecting data.
The member display can be defined with key, text, or both.
The Submit event enables triggering interactions.
Dimension names can be hidden or shown.
Ranges can be defined in addition to the multiple selection of members. Defined ranges and
selected members can be deleted, included, or excluded.

Figure 41: Filter Bar

The filter bar can be hidden or shown. Filters can also be separately administrated.
The design element, for showing and using filter elements in a report, ensures more
interactivity for users.

© Copyright. All rights reserved. 29


Unit 2: Creating an Application

Figure 42: Prompt Handling

In the Prompts dialog, application designers and application users set values for prompts.
For SAP NetWeaver BW, data sources and prompts are defined as variables. Variables are
created in the Query Designer.

Note:
SAP Lumira Designer cannot create variables.

SAP Lumira Designer generates a generic prompt screen. If prompts are defined as
mandatory, and do not have a valid default value, it is set to Force Prompts on Startup or
Merged Prompts, in the properties of the application.
To use the compact mode, set the application property Compact Prompts Enabled to true.
The variable names and the corresponding input fields are arranged horizontally one behind
the other in this mode.
With the application property Value Help Settings you can use the Value Help Settings
technical component for the Prompts dialog. You can configure the Value Help Settings for all
dimensions provided by the data source that you have assigned to the application.

Use Variants
You can use variants to store selection data for variables in an SAP BW query. To use this
functionality, the designer must set the application Prompt property Variant Mode either to
Query variants or Document variants .

© Copyright. All rights reserved. 30


Lesson: Using Filter Components

Figure 43: Application Properties To Enable Variant Use

Query Variant Document Variant


Stored in SAP BW Stored in the BusinessObjects BI Platform
Independent of the .lumx file Part of the lumx file
Application must be comprised of a single Application can be comprised of multiple
BW system and data source systems and data sources
Merged prompt not supported Merge prompt supported
No scripting API for administering variants
such as deleting them; i.e., users are respon-
sible for their own variant management
No management of variants in the Central
Management Console or Central Manage-
ment Server

For a user to create a variant, he simply types the name of the variant in the variant box in the
prompt dialog and saves it.

© Copyright. All rights reserved. 31


Unit 2: Creating an Application

Figure 44: Saving a Variant

Once saved, the variant is available the next time the application is used.

LESSON SUMMARY
You should now be able to:

Use filter components to enable user interaction

© Copyright. All rights reserved. 32


Unit 2
Lesson 6
Using Data Bound Component Properties

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Use basic components with data bound component properties

Data Bound Component Properties

Figure 45: Data Bound Component Properties

Component properties have data binding functions to set the value of the property.
Properties are automatically updated when the bounded data source changes. This saves a
lot of scripting, and is denoted in the properties area with the plus symbol (+).

© Copyright. All rights reserved. 33


Unit 2: Creating an Application

Figure 46: Data Bound Properties in a Text Component

To enable binding, complete the following steps:

1. Select the Text property.

2. Choose the Binding icon.

3. Choose the Select Data Cell icon.

To define the binding target, complete the following steps:

1. Select the data source.

2. Choose in the cell you want to use as the source.

3. Choose OK.

Figure 47: Data Bound Properties in a Listbox Component

© Copyright. All rights reserved. 34


Lesson: Using Data Bound Component Properties

Figure 48: Data Bound Component Properties (Formatter Function)

Basic component properties can be defined by a combination of data binding and formatter
function.
Function parts are automatically updated when the bound data source changes. This saves a
lot of scripting.
You can review the formatter functions in your Central Functions, in the Outline view (central
administration). You can format by data source.

LESSON SUMMARY
You should now be able to:

Use basic components with data bound component properties

© Copyright. All rights reserved. 35


Unit 2
Lesson 7
Using Scorecards

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Use scorecard components

Scorecard - Different Views, Usages, and Properties

Figure 49: Using Scorecard Component

The Scorecard component is designed for use in dashboards, and reports with controlled
visualization content and restricted navigation possibilities.
The Scorecard component is not recommended for use in applications with dynamic data
sources, or data sources with free multidimensional navigation.
You can add a Scorecard Analytic component to an analysis application. This allows users to
view the data as a highly customizable table, with the addition of micro-charts in columns.
Depending on how you configure the Scorecard column properties, each column can display
information in the form of text, image, or charts. Each column property can be connected to a
selection of the assigned data source.

Figure 50: Scorecard Component Function Overview

© Copyright. All rights reserved. 36


Lesson: Using Scorecards

Header and column customizing allows you to select data from a result set. It contains multi-
line headers, merged header cells, custom column header texts, text alignment, and custom
column formats.
Rule-based highlighting shows exceptions from the BW query as trend or status icons,
colored text, or background. It also shows conditional formats in smart copied SAP
BusinessObjects Analysis for Microsoft Office views.
Micro charts refer to variance and trend charts.

Figure 51: Auto Generation of Scorecard

Auto-Generation does not analyze any specialties of the data source. For example, it assumes
that all dimensions have result members activated.
You have to check all selections and properties of the generated columns, and ensure that the
selected data is fulfilling your requirements.

Figure 52: Steps to create a Scorecard

© Copyright. All rights reserved. 37


Unit 2: Creating an Application

Figure 53: Definition of Row Scope

LESSON SUMMARY
You should now be able to:

Use scorecard components

© Copyright. All rights reserved. 38


Unit 2
Lesson 8
Using Structural Elements for Design

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Use structural elements for design

Design Using Structural Elements

Figure 54: Grid Layout Component

You can use the Grid Layout component to group and order the content of your application in
a grid, which is not displayed at runtime.
It helps to arrange different objects in the same alignment.

Figure 55: Pagebook Component

The Pagebook component enables the user to switch between different views of an
application.
You group the components and contents of a view on a separate page. The Pagebook shows
one page at once.

© Copyright. All rights reserved. 39


Unit 2: Creating an Application

Note:
The pages are shown in the Outline view.
If you drag-and-drop a Pagebook component in the layout editor, the system
automatically creates two pages for the Pagebook.
If you want to add more pages to the Pagebook, go to the Outline view, open the
context menu of the Pagebook, and choose Create Child Page.

Figure 56: Tabstrip Component

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.
With the selected tab index property, you can specify which tab is displayed initially. This
Index starts with 0, which means that the first tab is Index = 0

Figure 57: Panel Component

You use the Panel component to group other components in your application. The Panel
component is a 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. For example, with a border.

Figure 58: Scroll Container

© Copyright. All rights reserved. 40


Lesson: Using Structural Elements for Design

The Scroll Container component enables or disables horizontal or vertical scrolling on


supported container components.
With the Scroll Container component you can enable users to scroll horizontally or vertically
in containers when they run their applications. Simply drop the Scroll Container into another
component, and users can then scroll horizontally, vertically or both, depending on the
property settings in the design tool. Behavior of the Scroll Container can change, depending
on the parent container settings. Touch scrolling is also possible on all touch enabled devices
using SAP BusinessObjects Mobile, Open Document, the BI platform, or in local mode.
The Scroll container can be used with the following container components:

Dialog

Panel

Popup

Story

Tabstrip

Pagebook (vertical scrolling only)

Figure 59: Tile Container

You can use the Tile Container component to create a responsive application that
automatically adapts to the number of tiles per row, automatically wrap them, according to
the browser size of the viewing device. You can specify the width and height of the tile during
the Design time.
The Tile Rows allow the grouping of tiles so that you can set certain tiles to be vertically below
others and therefore will never overlap. The Tile Container contains a series of Tile Rows
which in turn contain a series of Tiles. Each tile row can contain multiple tiles. The Tile Rows
allow vertical separation of Tiles. The Tile Rows allow the wrapping of the tiles horizontally
while the rows themselves are wrapped vertically using the Tile Container.
A tile allows the user to add components to build an application. Each tile can contain any
component. Tiles can be resized to any width and height, and tiles in a row do not need to be
sized equally. Once defined, the tile width and height is fixed on all devices and only the
number of tiles per row changes dependent on the browser size.

© Copyright. All rights reserved. 41


Unit 2: Creating an Application

Figure 60: Popup Component

The Popup component helps users to 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. Since the popup is a container
component, you can put any other component into the popup. For example, crosstab, button,
or checkbox.
Restrictions of the Popup component are as follows:

The popup can only be nested in the root layout, and not within another container
component.

The popup can only be positioned relative to the root layout.

The popup component is initially invisible.


It is displayed (or closed) when the user interacts in the application, either with another
visible component or a script.

Figure 61: Dialog Component

You use the Dialog component to create a dialog box, with or without buttons. The dialog can
only be used in the root layout. You can only set the height and width of the component. You
can place further elements, items, or components inside the dialog, but not in the header area
or footer.

© Copyright. All rights reserved. 42


Lesson: Using Structural Elements for Design

Hint:
The Dialog component only works with SAPUI5 rendering mode. It must be
opened by API.

Figure 62: Image Component

You use the Image component to enhance applications, by adding images. Depending on the
deployment type, the images are stored in different places.
Images can be changed dynamically, using scripting, to react to various elements. For
example, active filters.

Figure 63: Graphics and Icons Library

© Copyright. All rights reserved. 43


Unit 2: Creating an Application

Figure 64: Using More than one Structure

Using more than one structural element has the following benefits:

More structural stability

More, and better, transparency in a dashboard

More specific formatting options

More compatibility for mobile

More possibilities for activity in a dashboard

Hint:
A grid box that is integrated in another container element, can help to align and
position objects easier.

LESSON SUMMARY
You should now be able to:

Use structural elements for design

© Copyright. All rights reserved. 44


Unit 2
Lesson 9
Creating the Simple Map Component
Presentation

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Create s simple map component presentation

Simple Map Component Presentation

Figure 65: Using Simple Map Structures

The map allows you to display and interact with geographical information on a map.
The main features of the map are as follows:

Ability to change base map provider at runtime.

Any base map provider that has a web URL is supported.

Unlimited number of layers.

Each layer can be assigned to a different data source.

Drilldown possible with onSelect() method.

Data can be represented as shape, point, bubble, or pie chart.

© Copyright. All rights reserved. 45


Unit 2: Creating an Application

Figure 66: Creating a Map

The first step in creating a map, is to drag-and-drop the Map component from the Chart
Components, onto the canvas.
The map-specific properties are:

Basemap URL

Basemap Copyright

Show Scaling Factors

Additional Properties

Figure 67: Defining a Map by Basemap URL

MapQuest
http://otile1.mqcdn.com/tiles/1.0.0/map/{LOD}/{X}/{Y}.png

MapQuest Satellite
http://otile1.mqcdn.com/tiles/1.0.0/sat/{LOD}/{X}/{Y}.png

ESRI - World Street Map

© Copyright. All rights reserved. 46


Lesson: Creating the Simple Map Component Presentation

http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/
tile/{LOD}/{Y}/{X}

ESRI - World Imagery


http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/
{LOD}/{Y}/{X}

Nokia HERE
http://1.base.maps.cit.api.here.com/maptile/2.1/maptile/newest/normal.day/
{LOD}/{X}/{Y}/256/png8?
app_id=DemoAppId01082013GAL&app_code=AJKnXv84fjrb0KIHawS0Tg

Stamen Watercolor
http://tile.stamen.com/watercolor/{LOD}/{X}/{Y}.png

Stamen Toner
http://tile.stamen.com/toner/{LOD}/{X}/{Y}.png

Open Street Map


http://tile.openstreetmap.org/{LOD}/{X}/{Y}.png

Figure 68: Layers in a Map

Adding or removing layers:

LAYER_1 is created by default

To add a layer, click the Add Layer (+) button, located at the top right.

To remove a layer, click Delete Layer (x) in the Layer settings.

Reordering layers:

It is possible to reorder layers using the layout settings.

If LAYER_1 is above LAYER_2 in the properties, this is reflected in the geo map.

Common layer properties:

ID:
A unique identifier used when scripting the layer.

© Copyright. All rights reserved. 47


Unit 2: Creating an Application

Show Layer:
To show or hide a layer. This can also be done through scripting.

Figure 69: Types of Layers

Using the Shape Layer


Configuring the data source

The geographic dimension should be in the rows and contain an identifier that represents
the desired shapes

Configuring the layer


- Data Source: the data source containing the data that displays on the map
- Measure: the measures that define the shape colors
- Start/end color: the gradient used to display the colors. The highest value uses the end
color.
- Custom GeoJSON: path to the GeoJSON file
- Mapping Property: the property in the GeoJSON file used to display the shape
- GeoJSON Mapping Type: defines how the dimension members are mapped (key or
text)

LESSON SUMMARY
You should now be able to:

Create s simple map component presentation

© Copyright. All rights reserved. 48


Unit 2
Lesson 10
Using Composites

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Use composites

Basic Functions and Recommendations of Composites

Figure 70: Overview of Composites

Composites are components, which can be created by an application designer. They are
similar to SDK components, but the application designer does not have to be a software
developer.
In addition, composites, like applications, can contain other components and data sources.
This allows you to group user interface elements and corresponding business logic into a
dedicated composite.
This can be used for refactoring purposes to group a subset of an application. For example, a
header or repeating elements in your applications. Alternatively, it can be used to make the
subset reusable so it can be shared with other application designers.

© Copyright. All rights reserved. 49


Unit 2: Creating an Application

Figure 71: Composites Use Case 1

In this use case, you would create an application that contains the shell, such as a header,
toolbar, footer, and a tabstrip. As well as one composite for the contents of each page, which
you embed on the pages of your pagebook/ tabstrip component in the application.
In this use case, you would put the application and the individual page composites in one
LUMX file. This keeps them together and manages the whole thing as one object on the
platform.
However, if multiple users are meant to work independently on individual pages, you would
separate the application and composites in multiple LUMX files. In this way, you can use
authorizations to control which users can edit the individual parts.

Figure 72: Composites Use Case 2

In this use case, you would put the composite in a dedicated LUMX file to keep it separate
from LUMX files containing the applications. You can use the composite in multiple
applications, even if it is contained in separate LUMX files.
You can group multiple composites that belong together in one LUMX file, so as to form a
library of re-usable components.

© Copyright. All rights reserved. 50


Lesson: Using Composites

Hint:
LUMX files, containing only composites, are hidden from end users in the BI
Launchpad. The recommendation is to store this composite library of LUMX files
in dedicated folders on the BI platform. In this way, you can deny view rights for
end users on the folder, while not propagating this right to content and sub-
folders in this folder. This hides the folder and its contents from end users, while
keeping all necessary access rights on the composite library LUMX files.

Restrictions for Composites

Composites are only supported in the SAP Lumira Documents mode of the SAP Lumira
Designer.

Applications can use composites from the same document and other documents. To use
composites from another document, the referenced document must already exist.
Therefore, dependent documents need to be considered during transportation of objects
(promotion), for example.

One composite can be part of multiple applications. One application can contain multiple
composites, even if they are of the same type.

You can nest composites one in another. There is no restriction on the nesting level.
However, you cannot drag a composite into itself, either directly or indirectly via some
intermediate composite, as the run time will fail if such a circular reference exists. The
system tries to prevent the creation of circular references by showing the error message
Composites cannot be nested recursively. However, circular references cannot be
prevented in all cases.

Figure 73: Using Composites

All available composites of open documents are shown in the Components view. They are
listed in the Composites area by default. While creating a composite, the designer can specify
the component group name.
You can drag-and-drop a composite into the layout of an application, or into the outline dialog,
just like any other component.
Double-click a component to open the element itself, so that you can modify the definition.
After adding a composite to an application, you can do the following:

© Copyright. All rights reserved. 51


Unit 2: Creating an Application

1. Define Properties

2. Define Events

3. Call Scripting Functions

LESSON SUMMARY
You should now be able to:

Use composites

© Copyright. All rights reserved. 52


Unit 2
Lesson 11
Describing Interoperability Between BI Clients

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Describe the interoperability between BI Clients

Interoperability Between BI Clients


Interoperability with SAP Lumira Discovery

Figure 74: Interoperability of SAP Lumira Discovery and SAP Lumira Designer

Content and component communication is possible between tools in SAP Lumira.


SAP Lumira simplifies tool customization in the following ways:

Seamless cooperation and interactivity of storyboards or mock ups.

Enterprise-wide authored dashboards.

Bi-directional communication between storyboards and dashboards.

End users who create storyboards, and require them to be tailored towards enterprise-wide
dashboards, can now do this easily in the same SAP Lumira product.

© Copyright. All rights reserved. 53


Unit 2: Creating an Application

Figure 75: SAP Lumira Interoperability Scenarios

Figure 76: Use Cases for Interoperability

SAP Lumira Discovery enables simple data exploration, data blending, and data
visualizations. This can be done through the use of a storyboard.
Storyboards provide the user with an advanced and focused view of different datasets.
The restriction of the storyboard is that data presentation is focused on the simple creation of
a data-dependent, graphical view.
If a user needs additional, advanced features applied to the storyboard, SAP Lumira Designer
offers the solution, for example Javascripting, different components, functions such as
selectors, and so on.
You can import the SAP Lumira Discovery storyboard to SAP Lumira Designer, use the
potential, and send it back.
You can also improve a story by merging different storyboards into one.
The designer component creates one dashboard application, in which you can collect
different storyboards, with different intentions.

Professional (RE) - Designing of a Storyboard


SAP Lumira Designer has fewer limitations. Once the storyboard is imported, it can be
redesigned with the full potential of the designer edition. It can then be published as an
enterprise-wide application.
SAP Lumira Designer has the following benefits:

© Copyright. All rights reserved. 54


Lesson: Describing Interoperability Between BI Clients

Single and multi-page dashboard application.


Depending on their role and authorizations, users only see the sections and data they are
entitled to.

Advanced use of different BI tools in one application.

Access to other BI tools, via Open Document link and URL Linking.

Use of different data sources.

Figure 77: Document Reuse: SAP Lumira Discovery to SAP Lumira Designer

Content created in SAP Lumira Discovery can be seen in SAP Lumira Designer, but not the
other way around.
Keep in mind that SAP Lumira Discovery cannot work directly with applications and
composites.

Figure 78: Edit or Enhance Existing Story Component

You can edit or enhance stories which are created in SAP Lumira Discovery, in SAP Lumira
Designer. This can be used to add elements that are not available in the discovery component,
such as navigation components.
All composite components in a LUMX document is used as stories in the discovery
component.

© Copyright. All rights reserved. 55


Unit 2: Creating an Application

Figure 79: Create a New Story

To add a new story to a LUMX file in SAP Lumira Designer, you need to add a new Composite
component to the file. Within this composite, you can use a Story component to achieve the
SAP Lumira Discovery look and feel.
The newly created story is available in read-only mode in the SAP Lumira Discovery.

Figure 80: Create a New Application

After opening a LUMX file in SAP Lumira Designer, you can create one or many applications.
If the LUMX file contains imported data, you can reuse this dataset as an offline data source in
an application.
If the LUMX file contains online connections, they are part of the reusable story (composite
component). From there, you can copy and paste online data sources into your application.
The created application is not visible in the SAP Lumira Discovery.
The story remains editable in SAP Lumira Discovery, unless it was changed in SAP Lumira
Designer.

© Copyright. All rights reserved. 56


Lesson: Describing Interoperability Between BI Clients

Interoperability with SAP Analysis for Microsoft Office


SAP Analysis for Microsoft Office, is a Microsoft Office Add-In that allows multidimensional
analysis of Online Analytical Processing (OLAP) sources in Microsoft Excel and the creation of
BI presentations with Microsoft PowerPoint.

Figure 81: SAP Analysis for Microsoft Office

SAP Analysis for Microsoft Office enables you to create data sources using methods that are
not available in SAP Lumira Designer. You can use calculations to change a data source for
example. You may then want to use this changed data source in SAP Lumira Designer.
To use a data source created in SAP Analysis for Microsoft Office, the following prerequisites
apply:

Make sure that you have installed SAP Analysis for Microsoft Office and SAP Lumira
Designer on your machine.

Make sure that you use both tools in either the local mode or with a BI platform. Otherwise
you cannot insert an exported data source.

Figure 82: Smart Copy on SAP Analysis for Microsoft Office

In Analysis for Microsoft Excel, you can copy a crosstab or chart that is currently displayed in
the workbook. Once you have changed and saved the data source, choose Smart Copy . The
data source is copied to the clipboard.

© Copyright. All rights reserved. 57


Unit 2: Creating an Application

Note:
In SAP Analysis for MS Office you have the possibility to choose Create Web
Application . With this functionality you can transfer the whole workbook to SAP
Design Studio. See SAP note 2636541 for using this functionality with SAP Lumira
Designer.

Figure 83: Smart Paste in SAP Lumira Designer

In SAP Lumira Designer, there are two ways to insert this data source:

Right-click the Data Sources folder (or any data source listed in this folder) in the Outline
view and click Smart Paste . The data source in your clipboard is inserted into the Data
Source folder. You can now assign this data source to components in the editor.

Right-click the Layout folder (or any element listed in this folder) in the Outline view and
click Smart Paste . The data source in your clipboard is automatically inserted into a
crosstab component and displayed in the editor.

LESSON SUMMARY
You should now be able to:

Describe the interoperability between BI Clients

© Copyright. All rights reserved. 58


UNIT 3 Defining Layouts and
Formats

Lesson 1
Using Standard and Custom Templates 60

Lesson 2
Working with Themes, CSS Formatting, and the Embedded CSS Editor 64

Lesson 3
Using Conditional Formatting 67

UNIT OBJECTIVES

Use standard and custom templates

Use CSS formatting and the embedded CSS editor

Use conditional formatting

© Copyright. All rights reserved. 59


Unit 3
Lesson 1
Using Standard and Custom Templates

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Use standard and custom templates

Standard and Custom Templates

Figure 84: Provided Templates

SAP Lumira Designer offers a set of predefined templates, which serve various design and
business needs. When you choose a predefined template, the system automatically creates a
copy of this template. You can change the copy according to your needs.
Provided templates have the following functions:

Provide various pre-built applications, which can be used out-of-the-box, or as


customizable templates.

Support the rapid rollout of self-service scenarios on SAP Business Information


Warehouse (SAP BW) and SAP HANA online data.

Support universe data sources.

Can be further enhanced, customized, or used as blueprints by designers.

© Copyright. All rights reserved. 60


Lesson: Using Standard and Custom Templates

Figure 85: Standard Templates: Create your own Application

You can use standard templates to create a new document or a new application, with a
predefined template. You can easily adapt and extend the template, using a data source of
your choice.
The available standard templates are as follows:

Basic Layout Template

Basic Analysis Layout Template

Planning Layout Template

Tapstrip Layout Template

Figure 86: Ready to Run: Generic Analysis

The Generic Analysis template has no data source assigned by default. You can keep the
template as it is, execute it, and assign a data source at runtime. This means that the
template remains generic and independent of the data sources.
The Generic Analysis template contains the following elements:

Menu

© Copyright. All rights reserved. 61


Unit 3: Defining Layouts and Formats

Filter Area

Navigation Area

Setting Area for chart

Data Area with different views

Action Area

The Generic Analysis template includes the following improvements:

Simplified Layout

New Charts and Feeding Component

Drag-and-Drop

Custom Measures and Top N Filters (Context menu)

Figure 87: Templates: Create Custom Templates I

© Copyright. All rights reserved. 62


Lesson: Using Standard and Custom Templates

Figure 88: Templates: Create Custom Templates II

LESSON SUMMARY
You should now be able to:

Use standard and custom templates

© Copyright. All rights reserved. 63


Unit 3
Lesson 2
Working with Themes, CSS Formatting, and
the Embedded CSS Editor

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Use CSS formatting and the embedded CSS editor

Working with Themes, CSS Formatting, and the Embedded CSS Editor

Figure 89: Working with Themes

You can define the used theme in the properties of your application.

Figure 90: CSS Code as Property of Components

In the CSS Style attribute, you can specify the following CSS attributes:

© Copyright. All rights reserved. 64


Lesson: Working with Themes, CSS Formatting, and the Embedded CSS Editor

Font size

Font color

Weight (bold)

Style (italic)

Text decoration (underline)

and many more

This attribute provides advanced options for text formatting. You can type in the CSS style
code directly. Alternatively, you can use an external CSS style editor (such as CSSMate) to
generate code for the CSS attributes you want to use. Copy this code into the CSS style editor
of the design tool.
The CSS attributes listed previously are supported for both desktop browser, and Apple iPad
or iPhone applications.
If you use any other CSS attributes in the external CSS style editor, run the application on
your target device to check whether the text is displayed as required, and as defined by the
attributes.

Figure 91: CSS as Separate File

You can use an external CSS file to adopt customer corporate identity to your applications.
To do so, perform the following steps:

1. Assign a CSS document to the application in SAP Lumira Designer.

2. Change the CSS document directly in an embedded editor (if necessary).

3. Assign a CSS class to the component (for example Icon, Panel...).

© Copyright. All rights reserved. 65


Unit 3: Defining Layouts and Formats

Figure 92: CSS Editor

LESSON SUMMARY
You should now be able to:

Use CSS formatting and the embedded CSS editor

© Copyright. All rights reserved. 66


Unit 3
Lesson 3
Using Conditional Formatting

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Use conditional formatting

Conditional Formatting
Introduction to Conditional Formatting
Application designers and business users running applications can use conditional formatting
for analysis. Values in the application can be displayed according to formatting rules, which
can be based on values of measures or dimensions.
SAP Lumira Designer offers these tools regarding conditional formatting:

Using BEx Exceptions

Conditional Formatting Settings

BEx Exceptions
Using the BEx Query Designer in SAP BW, BEx Exceptions can be defined on BEx Queries. BEx
Exceptions include rules of conditional formatting, containing a maximum of 9 BEx Level
Exceptions (from extremely bad to extremely good) for each rule. If a data source in SAP
Lumira Designer is based on a BEx Query which includes a predefined BEx Exception, these
rules can be reused.
Application designers can reuse BEx Exceptions in components, for example crosstabs and
charts, by setting the Conditional Formatting Visible in the component properties to the value
True .
Business users running these applications can than use the context menu option Conditional
Formatting to launch the BEx Exception Manager. With the BEx Exception Manager business
users can set predefined BEx Exceptions to active/non active or create their own rules.

Note:
It is not required to initiate the technical component Conditional Formatting
Settings to use BEx Exceptions. However, it is possible to use BEx Exceptions in
Conditional Formatting Settings .

© Copyright. All rights reserved. 67


Unit 3: Defining Layouts and Formats

Figure 93: Conditional Formatting Settings

Conditional Formatting Settings are created in the properties of a technical component


(CONDITIONAL_FORMATTING_SETTINGS), which manages and stores conditional
formatting rules on an application level.
Selecting Rules in the properties of this technical component will launch the Conditional
Formatting Rule Manager . Here you can create a collection of conditional formatting rules that
can be used, managed, and stored per application. They are reusable in the application where
they are created, and can be applied to supported components in your application.
Conditional formatting rules overwrite all other formatting options.

Figure 94: Create Conditional Formatting Rules

© Copyright. All rights reserved. 68


Lesson: Using Conditional Formatting

Figure 95: Using Conditional Formatting Rules in Components

To make conditional formatting rules visible on components when running the application, the
following steps need to be taken:

1. In the properties of the selected component set Conditional Formatting Visible to True .

2. Conditional Formatting Settings must be set to your component by setting the Applied
checkbox for the desired rule in the Conditional Formatting Rule Manager .

Business users running these applications can than use the context menu option Conditional
Formatting to launch the Conditional Formatting Rule Manager . With the Conditional
Formatting Rule Manager business users can apply predefined conditional formatting rules,
change the format of predefined rules or create their own rules.
Restrictions of the Conditional Formatting Settings component are as follows:

Overrides conditional formatting from BEx Queries.

Only usable for analytic component.


However, it can also be used in JavaScript.

Hierarchy of rules.
The first formatting rule has higher priority than the following rules. This means that you
have to pay attention to the sorting of the rules, if you are using more than one rule on a
component.

Figure 96: Show Conditional Formatting Items

© Copyright. All rights reserved. 69


Unit 3: Defining Layouts and Formats

Using the Show Conditional Formatting Items chart property, you can decide that the
conditional formatting settings are displayed in the legend of a chart. You can also decide to
maintain the original legend items, by selecting the Keep Original Legend Items chart
property. These properties are in the Legend area of the Properties tab, within the Configure
Chart dialog.

Figure 97: Using BEx Exception Manager in Conditional Format Settings Dialog

If an application contains a Conditional Formatting Settings technical component and you


have activated the Enable BEx Exceptions property of this component and your data source
contains BEx Exceptions, you can open the BEx Exception Manager via the crosstab context
menu entry Conditional Formatting .
To configure BEx Exceptions, make sure that the Enable BEx Exceptions property of the
Conditional Formatting Settings technical component is set to value True .
Clicking the BEx Levels button in the Conditional Formatting Rules Manager shows the dialog
BEx Exception Formatting Rule. You can bring up the BEx Exception Manager by clicking the
Edit BEx Exception Details button. In this dialog you can create new BEx Exceptions or change
the visual formatting for certain BEx Level Exceptions.
In this way you can, for example, use status or trend symbols to visualize if a value is good or
bad. BEx Level Exceptions have lower priority when used in combination with user-defined
rules.

LESSON SUMMARY
You should now be able to:

Use conditional formatting

© Copyright. All rights reserved. 70


UNIT 4 Advanced Design
Techniques

Lesson 1
Describing the Script Editor 73

Lesson 2
Defining the Navigation Behavior of Basic Components by Scripting 78

Lesson 3
Using Conditional Statement in Scripts 83

Lesson 4
Using Metadata and Single Values in Documents 84

Lesson 5
Using Variables in Scripting 87

Lesson 6
Using Keyboard Shortcuts 91

Lesson 7
Outling Export Scenarios 93

Lesson 8
Using Action Sheets 97

Lesson 9
Describing Commentary Functionality 100

UNIT OBJECTIVES

Describe the script editor

Define the navigation behavior of Basic Components by Scripting

© Copyright. All rights reserved. 71


Unit 4: Advanced Design Techniques

Use conditional execution statements in script functions

Use metadata and single values in documents

Use variables in scripting

Use keyboard shortcuts

Outline export scenarios

Create and use action sheets

Describe commentary functionality

© Copyright. All rights reserved. 72


Unit 4
Lesson 1
Describing the Script Editor

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Describe the script editor

Script Editor

Figure 98: Introducing the Script Editor

The Script Editor allows for the flexible definition of interactions between components.
It is a JavaScript-based command editor, with an easy-to-use scripting wizard, and intuitive
content assistance via CRTL+SPACE.
You can display live data for selection, use built-in documentation for script API, and
automatically check for the correctness of the scripting.

Figure 99: Basic Assumptions

© Copyright. All rights reserved. 73


Unit 4: Advanced Design Techniques

The scripts are executed on the Analysis Application Design Service (unlike JavaScript, which
is executed in the web browser).

Figure 100: Push Model and Java Scripting

Figure 101: Statement Types

Figure 102: How to Write a Call Statement

Call statements execute an API method of an object. They have the following format:
<ComponentVariable>.<method>(<arguments>);
<ComponentVariable> is the name of a data source alias or a component in your
application. For example, DS_1 or Button_1.

© Copyright. All rights reserved. 74


Lesson: Describing the Script Editor

<method> is an operation that is applied to the object specified on the left of the period. The
available methods depend on component type. Data Source Alias objects, for example,
provide methods to filter data, and visual components provide methods to modify visibility.
<arguments> is a comma-separated list of expressions. The passed expressions must match
the requirements of the method.
Each statement ends with a semicolon (;).
Also, the ForEach loop belongs to the call statements.

Figure 103: Script Editor - Help Functions I

The system automatically checks the syntax of your script in the background. If there is a
mistake, you 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.
When you hover over the script text, and keep the mouse pointer still, you see additional
information about the text. 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.

Figure 104: Script Editor - Help Functions II

The most important shortcut on the keyboard is Ctrl + Space.

© Copyright. All rights reserved. 75


Unit 4: Advanced Design Techniques

Intelligent proposal offering by content assistance.

Linked mode and value help for member selection.

Figure 105: Type System - Context Sensitive Scripting

SAP Lumira Designer needs to know the parameter type.


It tries to convert whatever you write to the required type, or emit an error.

Figure 106: How to Specify Filter Values

Figure 107: Script Validation

© Copyright. All rights reserved. 76


Lesson: Describing the Script Editor

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.
As an application designer, you can use the following application methods to analyze the
general behavior of your application:

log

alert

createErrorMessage

createWarningMessage

createInfoMessage

If you use the methods log and alert, the results are displayed in the design tool. For example,
if you want to find out whether or not a certain script has been aborted, you can add the log or
alert call statements, with a user-defined message as the last line of the script.
If the message does not appear in a dialog (application method alert), or in the Error Log view
of the design tool (application method log), this means that the script has been aborted. You
can add more messages to the script, to find the exact statement that causes the script to be
aborted.
If you use the methods createErrorMessage , createWarningMessage or
createInfoMessage , the results of the analysis are displayed in the executed application.
They can be viewed on external machines or mobile devices (for example, Apple iPads).

LESSON SUMMARY
You should now be able to:

Describe the script editor

© Copyright. All rights reserved. 77


Unit 4
Lesson 2
Defining the Navigation Behavior of Basic
Components by Scripting

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Define the navigation behavior of Basic Components by Scripting

Navigation Behavior of Basic Components by Scripting

Figure 108: Button

Buttons enable the user to interact within the application. To do this, 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.

© Copyright. All rights reserved. 78


Lesson: Defining the Navigation Behavior of Basic Components by Scripting

Figure 109: Generic Navigation Components

Figure 110: Understanding Generic Navigation Components I

Example code to fill DROPDOWNBOX1 with all divisions from data source 1:
DROPDOWN_1.setItems(DS_1.getMemberList("0DIVISION",
MemberPresentation.INTERNAL_KEY, MemberDisplay.TEXT, 50));
The two bold arguments represent the two columns: Value and Text (Optional).

© Copyright. All rights reserved. 79


Unit 4: Advanced Design Techniques

Figure 111: Understanding Generic Navigation Components II

Figure 112: Checkbox

Checkboxes enable the user to interact within the application. To do this, 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.

Figure 113: 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.

© Copyright. All rights reserved. 80


Lesson: Defining the Navigation Behavior of Basic Components by Scripting

Figure 114: Input Field

The input field enables the user to write user-specific content in the input field at runtime.

Figure 115: Type Conversion

Type conversion is a simple converting of formats. It can only be used for the moment the
script is executed, not any further.

Figure 116: Math functions

Simple mathematical functions are available. They can be used to manipulate data, but only in
the moment a push event indicates them to be executed.

© Copyright. All rights reserved. 81


Unit 4: Advanced Design Techniques

Figure 117: Maintain Script Templates

You can use the context-sensitive help function to create the basic syntax in your script.
Technically, this is done via a scripting template. These templates can be maintained under
Tools Preferences.

LESSON SUMMARY
You should now be able to:

Define the navigation behavior of Basic Components by Scripting

© Copyright. All rights reserved. 82


Unit 4
Lesson 3
Using Conditional Statement in Scripts

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Use conditional execution statements in script functions

Conditional Execution Statements


How to write conditional execution statements control structures
The most frequently used commands are the conditional execution statements.
The basic syntax for these commands is as follows:
if((expression1 == value1) || (expression2 == value2))
{if_statements;}
else
{else_statements;}

Conditional execution statements have one of the following formats:

if (<condition>) { <sequence of statements to execute when condition is met> }

if (<condition>) { <sequence of statements to execute when condition is met> } else


{ <sequence of statements to execute when condition is NOT met> }

<condition> is a boolean expression. It takes one of the following forms:

true or false as value literals (constants)

a method call statement returning a Boolean value

a comparison for equality in the form a == b

a comparison for inequality in the form a != b

Multiple conditions combined with && and ||, parentheses are optional.

LESSON SUMMARY
You should now be able to:

Use conditional execution statements in script functions

© Copyright. All rights reserved. 83


Unit 4
Lesson 4
Using Metadata and Single Values in
Documents

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Use metadata and single values in documents

Metadata and Single Values in Documents

Figure 118: Reading Data from Data Source: Example

In dashboard-like applications, especially, it is important to read single bits of information and


write them directly where you need them.

Figure 119: Reading Data from Application: How to Do it

© Copyright. All rights reserved. 84


Lesson: Using Metadata and Single Values in Documents

Figure 120: Reading Data from Data Source: How to Do it

To read single bits of information, you have a variety of different commands, such as:

DataSource. getData(measure, selection)

getDimensionText(dimension)

getInfo()

getFilterExt(dimension)

getConditionalFormatValue(measure, selection)

getStaticFilterText(dimension)

getVariableValueText(variable)

There are additional commands available, depending on, for example, how you want to
reference dimension members (with internal key or with external key).

Figure 121: Reading Data from Data Source: Example (incl. Scripting and Positioning of Components)

For example:
var t1 = DS_1.getData("D8V8M1UZETXM7FJDQMJJ9SRV8",
{"T_SOLD_TO__0COUNTRY":"DE"}).scalingFactor;
var t2 = DS_1.getData("D8V8M1UZETXM7FJDQMJJ9SRV8",

© Copyright. All rights reserved. 85


Unit 4: Advanced Design Techniques

{"T_SOLD_TO__0COUNTRY":"DE"}).formattedValue;
var t3 = DS_1.getData("D8V8M1UZETXM7FJDQMJJ9SRV8",
{"T_SOLD_TO__0COUNTRY":"DE"}).unitOfMeasure;
var t3 = DS_1.getData("D8V8M1UZETXM7FJDQMJJ9SRV8".
if (t1 == 1000000)
{TEXT_1.setText("in Million");}
else
{TEXT_1.setText("");}
TEXT_2.setText((t2));
TEXT_3.setText(t3); ……………

LESSON SUMMARY
You should now be able to:

Use metadata and single values in documents

© Copyright. All rights reserved. 86


Unit 4
Lesson 5
Using Variables in Scripting

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Use variables in scripting

Local Variables in Script Functions


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.
SAP Lumira Designer has two different types of variable:

Local script variables


These variables are written in the script in which they are used. They are created using
the script editor.
Global script variables
These scripts are created in the application in which they are used. They are created
using the application properties menu.

Figure 122: Local Scripting Variables

Local script variables are script variables that can only be used in the script in which they were
defined. To define a local script variable, open a script with the Script Editor and add a line of
the following format:
var <variable> = <expression>;
The type of the script variable is automatically determined by the type of the expression.

© Copyright. All rights reserved. 87


Unit 4: Advanced Design Techniques

Global Variables for Scripting and Global Scripting


Global script variables are script variables that can be used in any script of your application.
To define a global script variable, open the Edit Global Script Variable dialog. You can insert a
new global script variable, and define its name, type, and default value. In addition, you can
decide if the global script variable is a URL parameter. If you decide to make it a URL
parameter, you can set the value of this global script variable by adding the global script
variable and its value as a URL parameter to the applications URL.

Figure 123: Global Scripting Variables

Global variables can be defined as special class in Global Variables in the Outline view. Once
you have created a new global variable, you can use it in your document. They can be used as
Array and as URL Parameter.
When you create a global script variable, you can specify the following properties of the
variable:

Name

Description

Data Type

Array

Default Value

URL Parameter (true/false)

When you execute the application, you can specify the URL parameter by adding, for
example: http://<<applicationURL>>&Xcurrency=USD
Script variable names used as a URL parameter must start with a capital X.

© Copyright. All rights reserved. 88


Lesson: Using Variables in Scripting

Figure 124: Business Case for URL Parameters

URL parameters can be used to start other BI documents with predefined filter or variable
settings, using the open document syntax.
Convert.urlEncode encodes a string into x-www-form-urlencoded format. This is useful
if the string is used as a parameter of a URL.
For example, in the following sample Convert.urlEncode("Hello world!"); , the
returned string is "Hello+world%21" .

Figure 125: Global Script Object

In SAP Lumira Designer, you can define global script objects to reuse scripting.
To create a new global script object, perform the following steps:

1. In the Outline view, right-click the Technical Components folder.

2. Choose Create Child Global Script Object .

3. Rename the global script object, via the properties sheet.

The global script object provides a grouping of global script functions.

© Copyright. All rights reserved. 89


Unit 4: Advanced Design Techniques

To create a new global script function, perform the following steps:

1. In the Outline view, right-click a global scripts object.

2. Choose Create Global Script Function .

3. Enter the function name in the Create Script Function dialog, and choose OK.
The Create Script Function dialog displays.

4. Enter a description and the code for the global script function.
Each script function has a configurable return type, and can have any number of typed
input parameters.

5. Choose OK when you have finished the global script function.


The function is now displayed under the corresponding global scripts object.

Figure 126: Formatter Functions

When you use data bound properties, you can additionally use formatter functions, which 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 such as The
value is: 22.147 Euro .

LESSON SUMMARY
You should now be able to:

Use variables in scripting

© Copyright. All rights reserved. 90


Unit 4
Lesson 6
Using Keyboard Shortcuts

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Use keyboard shortcuts

Keyboard Shortcuts

Figure 127: Keyboard Shortcuts

You can create your own set of keyboard shortcuts, using the Keyboard Shortcuts technical
component.
You can execute scripting methods within your application, using shortcuts.
Duplicate key codes for different scripting methods are not supported. Attempting to create a
duplicate key code stops the application. The new key code must start with CTRL/CMD, and
must contain one or two more keys. Only alphanumeric keys, and the SHIFT and ALT keys,
can be used.
If there are duplicate key codes, the browser or the original program takes precedence over
the key codes you have created. To avoid such problems, perform browser-based testing
before publishing your documents.

© Copyright. All rights reserved. 91


Unit 4: Advanced Design Techniques

Figure 128: Creating Keyboard Shortcuts

Keyboard shortcuts can only be created with the keyboard shortcut element.
Create keyboard shortcuts under Events, and then activate them. They can include
commands in JavaScript. You can define your own shortcut to start a command.

LESSON SUMMARY
You should now be able to:

Use keyboard shortcuts

© Copyright. All rights reserved. 92


Unit 4
Lesson 7
Outling Export Scenarios

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Outline export scenarios

Export Scenarios

Figure 129: Export Functions

Before using export functions, you must initiate the several types of export format you want
to use. This is done in the Outline area.

Figure 130: Export to Excel

The Export Excel technical component allows the user to specify and export a crosstab, from
SAP Lumira Designer to Microsoft Excel. If the crosstab contains expanded hierarchies, or
expanded multiple hierarchies, in either columns, rows, or both, the export to Microsoft Excel
represents the same expanded state as shown in the crosstab.
The following file format is supported: Microsoft Excel 2007 (.xlsx)

© Copyright. All rights reserved. 93


Unit 4: Advanced Design Techniques

Note:
In Microsoft Excel 2007, the metadata is separated from the crosstab data, and
displays in a separate tab in the MS Excel spreadsheet.
For example, the crosstab itself is represented in sheet 1. Sheet 2 contains
metadata, including runtime changes, applied filters, or variables. Columns can
also be resized depending on the length of the exported columns.
Export to Microsoft Excel is not supported with SAP BusinessObjects Mobile.
Export to XLS file format is no longer supported either.
Export to Excel supports displaying BEx level exceptions. You can enable or
disable the export of BEx Level Exceptions to Microsoft Excel in the Components
property of the Export Excel technical component.
Export to Excel supports formatting for headers. You can select from the three
predefined options (Normal, Subtle, Emphasized) of the Header Formatting
property of the Export Excel technical component during design time or use API
scripting to choose the predefined options during runtime.
Consult the following SAP Notes when exporting to Microsoft Excel:

SAP Note 1917890: Listing the Microsoft Excel export feature as the last
statement in the scripting.

SAP Note 1917891: Increasing jvm memory for large data export.

SAP Note 1917944: The third parameter export setting currently not
corresponding with the first parameter export type.

SAP Note 2167615: Design Studio Microsoft Excel export cell size.

SAP Note 2239527: Design Studio Microsoft Excel hierarchy.

Figure 131: Export to PDF

Use the Export PDF technical component to export your application, or parts of it, to PDF.
There are 3 ways to export to PDF:

WYSIWYG Screen:

Exports a screenshot of exactly what's on the screen at the time of print.

No hidden components are printed.

Code: Export_PDF.exportView();

WYSIWYG Panel:

© Copyright. All rights reserved. 94


Lesson: Outling Export Scenarios

The designer edition can pinpoint a list of panels (Array) to be exported as WYSIWYG.

Allows more control over what is exported.


You can exclude components that are not required in PDF, such as dropdowns, list
boxes, and so on.

Code: Export_PDF.exportPanelView(panelArray);

Report Style:

Exports crosstab as a rendered table, including exception and notification, formatting


and symbols.

Wraps large tables by a set column.

Exports each component chart or SDK to its own full-size page.

Exports all metadata associated with a query for a component to the header.

Conditional formatting of the crosstab is exported.

Export configuration options are as follows:


- Page size
- Page Orientation
- Header and Footer with Text
- Images (such as a logo) can be defined in design time
- Display of Metadata
- Page Numbers

Code: Export_PDF.exportReport();

Export to PDF supports a range of languages. The locale of the user's session determines the
language to use for export to PDF. Only one language can be exported to PDF, per application.
You can export a crosstab with collapsed or expanded hierarchies on the column headers and
row headers. If your crosstab contains hierarchies on the column headers and row headers,
these hierarchies are also shown when exporting to PDF in a report style. When the hierarchy
is collapsed in your crosstab at the time of export to PDF, the output displays the indentation
and expansion symbols. When the hierarchy is expanded at the time of export, this too is
reflected in the export to PDF.
The Pagebook Component and Export to PDF feature allow you to export components on all
pages within a Pagebook once the component has been selected as a report component. You
can select which pages of a Pagebook should be available at export time. Pages are only
displayed for selection if there are one or more components on that page selected as report
components.

© Copyright. All rights reserved. 95


Unit 4: Advanced Design Techniques

Figure 132: Context Menu Enhancement

You can also use the export functions in the context menu.

LESSON SUMMARY
You should now be able to:

Outline export scenarios

© Copyright. All rights reserved. 96


Unit 4
Lesson 8
Using Action Sheets

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Create and use action sheets

Action Sheets

Figure 133: Create an Action Sheet

Action sheets generate a list of possible end user actions. It is similar to a context menu, but
usable with a lot of components.
The technical component must be initiated in the outline area, and must be activated by a
script-based event. The modal should be closed if it's no longer used.
You can create custom, context-based action lists, and provide a list of entries, which can
contain further actions.
Action sheets in an application must be opened before that application is usable. Action
sheets support planning functions.
The Action Sheet Items property allows you to set the value, text, and icon to appear in your
action sheet. The Placement property allows you to position the action sheet relative to
another component.

© Copyright. All rights reserved. 97


Unit 4: Advanced Design Techniques

Figure 134: Define the Action Sheet Items and Open the Action Sheet

To define an action sheet, perform the following steps:

1. In the properties of your action sheet, define the list of actions that should be available.
Each list entry needs its own value.

2. Open the action sheet, using a script in an event of another component, such as Button.

3. In the properties of your action sheet, define the placement of where the action sheet
should be displayed.

The action sheet can return the value, or text entry, belonging to a special value or list entry.
For example, a list of possible export formats.

Figure 135: Define the Actions Belonging to Each Action Sheet Item

Define the actions as follows:

1. To define which action belongs to which item of the action sheet list, insert coding in the
properties of the action sheet.

2. Use a control structure to define which action belongs to which selection of the item list.

© Copyright. All rights reserved. 98


Lesson: Using Action Sheets

LESSON SUMMARY
You should now be able to:

Create and use action sheets

© Copyright. All rights reserved. 99


Unit 4
Lesson 9
Describing Commentary Functionality

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Describe commentary functionality

Commentary Functionality

Figure 136: Commentary

Comments are available in SAP Lumira Designer only, and they have the following features:

Application-based comments and data context / data cell-based comments are both
supported.

Private comments and public comments are supported.

Integrated with commenting infrastructure on BI platform.

Comment as new technical component.

© Copyright. All rights reserved. 100


Lesson: Describing Commentary Functionality

Figure 137: Commentaries - Technical Component

The following points apply to comments as technical components:

COMMENTS as technical components need to be added in the application design time.

The functionality provided by comments allows users to create, delete, and modify
comments in SAP Lumira applications.

Comments across all applications within one SAP Lumira document (.lumx file) can be
shared using the BI commentary service on the BI platform.

Comments can be created in local mode for testing purposes, but in such cases they do
not use the BI commentary service on the BI platform.

Figure 138: Comments Types

The following are the different comment types, and they can be seen in the figure, Comments
Types:

For the entire application

© Copyright. All rights reserved. 101


Unit 4: Advanced Design Techniques

For the applied filters

For a specific data cell

For a specific dimension

For a specific dimension member

Note:
As this is a basic training course, this section is an overview of commentary
functionality. You can find more details in the documentation or ask your
instructor for the SAP Lumira Designer - Advanced Training (BOD420) course.

LESSON SUMMARY
You should now be able to:

Describe commentary functionality

© Copyright. All rights reserved. 102


UNIT 5 Optimizing Applications
on Mobile Devices

Lesson 1
Accessing Application on Mobile Devices 104

Lesson 2
Using the Adaptive Layout Container 107

Lesson 3
Using Movable Components 110

Lesson 4
Optimizing Components for Mobile Devices 112

UNIT OBJECTIVES

Access applications on mobile devices

Use the Adaptive Layout Container

Use movable components

Optimize components for mobile devices

© Copyright. All rights reserved. 103


Unit 5
Lesson 1
Accessing Application on Mobile Devices

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Access applications on mobile devices

Mobile Device Application Access

Figure 139: Integration into SAP BusinessObjects Mobile Solution

Integration into the SAP BusinessObjects Mobile solution provides convenient and unified
user access for a large mobile community.
You can download and access applications of SAP Lumira Designer via the SAP
BusinessObjects Mobile solution (native Apple iOS application). You can also leverage
collaboration functionality, such as annotations, SAP Jam, and so on.
SAP BusinessObjects Mobile solution provides unified usability for a large mobile community.

© Copyright. All rights reserved. 104


Lesson: Accessing Application on Mobile Devices

Figure 140: Assigning SAP Lumira Designer Applications to the Mobile Category

Before users can access SAP Lumira Designer applications on a mobile device, using the SAP
BusinessObjects Mobile solution, you need to assign the applications to the Mobile category
on the BI platform.
To do so, perform the following steps:

1. In the BI Launchpad, go to the folder that contains the application that you want to assign.

2. Select the application.

3. In the context menu, choose Categories.


The Categories dialog appears.

4. Choose the Mobile category.

5. Choose OK.

Figure 141: QR Code Scan for Simple Deployment on Apple iPad or iPhone

© Copyright. All rights reserved. 105


Unit 5: Optimizing Applications on Mobile Devices

Rapid deployment of mobile applications is for testing only.


Depending on the start up mode of our design tool, you can execute an application on a
mobile device.

1. If you work in Lumira Documents mode, click Send to Mobile Device - or - if you work in the
BI platform legacy mode, click Send to Mobile Device (using QR code ®) in the toolbox of
the design tool. The dialog box QR Code ®is displayed with the URL of the current
application encoded.

2. If there are several network adapters active for your computer, the dropdown box IP
address to use is displayed. Select the IP address you need.

3. Scan the QR code with a mobile device, for example an iPad (iPad 2 or higher), using one
of the various QR code scanner apps.

When you click the QR code, a new web browser window with the document link opens,
but without the current session of the platform. You have to log on to the platform. This
is useful when you want to execute the application with different credentials, for
example, to check access rights or personalized result sets.

To copy the document link to the clipboard, click the Copy URL to clipboard button. You
can paste the URL into an e-mail, send the e-mail and the URL can be opened on a
mobile device. If you want to add this URL to your bookmarks, you need to do this
manually (and not by choosing the corresponding button on the mobile device).

LESSON SUMMARY
You should now be able to:

Access applications on mobile devices

© Copyright. All rights reserved. 106


Unit 5
Lesson 2
Using the Adaptive Layout Container

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Use the Adaptive Layout Container

Adaptive Layout Container

Figure 142: Adaptive Layout Container

Figure 143: Adaptive Layout Container: Basics

© Copyright. All rights reserved. 107


Unit 5: Optimizing Applications on Mobile Devices

Figure 144: Adaptive Layout Container: Columns and Blocks

After creating a block in the Adaptive Layout component, you can add the content
(components) to it. As the width of a block is dynamically calculated, its content should use
the auto-width setting.

Figure 145: Adaptive Layout Container: Viewport

A viewport is the visible area of an adaptive layout container. The viewport changes size,
depending on the width of the adaptive layout container.
In the context menu of the adaptive layout, you can select the Preview of Viewport context
menu item, and select one of the following options:

Auto

Small

Medium

Large

Extra large

This option offers you the flexibility to arrange the content in a responsive way.

© Copyright. All rights reserved. 108


Lesson: Using the Adaptive Layout Container

Figure 146: Adaptive Layout Container: Colspan

The adaptive layout rearranges blocks, according to the colspan of the blocks and the current
viewport.
Each row in the adaptive layout container has 12 columns. Blocks are aligned next to each
other, if the sum of their colspan attributes is 12 in maximum. If the 12 columns are full in a
row, and a block would require a 13th column, the adaptive layout component pushes the
blocks underneath.

LESSON SUMMARY
You should now be able to:

Use the Adaptive Layout Container

© Copyright. All rights reserved. 109


Unit 5
Lesson 3
Using Movable Components

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Use movable components

Movable Components

Figure 147: Movable Components: Idea

Figure 148: Step 1: Checking the Current Device

© Copyright. All rights reserved. 110


Lesson: Using Movable Components

Figure 149: Step 2: Move Components to Desired Layout

Figure 150: Adaptive Layout Container: Additional Options via Script

LESSON SUMMARY
You should now be able to:

Use movable components

© Copyright. All rights reserved. 111


Unit 5
Lesson 4
Optimizing Components for Mobile Devices

LESSON OBJECTIVES
After completing this lesson, you will be able to:

Optimize components for mobile devices

Mobile Device Component Optimization

Figure 151: Optimize the Crosstab Components for Mobile Use

Enable mobile-like navigation for crosstabs, with pixel-based scrolling. This ensures a smooth
scrolling experience.
The Pixel-based Scrolling property is recommended when creating mobile applications, or
applications with a low data volume. If you do not activate pixel-based scrolling, row-based,
and column-based scrolling is applied by default.

Pixel-based Scrolling - false: scrolling is row-based and is not “mobile-like”

Pixel-based Scrolling - true: scrolling is Pixel-based and is “mobile-like”

Data is cropped after a specified number of rows or columns. Pixel-based scrolling is not
suitable for large data sets.

© Copyright. All rights reserved. 112


Lesson: Optimizing Components for Mobile Devices

Note:
This property is mandatory for setting the following properties of row and column
limits.
For iPad applications, we recommend that you limit the total number of cells (the
product of rows * columns) to 500, to improve performance and user experience.

Figure 152: Optimize the Dimension Filter Components for Mobile Use

Enable mobile-like navigation for dimension filters, with different visualization modes.
Use visualization modes with care, according to their functions.
Try not to double them by using 2 filters, when if 1 could be enough.

SAP Recommendations for Apple iPhone Applications


When creating mobile applications for an Apple 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 method 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.

LESSON SUMMARY
You should now be able to:

Optimize components for mobile devices

© Copyright. All rights reserved. 113

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy