openSAP LumiraDesigner PDF

SAP Lumira Designer
Exercises Week 3 <Build BI Applications>
EXERCISE 1:
Business scenario:
You will learn the new features that are delivered with SAP Lumira, designer edition 2.x.
Please keep in mind :
- You can only do this exercise if you already have a Lumira designer client and Lumira Discovery
Client installed on your laptop
- With this exercise, no BI Platform is required. Lumira Designer Client and Lumira Discovery
Client is sufficient.
Exercise goals:
• Task 1A: Building a simple Lumira Designer application based on offline Data Sources
Estimated Duration: 20 minutes
• Task 1B: Make your Application Responsive
• Task 1C: Create a KPI Tile as a Composite
• Task 1D: Use Composite KPI Tile in an application
Optional Part:
• Task 1E: Tune Responsive Design to an iPad specific Layout
• Task 1F: Extend with a Bookmark dialog

SAP Lumira Designer Exercise
Prerequisites
How to navigate in Lumira Designer
After opening Lumira Designer, closing the welcome page and creating a new blank application, you see the
screen above. For these Tasks, the framed boxes are essential. The following description will help you familiarize
yourself with the interface.
Layout Editor – blank space in the center of the interface

➢ Displays components and content of your application.
Components – middle left box

➢ Consists of Table, Chart, Basic, Container Components and user self-defined Composites.
These are user interface elements which you can drag to the layout editor to create the content
of your application.
Documents – upper left box
2
➢ Lumira documents. Here you can find the Lumira documents and contained applications and
composites.
Outline – bottom Left box

➢ List of components and data source aliases used in your application.
Properties – upper right box

➢ List of properties available for selected components.
Additional Properties – lower right box

➢ Additional setting options for Charts and SDK components.
All of these views/windows can be moved to a different position via drag and drop. You can of course position
these views as you like for your convenience.
Preparing for the Tasks

Explanation Screenshot
1) Before getting started in
Lumira Designer, we’ll use
Lumira Discovery to aquire an
Excel file, so that we can work
offline.
To open Lumira Discovery

navigate to:
Start   SAP Business

Intelligence  Lumira
Discovery
3
2) Or you can search for

“Lumira” to start Lumira
Discovery
3) In the home menu, select

Microsoft Excel, to import an
excel sheet and create a new
document.
4
4) From the location where you

unzipped the course
materials, select the folder
DataSet --
Westcity_Demographics.xls
x file, from the Data folder.
5) After importing the file, click

on Visualize.
6) To add an additional acquired

dataset, click on the New
Dataset icon.
5
7) Repeat steps 3 through 5, but

this time select
WestCity_HealthStatistics_M
ERGED_data.xlsx.
8) You should now have two

datasets.
9) The dataset has now been

acquired. Save the file as
ANA262_EXE1 and you are
done in Discovery.
You can go ahead and close

it. Our next steps will be in
Designer.
6
10) You are going to install a

template in Lumira Designer.
This template contains the
core of an application, which
we will be working on.
To open Lumira Designer

navigate to:

Designer
7
11) Or you can search for

“Lumira” to start Lumira
Designer
12) We would like to work offline

with Task A.
Select Work Offline.
13) To begin installing an existing

template, select Tools ->
Preferences – Application
Design.
8
14) You will see Application

Templates dialog as
screenshot shown on the right
side.
15) To Add the new template,

click on the Add button for
user defined templates.
9
16) Select folder “Template” as

side (from the unpacked zip
file (folder Template). Then
Click on Apply and Close.
17) Then you should be able to

see that the category
“ANA262” is automatically
created. Please click on
“Apply and Close”.
10
18) Select document

ANA262_EXE1 and start
context menu Create
Application...(in case you
don’t see the menu “create
application”, please first start
menu “open”. After opening
the Document, you will be
able to see the menu “Create
Applications…”)
19) Enter ANA262_EXE_A as

application name.
Select
ANA262_E1_TEMPLATE as
template.
Click on button Create to

continue.
11
Tasks
TASK 1A – DESCRIPTION
1) To open Lumira Designer

navigate to:

Designer
12
2) Or you can search for “Lumira”

to start Lumira Designer
3) We would like to work offline

with Task A.
Select Work Offline.
13
4) A popup with the welcome

page appears.
With Getting Started you can

watch most recent tutorials.
With Recently-Used Analysis

Applications you can directly
open the application which you
worked on.
With Useful Links you can

open the related public
resources.
5) For this Task, you need to

Open the document that you
created in steps 1 to 9.
So please close the welcome
page and click on Local
Documents  ANA262_EXE1
 Open
6) Now you can open the

document ANA262_EXE1.
Here you can see the Story -
01. This story is empty, as you
did not add anything in
Discovery in steps 1 to 9. It
does contain the offline data
sources.
14
7) Select Data Sources in Outline

view and start context menu
Add Offline Data Sources…
8) Here you can see two offline

data sources. These two data
sources are uploaded via
Discovery Client and connect
to this Lumira document
ANA262_EXE1. Now you can
reuse these offline data
sources to create your
application.
Select the first file

Wextcity_Demographics.xlsx/S
heet1
and then click on OK
15
9) Now in Outline view you can

see that DS_1 is defined.
10) Please repeat the above steps

again to add another file
Westcity_HealthStatistics_ME
RGED_date.xlsx/Sheet1 as
DS_2 .
11) Now copy DS_1 to DS_KPI by

click on the context menu
Copy and then Paste under
the Data Source tree in outline.
16
Rename DS_3 to DS_KPI
12) Now you should be able to see

3 data sources (DS_1, DS_KPI
and DS_2) under Data
Sources tree in outline.
17
13) You should be able to see the

hierarchical structure that
LAYOUT_CONTAINER
contains CONTENT and
HEADER like screen shot
show on the right side:
Content as the first position

and HEADER as the second
position.
14) Select Components view on

the upper left area.
Drag and drop Chart to the
middle content area.
15) Go to Property Editor to define

the following layout for
Chart_1:
Top Margin: 0
Let Margin: 10
Bottom: auto
Right Margin: auto
Width: 500
Height: 300
Please always define the

parameters first which need to
be set to auto. Based on that,
other parameters can be
defined /calculated
automatically.
18
16) Now we can start to configure

these charts. Let’s start with
Chart_1.
Select Chart_1 and go to

Property Editor. First please
assign Data Source DS_KPI
to Chart_1.
17) As the next step, we need to

define data selection for this
chart. Please click on icon as
the screenshot shown on the
right side to start data
selection.
18) With Chart_1 we want display

key figure Net Income. So
please select column Net
Income in data selection
window.
Click OK to continue.
19
19) Also, we want to display

conditional formatting. So
please set the property to true
as the screenshot shown on
the right side.
20) As the next we want to

configure the visualization.
Click on icon in Property
Window to start chart
configuration.
21) Chart configuration window is

opening. Please select
numeric point as chart type
like the screenshot shown on
the right side.
20
22) As the next, please switch to

tab PROPERTIES for chart
configuration.
Select Chart Area and assign

color white as the background
color for this chart.
23) Select Chart Area and select

Show Title.
Select Chart Title should be
shown on the left side.
Click on OK to continue.
21
24) Now please create another 5

charts via copy and paste of
Chart_1.
22
25) In Outline view you will see 6

Charts under panel Content
26) Go to Property Editor to

define the following layout for
Chart_2:
Top Margin: 0
Let Margin: 570
Bottom: auto
Right Margin: auto
Width: 500
Height: 300

define the following Layout for
Chart_3:
Top Margin: 0
Let Margin: 1130
Bottom: auto
Right Margin: auto
Width: 500
Height: 300
23

Chart_4:
Top Margin: 340

Let Margin: 10
Bottom: auto
Right Margin: auto
Width: 500
Height: 300

Chart_5:
Top Margin: 340

Let Margin: 570
Bottom: auto
Right Margin: auto
Width: 500
Height: 300

Chart_6:
Top Margin: 340

Let Margin: 1130
Bottom: auto
Right Margin: auto
Width: 500
Height: 300
31) Now you should be able to

see 6 charts are added to the
canvas.
24
32) Now let’s configure Chart_2.

With Chart_2 we would like to
display key figure education
score. As the first please
select Data Selection for
Chart_2.
33) As a result, that you can see

the Chart_2 display the KPI
Education Score in canvas.
In case that you can’t see the

correct value for Chart_2, you
can click the refresh button to
refresh the data.
25
34) Please go to Outline View and

start the initial view editor of
DS_1 via right mouse click.
35) Add Neighborhood as

dimension to Rows.
36) Now we start to configure

Chart_3. With Chart_3 we
would like to display key
figure Net Income, Education
Score and Unemployment. As
the first step, please first
assign DS_1 to Chart_3 in
property window.
26
As the next please start data

selection as the screenshot
shown on the right side (to
select multiple columns, you
can use Ctrl + mouse)
The last step please choose

Bubble chart via chart
configuration editor as the
chart type for Chart_3.
27
37) Thus, that you can see the

Chart_3 display the Bubble
Chart in canvas.

would like to display key
figure Fruits & Vegetable
Consumptions and Life
Expectancy. As the first step,
please first assign DS_1 to
Chart_4 in property window.

28

Now please choose Column

via chart configuration editor
as the chart type for Chart_4.
Select on the Legend of Life

Expectancy and start context
menu via right mouse click.
Select menu Change Chart

Type of Series  Line
29
Select menu: Assign Measure

to Axis  Secondary Axis
Click OK to complete the

configuration for Chart_4
39) Thus, that you can see the

Chart_4 display the Column
and line Combination Chart in
canvas.
30
40) Go to Outline View and start

Edit Initial View of DS_2 like
the screenshots shown on the
right side.
41) Add Neighborhood and

Version as dimensions into
Row.

would like to compare actual
and forecasted Alcohol
Consumption by
neighborhood. As the first
step, please first assign DS_2
to Chart_5 in property
window.

31
Now please choose Stacked

Bar via chart configuration
editor as the chart type for
Chart_5.

configuration for Chart_5.
32

see that Chart_5 is configured
as the stack bar chart in
canvas.
44) Go to Outline View and now

we need to define another
Data Source.
Please copy DS_2 to DS_3

via context menu as the
side
33
45) Start Edit Initial View of DS_3

like the screenshots shown on
the right side.
Remove dimension Version

from Rows
34

would like to display Tabaco
Consumption by
neighborhood. As the first
step, please first assign DS_3
to Chart_6 in property
window.

shown on the right side.
Now please choose Column

via chart configuration editor
as the chart type for Chart_6.
35
And then switch to Heat Map

as chart type (here seems like
that we still have a bug to
directly switch from Numeric
Point Chart to Heat Map. So,
we use a workaround that first
switch to Column Chart and
then switch to Heat Map)

configuration for Chart_5.
36

see that Chart_6 is configured
as the Heat Map in canvas.
48) Now we are going to define

the application header area.
Select
TEXT_HEADER_TITLE and
go to Properties view.
Enter West City Health Check
as text
37
49) Go to Components View and

drag and drop Filter Bar to
panel Header like screenshot
50) Go to Properties View and

define following Layout for
Filter Bar:
Top Margin: 60
Let Margin: 0
Bottom: 0
Right Margin: 0
Width: auto
Height: auto
38
51) Go to Outline View and copy

DS_1 to DS_FILTERBAR.
(we cannot reuse the DS_1
because of the filter activity in
application)
39
52) Assign DS_FILTERBAR to

component FILTERBAR_1
53) Select Target Data Sources

via icon .
Click button Select All
Press Button OK to
continue.
With this step we defined

DS_1, DS_2, DS_3 and
DS_KPI as the target Data
sources for component Filter
Bar
40
54) Set Filter Area Visible to true
55) Since the filter area can be

shown or hidden, we need to
define the Top Margin of
Panel Content dynamically.
For that we need to define On
Toggle event for Filter Bar.
Go to Properties view and
start script editor for On
Toggle Event like the screen
shots shown on the right side
56) The script editor starts. Either

you can write the Script
yourself via content
assistance, or you can also
copy and paste the coding on
the right side into Script
Editor:
What here we would like to if (FILTERBAR_1.isFilterAreaVisible()== false)

achieve is in case of the Filter {
Area is visible or invisible, we HEADER.setHeight(110);
would like to set different Top CONTENT.setTopMargin(120);
Margin for panel HEADER }
and CONTENT else
{HEADER.setHeight(190);
41
CONTENT.setTopMargin(200);
57) Now let’s define On Select

Event for Bubble Chart
(Chart_3). Once user clicks
on the neighborhood on
Bubble Chart, other charts as
well as the filter bar should
get filtered.
For that please copy and
paste the coding on the right
side into script editor of
Chart_3 On Select Event.
Or you can also write these
code lines via content
assistance by pressing
Ctrl+Space.
DS_2.setFilter("DS:15,DIM:id_68",
CHART_3.getSelectedMembers("DS:2,DIM:id_16"));
DS_KPI.setFilter("DS:2,DIM:id_16",
DS_FILTERBAR.setFilter("DS:2,DIM:id_16",
42
58) We also would like to define

conditions at application run
time, for that we need add
Conditional Formatting
Settings as technical
component.
Go to Outline View. Right

mouse click on the Technical
Components and start context
menu: Create  Conditional
Formatting Settings
59) Save application like

side.
60) Now you are completed with

building this dashboard. You
should be able to see the
whole application in design
time as the screenshot shown
on the right side.
61) Execute the application in

local mode.
43
62) You should be able to see the

application running in browser
as the screenshot shown on
the right side.
63) If you want to run this

application on mobile devices
(or another PC), you might
need to enable external
access.
To determine whether you

need to, look in the lower right
of the Designer UI. External
access will either be disabled
(as in the upper picture) or
enables (as in the lower)
44
64) If external access is disabled,

you can enable it in the
preferences menu.
To do so, check the box

labeled Allow external access
to embedded Web server.
65) If you want to run this

application on Mobile
Devices, you can click on
Send to Mobile Device (using
QR Code)
45
66) QR coding is representing the

URL of application.
Now you need to have a

program called QRAFTER or
SCANLIFE on your iPad (you
can download them from App
Store) to scan this QR coding.
67) Check the steps on the right Filter Bar

side. If they are all working, ✓ Hide Filter Bar or Show Filter Bar to see whether the Top
then you have successfully Margin of Content Area will adjust itself
completed this Task. ✓ Select Neighborhood as filters and select some
Neighborhood names to see whether all charts are
filtering
Charts
✓ Right mouse click on the chart you can start the context
menu. Within context menu you can set different options
of charts
✓ Define Conditional Formatting Settings for Charts. These
settings could be defined based on measures or key
figures.
✓ Conditional Formatting Settings defined as be shared
within the same Excel File (DS_1,
DS_FILTERBAR_DS_KPI are sharing the same
conditional Formatting Settings. DS_2 and DS_3 are
sharing the same conditional formatting settings)
✓ If you select neighborhood on Bubble Chart, all other
charts are filtered with the same neighborhoods.
46
Task 1B – Make your application responsive
Estimated time: 10 minutes
Task Description:
A) ADD AN ADAPTIVE LAYOUT CONTAINER TO APPLICATION
B) CREATE BLOCKS WITHIN ADAPTIVE LAYOUT CONTAINER
C) CONFIGURE BLOCKS AND ASSIGN COMPONENTS TO BLOCKS
D) RUN APPLICATION AND SIMULATE THE RESPONSIVE DESIGN OF

APPLICATION
Final Task Result:
Design Time
Run Time:
47
Desktop:
Ipad:
iPhone
48
49
TASK 1B – DESCRIPTION
1) To be able to clearly structure

the Tasks result, let’s copy
application ANA262_EXE1_A
to ANA262_EXE1_B. We will
add the responsive layout
with EXE1_B.
Please use Save As… option
to copy and paste application
like screenshot shown on the
right side.
Type application name:

ANA262_EXE1_B
Click OK to continue
2) Now in Document View you

can see that
ANA262_EXE1_B is created
within Document
ANA262_EXE1.
3) Either you can double click on

the application to open it, or
you can open the application
via right mouse click to start
context menu
50
4) Go to Outline View. Under

Panel Content please start
context menu (per right
mouse click): Create 
Container Components 
Adaptive Layout
5) Click on the icon on the top

menu bar to maximize
ADAPTIVE_LAYOUT_1
within panel CONTENT.
After maximizing, the

Top/Let/Bottom/Right Margin
is set to 0.
51
6) Go to Properties View of
ADAPTIVE_LAYOUT_1. Here
we see the default parameter
of Minimum Width of
Medium/Large/Extra Large
Viewport. Let’s keep the
default value.
You are provided with 4
responsive options:
Small view port: width less
than 640 pixels,
Medium view port: width
between 640 and 1024 pixels,
Large view port: width
between 1024 and 1920
pixels,
Extra Large view port: width
more than 1920 pixels
7) Now go to Outline View.

Select on
ADAPTIVE_LAYOUT_1 and
per right mouse click to start
context menu to create block:
Create  Block
52
8) Go to Properties view and set

the Height to 320 for this
block
Within Display category you

can see the parameter for
small/medium/large/extra
large Viewport. Let’s keep
these default parameters.
These parameters indicate

how this block should be
displayed on different
resolutions. E.g. on small
devices/resolutions, this block
should display 12 Colspan.
9) Please use copy and paste

option like the screenshots
shown on the right side to
create another 5 Blocks
53

see 6 Blocks are created
within
ADAPTIVE_LAYOUT_1
11) Now please move CHART_1

within Block 1 per drag and
drop.
And please use maximize

button to set the
Top/Left/Bottom/Right Margin
to 0
54
12) Please do the same with

CHART_2, CHART_3,
CHART_4, CHART_5 and
CHART_6:
CHART_2 moves within

BlOCK_2,
BLOCK_3,
BLOCK_4,
BLOCK_5 and
BLOCK_6
And maximize these charts.

In Outline View you will see
the result like the screenshot
In design Canvas, you will

see that charts are moved to
each block.
55
13) The third block displays

charts. We would like to only
display one chart in a row
separately on medium
devices. Therefore, we need
to change the parameter for
Medium Colspan to 12.
14) Please change the same for

BLOCK_4, BLOCK_5 and
BLOCK_6.
56
15) In Property View start the

context menu per right mouse
click for
ADAPTIVE_LAYOUT_1:
Preview of Viewport 
Medium
Here you can simulate how

your application look like with
different view port.
Let’s set to Medium to see

how the application looks like
16) Now we can see in Design

time how the application will
look like on medium viewport
(e.g. iPad):
To KPI Tile are displayed in

parallel, other charts are
displayed separately in a row.
17) Press Save button to save

application
57
18) Let’s run application via

Execute Locally
19) In IE 11 browser you can

resize window to simulate the
different devices (small,
medium, large and extra
large). You can copy and
paste the application URL and
execute the application in
Google Chrome.
Right mouse click to start

context men  inspect
elements
Per Device Toggle Bar, you

can simulate displaying this
application on different
devices.
You can switch between
iPad/iPhone6/iPhone 5 etc. to
see that application layout
adjusts itself based on the
width devices.
58
Task 1C – Create a KPI Tile as a Composite
Task Description:
a) CREATE A KPI TILE AS COMPOSITE WITHIN LUMX DOCUMENT
b) DEFINE INTERFACE PROPERTIES
c) DEFINE LAYOUTS OF THIS COMPOSITE
Final Task Result:
59
TASK 1C – DESCRIPTION
1) Select ANA262_EXE1 and

start context menu : Create
Composite…
Composite is a reusable
component that can be defined
within Designer and reused
across multiple applications
2) Enter ANA262_EXE1_C as a
composite name.
Click Create to continue.
60
3) In Outline View you can see

that a blank structure is
created for this composite.
4) Let’s assign a CSS for this

composite. Please go to
Properties View. Click on icon
right side to browse the CSS
file
A window is coming up and

you can select Tile.CSS and
then click on Open to
continue.
With the above step, we have

assigned a CSS file to this
composite.
61
5) Now let’s first start with

defining interface properties.
Select Properties and start

context menu Create Property
6) Name this Property

DataSource
Interface properties are

properties that can be
dynamically assigned with
value within different
applications. We would like to
assign different data sources
for this KPI Composite in
application, that’s why we
need to define DataSource as
Property
62
7) Go to Properties view to
define DataSource as
interface properties
Select DataSourceAlias as
Type.
8) Now please add another

Interface property and name it
DataSourceSelection
9) Go to Properties View and set

Type String for
DataSourceSelection
And set Bindable to false as

side.
63
10) Now let’s define the layout of

this KPI Tile as composite.
Go to Outline View and click
on Layout to start context
menu:
Create  Container
Components  Panel
11) Go to Property View and

enter the following:
Name: CONTENT
CSS Class: myTile
Layout:
Top Margin: 0
Left Margin: 0
Bottom Margin: 0
Right Margin: 0
Width: auto
Height: auto
(you can use maximize button
to set this layout)
64
12) Now you can see that the

Content area of KPI tile has
white as background
13) As the next step let’s define

the chart within this
composite. As the easy way,
you can open the application
ANA262_EXE1_B and copy
CHART_1 to this composite
under panel CONTENT
65
14) Go to Properties View.

Assign Value DataSource to
property data source
Remove value for property

Data Selection.
And make sure that

CHART_1 is maximized
within panel CONTENT
15) Add an icon also to Panel

CONTENT. With this icon we
would like to open the full
screen mode.
Switch to tab Components.

Drag and drop icon to panel
CONTENT
66

Name: ICON_FULLSCREEN
Color: blank (remove color
please)
Background color: blank
(remove color please)
Layout:
Top Margin: 5
Left Margin: auto
Bottom Margin: auto
Right Margin: 5
Width: 25
Height: 25
17) Go to Additional Properties

View. You can search and
select for Full-screen icon.
18) Once you have selected, you

can see that the icon URL is
switched to the full screen
icon and in design time we
can also see this icon.
67
19) If the icon is clicked, we would

like to show the chart in a full
screen dialog box. For that
let’s define a Dialog
component under panel
CONTENT

Name:
DIALOG_FULLSCREEN
Draggable: true
Resizable: true
Layout:
Top/left/Bottom/Right Margin:
auto
Width:10
Height:10
68
21) We need to define a Button to

close this dialog.
So please clock on Buttons

and add Button Close.
Add one line script in script

editor like the screenshot
DIALOG_FULLSCREEN.close();
69
22) Within the Dialog we would

like to see again the chart.
Therefore, we can just copy
the panel CONTENT and
paste under
DIALOG_FULLSCREEN
70
23) Let’s name the Panel

CONTENT_FULLSCREEN
24) Let’s rename CHART_1 to

KPI_CHART and rename
CHART_2 to
KPI_CHART_FULLSCREEN
71

KPI_CHART_FULLSCREEN
and assign DataSource to
property Data Source
26) Delete ICON_2 with context

menu in Outline View
72

component
ICON_FULLSCREEN.
Start Script Editor for On Click

event and add the code lines
that are shown on right side:
DIALOG_FULLSCREEN.setWidth(900);
DIALOG_FULLSCREEN.setHeight(600);
DIALOG_FULLSCREEN.open();
28) Please go to Properties View

for composite
ANA262_EXE1_C.
We need to define On
Initialization event. With this
event, we would like pass the
parameter of DataSource and
DataSourceSelection.
Please add the code line on

the right side to Script Editor.
73
KPI_CHART.setDataSource(DataSource);
KPI_CHART_FULLSCREEN.setDataSource(DataSource);
KPI_CHART.setDataSelection(DataSourceSelection);
KPI_CHART_FULLSCREEN.setDataSelection(DataSourceSel
ection);
29) Click on button Save to save

this composite
74
Task 1D – Use Composite KPI Tile in an application
Task Description:
a) CREATE APPLICATION ANA262_EXE1_D
b) REPLACE CHART_1 AND CHART_2 WITH THE COMPOSITES THAT WE DEFINED

WITH TASK 1C
c) TEST APPLICATION IN BROWER
Final Task Result:
75
TASK 1D – DESCRIPTION

application ANA262_EXE1_B
to ANA262_EXE1_D. We will
consume the KPI Composite
with EXE1_D.
right side.

ANA262_EXE1_D
2) Double click on
ANA262_EXE1_D or start the
context menu to open this
application.
76
3) Go to Tab Components and

you can see the composite
that you created
ANA262_EXE1_C is under
category Composites.
Now you can drag and drop
this composite to BLOCK_1 in
Outline View.

Name: KPI_TILE_1
DataSource: DS_KPI
Layout:
Width: auto
Height: auto
Top/Left/right/Bottom Margin:
0
77
5) Now please add the data

source selection to
KPI_TILE_1.
For that you can copy the
value of DataSource selection
that you defined for CHART_1
to KPI_TILE_1.
Don’t forget to press Return

to save the value.
78
6) Now you can delete

CHART_1.
7) Now you can already see that

the CHART_1 is replaced by
the composite in design
canvas.
In case you don’t see the

change, please press refresh
button in design time to
refresh the application.
8) Please repeat the steps 3 to 6

to replace CHART_2 with the
composite ANA262_EXE1_C
to display KPI Education
Score.
79
9) Now you can see in design

time CHART_1 and
CHART_2 are already
replaced by composite that
we defined in last Task.
10) Save and execute application

locally.
80
11) In Browser, you can click on

the icon for Full screen mode.
You will see that Dialog box is
opening and you can drag
and resize this dialog box to
see key figure.
You can click on Close button

to close the full screen mode.
81
Task 1E – Tune REsponsive Design to an iPad specific layout
Task Description:
a) CREATE APPLICATION ANA262_EXE1_E
b) ADD A PAGEBOOK AS COMPONENT
c) DEFINE GLOBAL SCRIPT OBJECT TO MOVE COMPONENTS TO PAGEBOOK

IN CASE THE DEVICE IS IPAD
d) TEST APPLICATION IN BROWSER
Final Task Result:

TASK 1E – DESCRIPTION

application ANA262_EXE1_D
to ANA262_EXE1_E. We will
extend the application to an
iPad specific layout in this
Task.
right side.

ANA262_EXE1_E
2) Double click on
ANA262_EXE1_E or start the
context menu to open this
application.
Copyright/Trademark
3) We would like to display
CHART_3, CHART_4,
CHART_5 and CHART_6 with
a Pagebook in case the
running device is iPad. For
that let’s first define a
Pagebook within BLOCK_3.
Go to Outline View and click

on BLOCK_3 and start
context menu per right mouse
click:
Components  Pagebook
4) Click maximize button to

maximize PAGEBOOK_1
within BLOCK_3.
5) We only need Pagebook in

case the running device is
iPad. So please set the
following properties for
PAGEBOOK_1:
Visible: false
Show Page Indicator: true
Copyright/Trademark
6) Open PAGEBOOK_1 in
Outline View and create
another 2 pages via context
menu.

see 4 pages are available
within PAGEBOOK_1.
Copyright/Trademark
8) Now let’s create a PANEL
within each page.
Select on PAGE_1 and start

context menu:
Components  Panel
Actually, we would like to

move components to
pagebook at application
runtime. But there is a
limitation with SP1 (installed
on Teched machine) that
components can only be
moved into Panels at
application runtime. That’s
why we need to create a
panel within Pagebook. This
limitation is already solved
with Lumira 2.0SP2.
9) After creating Panel, please

click on the maximize button
to maximize Panel within
Page
10) In Outline View you should be

able to see 4 Panels are
created. (each Panel within
one page)
Copyright/Trademark
11) As the next step let’s create a
Global Script Object.
In Outline View select on

Technical Components and
start context menu per right
mouse click:
Create Global Script Object
12) In Outline View we can see

that GLOBAL_SCRIPT_1 is
created. Now let’s start the
context menu to create script
functions:
GLOBAL_SCRIPTS_1 
Create Script Function….
13) Enter name for this function:

CheckDevice
Click on OK button to
continue.
Copyright/Trademark
14) Now Global Script Function
window is opening. Here you
can enter a description for this
function (this is optional field).
And please add the code lines

on the right side to Script
area:
With these scripts, we move

the CHART_1, CHART_2,
CHART_3 and CHART_4 to
PAGEBOOK_1 in case the
user agent identifies that this
application is running on iPad.
var info = APPLICATION.getUserAgent();
if (info.indexOf("iPad") != -1) {
APPLICATION.createInfoMessage(info);
PAGEBOOK_1.setVisible(true);
PANEL_1.moveComponent(CHART_3);
}
15) Select on application

ANA_262_EXE1_E in outline
view and go to its Properties
View.
Click on On Startup event to
start script editor.
Copyright/Trademark
16) We would like to trigger the
function CheckDevice with On
Startup event. Therefore,
please add the one codeline
on the right side to the script
editor:
GLOBAL_SCRIPTS_1.CheckDevice();
17) To achieve the best layout for

iPad, let’s change the height
of BLOCK_1 and BLOCK_2
to 200
18) In design canvas, you should

now see the application look
like the screenshot shown on
the right side.
Copyright/Trademark
19) Now let’s save application.
20) If you have iPad with you,

please click on menu Send to
Mobile Device
21) QR coding is representing the

URL of application.
Now you need to have a

program called QRAFTER or
SCANLIFE on your iPad (you
can download them from App
Store) to scan this QR coding.
22) On iPad you can see the

application displayed with 2
KPI Tiles and a Pagebook.
You can swipe the Pagebook
to see the charts.
Copyright/Trademark
23) In case you don’t have iPad
with you, you can simulate
this behavior in browser
Google Chrome.
Please copy and paste the
URL to Chrome
24) In browse Google Chrome,

you can start context menu
Inspect (just right mouse click
on the blank area of
application)
Copyright/Trademark
25) Now you can start the device
toggle bar to switch the
application to iPad
Don’t forget to press button

Reload in browser.
With application reload, the

user agent identify that the
running device is iPad and it
will turn to iPad layout.
26) Now you can see that

Pagebook is displayed within
the application. You can
swipe the Pagebook to see 4
charts.
Copyright/Trademark
Task 1F – Extend with a Bookmark Dialog
Task Description:
a) EXTEND APPLICATION WITH PRE-DEFINED BOOKMARK DIALOG
b) SET DEFAULT APPLICATION FOR THIS DOCUMENT
Final Task Result:
Copyright/Trademark
Copyright/Trademark
TASK 1F – DESCRIPTION
1) We would like to extend our

document with a pre-defined
bookmark dialog from the
application samples.
First, select Create Document

from the File menu.
2) In the Create Document

menu, give the new document
the name samples (or any
other name. It does not
matter what it is called).
Select the document type

feature samples.
3) This new document has a

number of composites, which
you can see in the Samples
section of the palette,
whenever this document is
open.
The document must be open

in order to use the composites
in application.
Copyright/Trademark
4) Now please open the
document ANA262_EXE1
(you can also run time step in
local mode)

the Task result, let’s create
another application to extend
with Bookmark Dialog.
Click on ANA62_EXE1_D and
per right mouse click to start
the context menu item Save
As…
6) Enter the name

ANA262_EXE1_F
7) Double click or per context

menu open this application.
Copyright/Trademark
8) Once its opened, you can see
the Outline View is not empty
anymore.
9) Go To tab Components.
Under category Samples you
can find the composite
BOOKMARK_DIALOG.
Drag and Drop this composite

to Layout in Outline View .
You can see that

BOOKMARK_DIALOG_1 is
added to the same level as
panel CONTENT
Copyright/Trademark
BOOKMARK_DIALOG_1.
Set Global Bookmarks Visible

and Personal Bookmarks
Visible to true
11) Now we need to define the

Bookmark definition in
application.
Select on Technical
Components in Outline View
and start context menu per
right mouse click:
Create  Bookmarks
12) BOOKMARKS_1 as
bookmark object is created for
this application. Now please
go to Outline View and start
the bookmark definition as the
side.
Copyright/Trademark
In definition window, please
select all Data Sources and
all Charts as bookmark
definition.
Click OK to continue
13) Now we need to add a

bookmark icon to open
bookmark dialog.
So go to Outline View and

select HEADER and start
context meu:
Create  Basic Components
 Icon
Copyright/Trademark
Color: None (delete the

default one)
Background Color: None

(delete the default one)
Sizing Factor: 0.4
Tooltip: Bookmark
Layout:
Top Margin: 0
Left Margin: auto
Bottom Margin: auto
Right Margin: 5
Width: 60
Height: 60
15) Now let’s select the right icon.

Go to Additional Properties
View and search for
bookmark.
Select bookmark icon
16) We can see that in design

canvas, the icon is changed
to the correct bookmark one.
Copyright/Trademark
17) Start the script editor on On
Click event.
With on click event we would

like to open the bookmark
dialog. Therefore, we need to
add the one line code on the
right side to Script Editor.
BOOKMARK_DIALOG_1.openBookmarkDialog(BOOKMAR
KS_1);
18) So that’s all for consuming

Bookmark_Dialog as
composite in application Save
this application
19) You can execute this

application.
Copyright/Trademark
20) Now you can see how this
application runs. You can
start to bookmark dialog to
save or open bookmarks.
Copyright/Trademark
Coding Samples
Any software coding or code lines/strings (“Code”) provided in this documentation are only examples and are not
intended for use in a productive system environment. The Code is only intended to better explain and visualize the
syntax and phrasing rules for certain SAP coding. SAP does not warrant the correctness or completeness of the
Code provided herein and SAP shall not be liable for errors or damages cause by use of the Code, except where such
damages were caused by SAP with intent or with gross negligence.
Copyright/Trademark

openSAP LumiraDesigner PDF

Uploaded by

Copyright:

Available Formats

openSAP LumiraDesigner PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

openSAP LumiraDesigner PDF

Uploaded by

Copyright:

Available Formats

SAP Lumira Designer

Exercises Week 3 <Build BI Applications>

Estimated Duration: 20 minutes

• Task 1B: Make your Application Responsive

Estimated Duration: 10 minutes

• Task 1C: Create a KPI Tile as a Composite

Estimated Duration: 15 minutes

• Task 1D: Use Composite KPI Tile in an application

Estimated Duration: 10 minutes

• Task 1E: Tune Responsive Design to an iPad specific Layout

Estimated Duration: 15 minutes

• Task 1F: Extend with a Bookmark dialog

Estimated Duration: 15 minutes

How to navigate in Lumira Designer

Layout Editor – blank space in the center of the interface

Components – middle left box

Documents – upper left box

Outline – bottom Left box

Properties – upper right box

Additional Properties – lower right box

Preparing for the Tasks

To open Lumira Discovery

Start   SAP Business

2) Or you can search for

3) In the home menu, select

4) From the location where you

5) After importing the file, click

6) To add an additional acquired

7) Repeat steps 3 through 5, but

8) You should now have two

9) The dataset has now been

You can go ahead and close

10) You are going to install a

To open Lumira Designer

Start   SAP Business

11) Or you can search for

12) We would like to work offline

Select Work Offline.

13) To begin installing an existing

14) You will see Application

15) To Add the new template,

16) Select folder “Template” as

17) Then you should be able to

18) Select document

19) Enter ANA262_EXE_A as

Click on button Create to

1) To open Lumira Designer

Start   SAP Business

2) Or you can search for “Lumira”

3) We would like to work offline

4) A popup with the welcome

With Getting Started you can

With Recently-Used Analysis

With Useful Links you can

5) For this Task, you need to

6) Now you can open the

7) Select Data Sources in Outline

8) Here you can see two offline

Select the first file