Vous êtes sur la page 1sur 176

SAP TECHNOLOGY HIGHLIGHTS

PUTTING THEM ALL TOGETHER


TEC160



Exercises / Solutions
Ulrich Klingels, Matthias Kretschmer, Dr. Matthias Sessler
SAP Technology Solution Management, SAP AG

2

TABLE OF CONTENTS
Table of Contents ............................................................................................................................................................... 2
Design Studio ..................................................................................................................................................................... 4
Exercise 1.1 - Get Started....4
Exercise 1.2 - Build a Mobile App.......17
Exercise 1.3 - Combine Business Warehouse and HANA Data......26
Exercise 1.4 - Use Advanced Functionalities.....38
HANA Studio .................................................................................................................................................................... 49
Exercise 2.1......49
Exercise 2.2....76
Dashboards82
BI Workspaces..91
ABAP Web Dynpro ........................................................................................................................................................ 103
Exercise 5.0 - Login and Mandatory Steps..104
Exercise 5.1 - Auto-Completion.....111
Exercise 5.2 - Enhance your Web Dynpro...116
Exercise 5.3 - ABAP Web Dynpro..135
Exercise 5.4 - Enhance your Web Dynpro with a Side Panel147
Glossary for SAP BusinessObjects Design Studio ........................................................................................................ 171





3

BEFORE YOU START

In the Hands-on session TEC160 you have the opportunity to select your exercises depending on your
personal area of interest. However, you find the solutions to all exercises as reference this way you can
also see the solution of the exercises you did not finish.

Due to time constraints during the Hands-on session, it is recommended that you first take a look at the
different exercises and then decide which ones you want to work through first.



1





1
V.27
Exercise Estimated Duration
1. Design Studio 70 minutes (4 exercises)
2. HANA Studio 40 minutes (2 exercises)
3. Dashboards 15 minutes (1 exercise)
4. BI Workspaces 15 minutes (1 exercise)
5. ABAP Web Dynpro UI 75 minutes (5 exercises)
4

DESIGN STUDIO

EXERCISE 1.1 GET STARTED

Estimated time: 15 minutes

Objective

In the following exercise you will learn the basics of creating an application with SAP BusinessObjects Design Studio.

First of all, you will select a connection to a Business Warehouse on HANA system and add a data source to your
application.
You will add a chart to your application and bind your data source to it. You will also set properties for your component
and define a filter in the script editor.
Afterwards, you will add a default button to your application, set its properties and execute it in the web browser.


What you learn

Select a connection in Design Studio
Add a data source
Create a chart
Set properties for components
Add a default button
Work with the script editor
Execute application in browser


Exercise Description

The following description only serves as a short overview to what objectives will be executed during the exercise. To
run through the exercise turn the page and start with Exercise 1 Solution.


Open application file Blank
Select a connection to a Business Warehouse
Add a data source to your components
Define properties for your chart
Add a button to your application
Define properties for your button
Test you application in the browser


Find more information on SAP BusinessObjects Design Studio on:
http://scn.sap.com/community/businessobjects-design-studio



5

EXERCISE 1.1 SOLUTION



Explanation Screenshot
1) To open SAP
BusinessObjects Design
Studio navigate to:

Start All Programs
SAP SAP
BusinessObjects Design
Studio Design Studio -
TEC160



2) A popup with the Welcome
Page appears.

Close the Welcome Page
to continue to Design
Studio.

6

3) Click on Application and
select New.



4) Enter a name for your
application, choose
Desktop Browser as a
Target Device and confirm
by clicking
.




5) Select the template Blank
and confirm by clicking
.






7


How to navigate in SAP BusinessObjects Design Studio



After opening Design Studio, closing the welcome page and creating a new, blank, application, you see
the screen above. For these exercises the framed boxes are essential. The following description will
help you familiarize yourself with the interface.

Layout Editor
Displays components and content of your application.

Components
Consists of analytic, basic and container components. These are user interface elements which
you can drag to the layout editor to create the content of your application.

Outline
List of components and data source aliases used in your application.

Properties
List of properties available for selected components.

8

6) To select a connection to a
Business Warehouse
system, select Tools
Preferences

7) A popup window appears.

Click on Application Design
and select Backend
Connections.

8) Check the radio button to
set the connection TEX as
default. As the values are
already entered correctly.



9) Confirm by choosing
.

10) Click on in the toolbar
to add a data source.



9

11) A popup window appears.

Make sure the connection
TEX is selected and click
on to select a
data source.




Note:

If the connection TEX is
not selected, choose the
upper Browse button and
double-click on .

12) Choose InfoAreas as a
view.

13) Expand NetWeaver Demo
and navigate to:

Actual for NW Demo
YTD Sales by Sales Org -
0D_FC_NW_C01_Q0005

Confirm by choosing
.






14) Confirm by choosing
.


10

15) Your data source appears
in the Outline.

16) Click on Chart in the
Components area and drag
it to Layout Editor.

17) You can drag the chart to
the center or place it
anywhere else in the
Layout Editor.

18) You can also change your
charts size as you like.



11

19) Select you data source
0D_FC_NW_C01_Q0005
DS_1 in the Outline area
and drag it onto your chart
in the Layout Editor.

20) Your data appears in a
chart.


21) Select Chart_1 in the
Outline and change its
properties on the right-
hand side.

Change your charts Style
to Glossy.













12

22) Choose the On Select
property and click on to
define a filter.

23) A popup window with the
Script Editor appears.

Click inside the window
and activate the content
assistance with
CTRL+Space.

Double-click on your data
source DS_1 to select it.

24) Add a . (Dot) to open the
content assistance or use
CTRL+Space.

A list of methods appears.
Choose a method either by
typing the first letter of your
method, e.g. s for
SetFilter. Or scroll down
and double-click on
setFilter in order to apply a
filter to your data source.



13

25) To define the parameters
of your filter open the
content assistance with
CTRL+Space.

Double-click on
0D_NW_SORG Sales
Organization.



Note:

If the content assistance
does not open click in
front of the word
dimension, inside the
brackets and press
CTRL+Space.

26) Click in front of the word
value and activate the
content assistance with
CTRL+Space.

Double-click on Chart_1.




27) Add a . (Dot) inside the
brackets to open the
content assistance.

From the list of methods
choose
getSelectedMember.

14

28) Activate the content
assistance with
CTRL+Space.

Select 0D_NW_SORG
Sales Organization.

Add a ; (semicolon)
outside the brackets, at
the end of the line.

29) In the next line enter:

DS_1.moveDimensionTo
Rows(0D_NW_PROD);


Note:

The first character in
0D_NW_PROD is the
number zero not the
letter O.

30) Confirm by choosing
.


Note:

You have now created a
filter for your data source,
which will be applied, when
the event of the chart is
triggered.

31) Select Button in the
Components area and drag
it to the Layout Editor.




Note:

You need to create a
button to get back to your
default view.



15

32) You can change the
buttons size and place it
next to your chart.


33) Select the BUTTON_1 in
the Outline area and
change the buttons display
property Text to Reset.

Select the On Click event
and click on .



34) A popup appears.
Enter the following text:

DS_1.clearFilter(
"0D_NW_SORG ");
DS_1.removeDimension(
"0D_NW_PROD ");


Note:

Alternatively to typing the
code into the script editor
manually, you can copy
and paste it from a
prepared file in the folder:

Session(Local)
TEC160
DesignStudio
DesignStudio_Exercise_
1.1.txt

Beware to copy the entry
for BUTTON_1.

16


35) Confirm by choosing
.

36) Test your application with
CTRL+F11 or select .

37) Click on the bars to see
more details on the product
sales of the Sales
Organization.



38) Choose the Reset Button
to get back to default view.

39) You have completed the
exercise!



You are now able to:

Set up a connection in Design Studio
Add a data source
Create a chart
Set properties for components
Add a default button
Work with the script editor
Execute your application in the browser



17

EXERCISE 1.2 BUILD A MOBILE APP


Estimated time: 20 minutes


Objective

In this exercise you will learn additional features of SAP BusinessObjects Design Studio.

The first objective will be to select a connection with the Business Warehouse system, create a data source, edit its
initial view and create a chart with this data.
You will add a pagebook and crosstab to your application and thereafter generate a QR-Code to display your data on
any iPad.


What you learn

Change the initial view of a data source
Add a pagebook
Add a crosstab
Generate a QR-Code
Execute application on iPad


Exercise Description

The following description only serves as a short overview to what objectives will be executed during the exercise. To
run through the exercise turn the page and start with Exercise 2.1 Solution.


Open application file DESIGNSTUDIO_E1_PART2_BEGIN
Add a connection and data source to your components
Edit the initial view of your data source and create a chart
Add a pagebook to your application
Define properties for your pagebook
Add a crosstab to your application
Define properties for your crosstab
Generate a QR-Code for your application
Display data in a chart and crosstab on an iPad

18

EXERCISE 1.2 SOLUTION


Explanation Screenshot
1) Click on Application and
select Open or select the
icon in the toolbar.








2) Select the file
DESIGNSTUDIO_E1_PAR
T2_BEGIN and confirm by
choosing .

3) Click on Tools and select
Preferences.

4) Check the radio button to
set the connection TEX as
default.


Note:

TEX is a BW on HANA
connection.


19

5) Confirm by choosing
.

6) To add a data source to
your connection click on
Application and select Add
Data Source.

Alternatively, you can click
on the corresponding icon
in the toolbar.

7) A popup window appears.

Make sure the right
connection is selected and
click on to
choose a Data Source.

8) Choose InfoAreas as a
view.

9) Expand NetWeaver Demo
and choose:

Actual for NW Demo
Revenue by Product
Category and Country-
0D_FC_NW_C01_Q0001

Confirm by choosing
.




20

10) Change the Data Source
Alias to Q0001

Confirm by choosing
.

11) The data source appears in
the Outline area.

12) To edit the initial view right-
click on the data source
DS_1 and select Edit Initial
View.

13) A popup window appears
within which you can drag
elements into panels to set
display criteria for your
data source.

Remove the element in
Rows by dragging Product
Category to the panel on
the left-hand side.



21

14) Drag Calendar Year/Month
to Columns.

15) Confirm by choosing
to
add a chart to your outline.

16) Now, you need to add a
pagebook to the BODY.

In the outline area, right-
click on CELL inside BODY
and select:

Create Child Pagebook


22

17) Enter the following
properties in the given
order:


Width: auto

Height: auto

Top Margin: 60

Left Margin: 20

Bottom Margin: 20

Right Margin: 20

Transition Effect: Slide in.


Note:

Generally, when entering
properties start with the
property you want to set
to auto.

18) Expand the Pagebook_1.

Select CHART_1 in the
Outline area and drag it to
PAGE_1.


Note:

If you do not find a
CHART_1, you did not
choose OK + Create
Chart in step 15. Then
please re-do steps 11, 12,
and 15, and then continue
here.



23

19) Select the chart and enter
the following properties:


Width: auto

Height: auto

All four Margins: 0

Charts Type: Column Chart

Style: Glossy

Background Color:
Transparent






Note:

Start with those properties
you need to set to auto.

20) To display the data in a
crosstab from your data
source expand
PAGEBOOK_1.

Right-click on PAGE_2 and
select:

Create Child Crosstab

24

21) Enter the following
properties:


Data Source: Q0001

Always Fill: false

Pixel-Based Scrolling: true

Row limit: 100

Column limit: 100

Width: auto

Height: auto

All four Margins: 0





Note:

Start with those properties
you need to set to auto.

22) To generate a QR-Code for
your application click on
the arrow next to the
execute symbol in
the toolbar and select Send
to iPad (using QR Code).


23) You can scan the QR-
Code with any barcode or
QR-Code scanner
application to your mobile
device or iPad to run it on
your own device.



25



24) To test your application in
the browser, select
Application Execute
Locally or click on in
the toolbar.

25) Your data appears in a
chart.





26) To change the page and
view the crosstab, hold
down the left mouse-
button on the chart and
swipe from right to left or
left to right like you would
do on an iPad.

26) You have completed the
exercise!

You are now able to:

Change the initial view of a data source
Add a pagebook
Add a crosstab
Generate a QR-Code
Execute your application on an iPad

26

EXERCISE 1.3 COMBINE BUSINESS WAREHOUSE AND HANA DATA


Estimated time: 20 minutes


Objective

In this exercise you will learn to apply several data sources to your application, set properties for different components
and create a hierarchical view for your crosstab.

As a start you will create a grid layout and a second chart for your application. You will add a new data source and bind
it to your second chart. You will apply interaction between the individual charts and simultaneously between different
data sources as well
Then, you will display both data sources at the same time, in two different chart types in the layout editor.
Thereafter, you will add a new dimension to your application and apply several filter settings to your components with
the script editor.
You will also add a third data source to your application, bind it to your crosstab and apply a hierarchical view.
Finally, you will be able to execute the application in the browser or on an iPad with more detailed information on e.g.
sales categories or sales by country.


What you learn

Add a grid layout to your application
Bind multiple data sources to different components
Display column chart and pie chart in grid layout
Work with the script editor
Apply a hierarchy to the crosstab
Execute an application with several data sources, charts, a crosstab and a hierarchical view in the browser or
on an iPad


Exercise Description

The following description only serves as a short overview to what steps will be executed during the exercise. To run
through the exercise turn the page and start with Exercise 1.3 Solution.


Open application file DESIGNSTUDIO_E1_PART_3_BEGIN
Add a grid layout to your application
Select a second connection and data source to your components
Display data from several sources in your application
Apply properties to components and set filter settings with the script editor
Add a third data source to your application and adjust a hierarchy to your crosstab
Display application with any iPad or in your browser




27

EXERCISE 1.3 SOLUTION

Explanation Screenshot
1) In the toolbar click on .


Note:

If you have already
successfully completed
Exercise 1.2 you do not
need to open the
template for Exercise 1.3

In this case you can
continue with step 3).


2) Select the file
DESIGNSTUDIO_E1_PAR
T_3_BEGIN and confirm
by choosing
.

28

3) In the Outline area expand
PAGEBOOK_1 and right-
click on PAGE_1 and
choose:

Create Child Grid
Layout







4) Enter the following
properties:


Width: auto

Height: auto

All four Margins: 0

Number of Rows: 1

Number of Columns: 2


Note:

Start with those properties
you need to set to auto.

5) In the Outline area expand
Grid_Layout_1 and drag
Chart_1 into the first CELL.



29

6) Right-click on the second
CELL [1,0] and select:

Create Child Chart

7) Enter the following
properties:

Width: auto

Height: auto

All four Margins: 0

Charts Type: Pie Chart

Swap Axes: True

Style: Glossy

Background Color:
Transparent






Note:

Start with those properties
you need to set to auto.

8) Click on in the
toolbar to add a data
source to your application.

30

9) A popup window appears.

Make sure the connection
ANA is selected and click
on to choose a
Data Source.


Note:

If the connection ANA is
not selected, choose the
upper Browse button and
double-click on ANA to
select it.

10) Expand the folder tec160
and navigate to
TEC160_SALES_AV

11) Confirm by choosing
.

12) Change the Data Source
Alias to SALES_AV and
confirm by choosing

13) Drag the new data source
tec160/TEC160_SALES_A
V to CHART_2.





31

14) Your data appears in two
charts.

15) Now, you want to add a
new dimension to the
HANA data source.

Right-click on your second
data source
tec160/TEC160_SALES_A
V - SALES_AV and choose
Edit Initial View.

16) Select the measure
COMPANY_NAME and
drag it to Rows.

17) Confirm by choosing
.

32

18) To set a filter for your data
source SALES_AV select
Chart_1 in the Outline
area.







19) Go to the right-hand side to
define properties.

Choose the On Select
event and click on to
edit it.

20) A popup window with the
Script Editor appears.

Enter the coding beneath
the screenshot.



Note:

Alternatively to typing
the code into the script
editor manually, you can
copy and paste it from a
prepared file in the
folder:

Desktop
Session(Local)
TEC160 DesignStudio
DesignStudio_Exercise
_1.3.txt

Beware to copy the entry
for CHART_1.




SALES_AV.setFilter(COUNTRY,CHART_1.getSelectedMember(0D_NW
_CNTRY));



33

21) Confirm by choosing
.

22) Test your application with
CTRL+F11 or select in
the toolbar.

23) Your chart opens in a new
browser window.

Click on a country to view
specific information on it.

24) Once you choose a
country, the pie chart only
displays the companies
from the respective
country.

25) To display more detailed
information hover over the
pie pieces or bars.

34

26) To return to default view
click on the same country.









Note:

Close the browser and
return to Design Studio to
continue.

27) Now, you want to display
your data in a hierarchical
view.
Click on in the
toolbar to add another data
source.

28) A popup window appears.

Click on to
select a Connection.


29) Select the connection TEX
and confirm by choosing
.



30) To add a Data Source from
your connection click on
.



35

31) Choose InfoAreas as a
view.

32) Expand NetWeaver Demo
and navigate to:

Actual for NW Demo
Revenue by Product
Category and Region
(Hierarchy View)

Confirm by clicking
.


33) Rename the Data Source
Alias to Q0010.

Confirm by clicking
.


34) To edit the initial view right-
click on your data source
0D_FC_NW_C01_Q0010
and select Edit Initial View.

35) Remove Product Category
from Rows by dragging it to
the panel on the left-hand
side.


36

36) Drag Cal. year/month to
Columns.

Confirm by choosing
.


37) In the Outline area select
the data source
0D_FC_NW_C01_Q0010
and drag it to
CROSSTAB_1.

38) Test your application with
CTRL+F11 or select .



37


39) To change the page and
view the crosstab, hold
down the left mouse-
button on the pagebook
and swipe from right to
left or left to right.

40) Click on or next to
the regions name to
expand or collapse the
hierarchy.

41) You have completed the
exercise!

What you learned:

Add a grid layout to an application
Bind multiple data sources to different components
Display multiple charts in grid layout
Apply a hierarchy to the crosstab
Execute an application with several data sources, charts, a
crosstab and a hierarchical view in the browser or on an iPad

38

EXERCISE 1.4 USE ADVANCED FUNCTIONALITIES

Estimated time: 15 minutes


Objective

Enable the sidebar to carry checkboxes and dropdown menus and use them for filtering the displayed data by
programming the components.

We prepared a template for you to introduce you to this more advanced application.

If you want to build this application all by yourself, we recommend the session AP260, which is all about SAP
BusinessObjects Design Studio.


What you learn

Change the applications initial view to filter by InputString
Add a checkbox to the sidebar
Add an if-query to your checkboxes on click property
Execute an application with a sidebar, checkboxes, a dropdown menu and a hierarchical view in the browser or
on an iPad
Apply different filter options





Exercise Description


Open the template DESIGNSTUDIO_E1_ PART_4_BEGIN
Edit the initial view of Q0001
Activate the time-hierarchy
Set up a default filter for you data source
Add a checkbox and edit its script
Test the application



39

EXERCISE 1.4 - SOLUTION

Explanation Screenshot
1) Open BusinessObjects
Design Studio

Start All Programs
SAP SAP Business
Objects Analysis Design
Studio Design Studio -
TEC160


2) Click on in the toolbar
to open a file.


3) Select
DESIGNSTUDIO_E1_
PART_4_BEGIN and
confirm with


40

4) Right-click on your data
source
0D_FC_NW_C01_Q0001
and select Edit Initial View.

5) A popup window appears
within which you can drag
elements into panels to set
display criteria for your
data source.

Remove the element
Product Category by
dragging it to the panel on
the left-hand side.
c
6) Expand Cal. year / month
and navigate to Hierarchies
YeaQuaMon.

Right-click on YeaQuaMon
and select Activate.



41

7) Select Cal. year / month
and drag it into Columns.

8) Right-click on Cal. year /
month and select Filter by
InputString.

9) A popup appears in which
you can edit the BICS
InputString of your filter.

Delete the input in the text
field.

10) Enter 2012 and confirm
your entry by clicking
.

42

11) Close the Initial View editor
by clicking
.

12) Select Checkbox in the
Components area.

Drag it to the right-hand
side under Drilldown to
create another Checkbox

13) Enter the following
properties:


Name: CB_CHANNEL

Text: Channel

Top Margin: 400

Left Margin: 20

Bottom Margin: auto

Right Margin: auto

Width: 160

Height: auto



14) Select the On Click event
and click on .



43

15) Now, you want to set the
features of your checkbox.
If the checkbox is checked
the dimension channel
should be added to your
data source. To set this
feature enter the following:

If(CB_CHANNEL.isCheck
ed())
{
}


Note:

Alternatively to typing
the code into the script
editor, you can copy and
paste it from a prepared
file in the folder:

Desktop
Session(Local)
TEC160 DesignStudio

DesignStudio_Exercise_1
.4.txt










Note:

If you decided to copy and paste the code from the prepared file, you can
continue with step 22).

16) This if-query checks if the
isChecked property is true.

In between the curly
brackets you can now enter
a code to add a dimension
to the data source.

Click inside the curved
brackets and press
CTRL+Space to open the
content assistance.

You see a list of all your
components.

Select your data source
Q0001 by double-clicking
on it.

44

17) Add a . (dot) behind your
data source and the
content assistance opens
again.

Double-click on the method
moveDimensionToRows.







Note:

If the content assistance
does not open press
CTRL+Space.

18) Open the content
assistance once more by
pressing CTRL+Space.

Double-click on
0D_NW_CHANN to select
it.

Add a ; (semicolon) at the
end of the line, outside the
brackets.


Note:

If the content assistance
does not open click in
front of the word dim,
inside the brackets and
press CTRL+Space.

19) Your code should look like
in the screenshot on the
right-hand side.



45

20) Now, you need to set the
code to remove the
dimension once the
checkbox is unchecked.

You can either try coding it
by yourself (as in steps 16
20) with the method
removeDimension or you
can add the following code
to your script:

If(CB_CHANNEL.ischeck
ed()==false)
{
Q0001.removeDimension
(0D_NW_CHANN);
}


21) Confirm by clicking
.

22) To test your application in
the browser click on in
the toolbar.


23) Your application appears in
the browser.

You can select the
checkbox Channel to add
the dimension Distribution
Channel to your crosstab.

46

24) To add the dimension
Distribution Channel to
your crosstab, select the
checkbox Channel.

25) Now, you can select a
Quarter and a year.



47

26) You can Replace your
current selection with a
new date.

27) Or you can Add another
selection to your current
display and thus compare
several different dates with
one another.

48


28) By clicking on Hide Filter,
you can hide your sidebar.

29) Or enable it by clicking
Show Filter.

30) You have completed the
exercise!

What you learned:

Change the applications initial view to filter by InputString
Add a checkbox to the sidebar
Add an if-query to your checkboxes on click property
Execute an application with a sidebar, checkboxes, a dropdown
menu and a hierarchical view in the browser or on an iPad
Apply different filter options



49

HANA STUDIO

EXERCISE 2.1 SAP HANA

Estimated time: 30 minutes


Objective
In this exercise you will work with the administration and modeling tool for SAP HANA, named SAP HANA Studio. And
the SAP HANA Modeler which is an integral part of the SAP HANA Studio is an Eclipse based modeling environment
designed for technical and power users. With the help of the SAP HANA Modeler, you will design efficient information
models over large volumes of transactional data that can be used for analytical purposes. The key factor of a well-
designed SAP HANA data model is to balance flexibility, complexity, and performance.


What you learn

Use the SAP HANA Modeler
Create Attribute Views and Analytic Views
Create basic JOIN operations
Activate and deploy views


Exercise Description

The following description only serves as a short overview to what objectives will be executed during the exercise. To
run through the exercise turn the page and start with Exercise 2.1 Solution.


Preparations: Set up your SAP HANA Studio
Analyse Database Tables
Create an Attribute View
Create an Analytic View





50

EXERCISE 2.1 SOLUTION

Explanation Screenshot
1) Preparations: Set up your
SAP HANA Studio
Preparations: Set up your SAP HANA Studio
2) Start the SAP HANA Studio
from the Windows Desktop.


3) Optional:
If SAP HANA Studio is
started for the first time on
a given PC/user account, a
wizard appears that allows
choosing a working mode.

For this exercise, choose
the Modeler perspective
(Open Modeler).

4) Alternative: if your local
SAP HANA Studio has
already been started by
someone else, the above
selection wizard will not
appear.

To make sure the following
exercises can be followed,
you can explicitly switch
the application into the
modeler mode:

Choose the menu path
Window Open
Perspective
Other







51


From the pop-up, select
Modeler

the system will
switch into modelling
mode.

However, there may still
be a user-specific UI
configuration active
from a previous
session.

Choose the menu path
Window Reset
Perspective

Confirm the Pop-up
dialog with OK

this will create the
default UI configuration
for creating Information
Models.



5) In the following steps we
are going to set up a
connection to a SAP HANA
database system.

The system/user definitions
appear in the left-hand part
of the screen, the so-called
Navigator.

52

6) In order to add a new
system, right-click on the
background of the white
area in the Navigator
view.

Choose Add System
from the context menu.

7) In the System pop-up you
have to enter values for the
following parameters:

Hostname:
coe-he-076.wdf.sap.corp

Instance Number:
00

Description:
free choice

Locale:
English


Click > Next.



53

8) Enter your assigned User
and Password credentials.

- Use TEC160_XX where
XX represents your
assigned group number.

- The password is
Welcome1.

- Click > Finish.

9) If a new popup window
appears aking to enable
password recovery, choose
NO.







10) The representation of the
SAP HANA system in the
Navigator tree consists of
two parts:
The Catalog is the
database
administrators view of
the SAP HANA system.
It contains all database
objects, e.g. database
schemas (with tables,
views, procedures) and
an authorization folder
in which one can find all
database users and
available roles.
The Content is the
modelers view of the
SAP HANA system:
here one can create
multi-dimensional data

54

models, organized in a
package structure.
11) The Catalog contains
folders for all database
schemas
Each Schema contains
a folder for Column
Views, Procedures,
Tables and Views.
Also notice the Catalog
has a folder for
Authorizations.

12) The basis for this hands-on
session are the tables in
schema TEC160.
To analyse them expand
the Tables node under
schema TEC160.



55

13) First of all lets have a look
at the product data table
details.
To do so right-click on the
Product Data Table
(SNWD_PD) node and
select Open Definition
from the popup.

14) Now you can see on the
right side of the studio the
table definition including
columns etc.

15) To be able to see the
content of the product data
table you have to right-click
the table and select Open
Data Preview from the
context menu.

56

16) Now the records in that
table are displayed (e.g.
Notebooks, Flat screens
etc.).

17) You can repeat the
procedure mentioned
above for the Business
Partners (SNWD_BPA)
table.

18) Now lets have a look at
some transactional data.
To do so right-click on the
Sales Order Header Table
(SNWD_SO) and select
Open Definition from the
popup.



57

19) By clicking on the Runtime
information tab you get
information about how
many records are stored in
that table.

20) Right-click on the Sales
Order Header Table
(SNWD_SO) again and
select Open Data Preview.

21) And by selecting Open
Data Preview for that sales
order header table you get
information about the
actual content.

58

22) You can repeat the
procedure mentioned
above for the Sales Order
Item Table (SNWD_SO_I).

23) On the other hand the
Content contains folders for
all packages in the system

Packages can have a
hierarchical structure
Inside of each package
there are folders for the
different types of
objects one can build to
create a data model in
SAP HANA.

24) When reporting off the data
models, the system can
filter on the data client and
the language of text fields
dynamically.

In order to enable dynamic
client handling, do the
following:

In the menu, go to:
Window Preferences.

In the pop-up, go to
Modeler Default


59


Model Parameters.

Set Default Client to
dynamic.



60

25) Create the Attribute View Create the Attribute View
26) Please navigate in the
Modeler to your own
package.

NOTE: Please make sure
you select your own
package:

tec160-xx


To create a new Attribute
View you have to right-
click on your package and
then select New >
Attribute View from the
context menu.

27) In the New Attribute View
popup you have to enter
the following:

Name:
TEC160_XX_MMDD_PD_
BP_AT

Description:
TEC160_XX_MMDD_PD_
BP_AT


Note:

MM should be replaced
with the Month and DD
with the Day you are
taking this exercise on!
XX is to be replaced with
your assigned user
number (like in the one
you used in your
username).

Then select the Standard
Attribute View Type and
click on the Next button.



61

28) Open the Tables folder of
the TEC160 schema.


29) Select and add (-> Add
button) the following tables:

SNWD_PD
SNWD_BPA
SNWD_AD


62

30) As a result in the Selected
area you should see the 3
tables.

Click on the Finish button
to get into the Attribute
View Editor.


Tip: In case you closed the
creation wizard for the
Attribute view before
selecting all tables, you
can press the "Add table"
button in the upper right
corner



and continue the table
selection.

31) The Attribute View editor
gets populated with the
selected tables.
This is where you will
define the relationships of
the attributes.



63

32) Now select the fields for
use in the attribute view:

Select the key field
NODE_KEY and right
mouse click on it.
Choose Add as Key
Attribute from the
context menu.
Result: The attribute
NODE_KEY:SNWD_P
D.NODE_KEY is
displayed in the Output
frame.




33) Optional:
Select NODE_KEY from
the Output frame and
display its properties

On the Properties Tab for
field NODE_KEY, select
Description Mapping and
choose the field
TEC160.SNWD_PD.PROD
UCT_ID from the drop
down list.



64

34) Join field
SUPPLIER_GUID from
table SNWD_PD to field
NODE_KEY of table
SNWD_BPA as a left outer
join.

To do so select field
SUPPLIER_GUID with the
left mouse button and hold
it and wire that field with
the NODE_KEY field.

Click on the join (line) and
change the join type in the
property view:

Left Outer (Join Type)

n..1 (Cardinality)




35) Join field ADDRESS_GUID
from table SNWD_BPA to
field NODE_KEY of table
SNWD_AD as a left outer
join.

To do so select field
ADDRESS_GUID with the
left mouse button and hold
it and wire that field with
the NODE_KEY field.

Click on the join (line) and
change the join type in the
property view:

Left Outer (Join Type)

n..1 (Cardinality)



65


36) Now the following
additional fields should be
added as attributes:

PRODUCT_ID:SNWD_PD.
PRODUCT_ID
CATEGORY:SNWD_PD.
CATEGORY
SUPPLIER_GUID:SNWD_
PD.SUPPLIER_GUID

COMPANY_NAME:SNWD
_BPA.COMPANY_NAME

COUNTRY:SNWD_AD.CO
UNTRY

37) As a result the Output
frame should look like in
the screenshot on the right.

66

38) The Attribute View is fully
defined. We can validate
and activate it now.

On the Attribute View
TEC160_xx_PD_BP_AT,
right click and select at first
Validate.

A popup may appear
asking you if you want to
save your object. Confirm
by clicking yes.


If the validation was
successful, select Activate
afterwards.


Result: The Job Log will
show Completed
successfully or give an
error message.






39) On the Attribute View
TEC160_xx_PD_BP_AT,
right click and select Data
Preview now.

40) In the Data Preview view
of this attribute view 106
rows are displayed.
A row contains information
about the business partner
/ supplier and information
about related products.



67

41) Create the Analytic View Create the Analytic View
42) (Close all open views prior
to creating a new analytic
view.)

Please navigate in the
Modeler to your own
package.

NOTE: Please make sure
you select your own
package:

tec160-xx


To create a new Analytic
View you have to right-
click on your package and
then select New >
Analytic View from the
context menu.

43) In the New Analytic View
popup you have to enter
the following:

Name:
TEC160_XX_MMDD_SAL
ES_AV

Description:
TEC160_XX_MMDD_SAL
ES_AV


Then click on the Next
button.

68

44) Now select and add (->
Add button) the following
tables from schema
TEC160:

SNWD_SO_I
SNWD_SO


Click on the Next button.

45) On the next screen of the
wizard, navigate to your
package, expand the folder
and select the attribute
view

TEC160_XX_MMDD_PD_
BP_AT.

and add it by clicking Add.

Click on the Finish button.



69

46) The Analytic View editor
gets populated with the
selected tables.
This is where you will
define the relationships of
the attributes, etc.

Note:
If you dont see these
tables, choose the Data
Foundation Tab.

47) Navigate to the Logical
View Tab to see the
attribute view.

Note that the Data
Foundation is empty.
It will be filled once you
select your fields (attributes
and measures).

70

48) Navigate back to the Data
Foundation Tab and
select the fields for use in
the analytic view.

At first select the field
GROSS_AMOUNT and
right mouse click on it.
Choose Add as Measure
from the context menu.

49) As a result the measure
GROSS_AMOUNT:SNWD
_SO_I.GROSS_AMOUNT
is displayed in the Output
frame.



71

50) Now the following
additional fields should be
added as (private)
attributes:

SO_ITEM_POS:SNWD_S
O_I.SO_ITEM_POS

PRODUCT_GUID:SNWD_
SO_I.PRODUCT_GUID


Note:
For now we will not add
any attributes from the
sales order header table
(SNWD_SO).
After completing this
exercise you can start to
experiment and add
additional attributes e.g.
sales order ID (SO_ID),
etc.

51) Join field PARENT_KEY
from table SNWD_SO_I to
field NODE_KEY of table
SNWD_SO as an inner
join.

To do so select field
PARENT_KEY with the left
mouse button and hold it
and wire that field with the
NODE_KEY field.

Click on the join (line) and
change the join type in the
property view:

Inner (Join Type)

n..1 (Cardinality)



72



52) Navigate to the Logical
View tab.

Join field
PRODUCT_GUID from
Data Foundation to field
NODE_KEY of attribute
view
TEC160_xx_PD_BP_AT
as an inner join.

To do so select field
PRODUCT_GUID with the
left mouse button and hold
it and wire that field with
the NODE_KEY field.

Click on the join (line) and
change the join type in the
property view:

Inner (Join Type)

n..1 (Cardinality)





73

53) And in the end the Output
frame should look like the
one on the right side.


The Analytic View is fully
defined. We can validate
and activate it now.

On the Analytic View
TEC160_XX_MMDD_SAL
ES_AV, right click and
select at first Validate.

A popup may appear
asking you if you want to
save your object. Confirm
by clicking yes.

If the validation was
successful, select Activate
afterwards.


Result: The Job Log will
show Completed
successfully or give an
error message.






74

54) On the Analytic View
TEC160_XX_MMDD_SAL
ES_AV, right click and
select Data Preview now.

55) In the Data Preview view
of this analytic view 140
rows are displayed.
A row contains information
about the business partner
/ supplier, information
about related products and
sales data like gross
amount, etc.



75



56) Optional:

Navigate to the Analysis
tab.

Drag and drop the
COMPANY_NAME object
to the Labels axis box.

Drag and drop the
GROSS_AMOUNT object
to the Values axis box.

57) Now you should see a
column chart like the one
on the right side.

Congratulations on
finishing this exercise!

You have made it!

76

EXERCISE 2.2 SAP HANA


Estimated time: 10 minutes


Objective
In this exercise you will work with SAP BusinessObjects Analysis, edition for Microsoft Office. Analysis is a
Microsoft Office Add-In that allows multidimensional ad-hoc analysis of OLAP sources in Excel. It also
allows, Excel workbook based application design. Within SAP BusinessObjects Analysis for Microsoft Excel
you will consume the analytic view you have created in exercise 2.1 and create your own report.


What you learn

Use SAP BusinessObjects Analysis for Microsoft Excel
Consume SAP HANA Analytic Views
Create your own report


Exercise Description

The following description only serves as a short overview to what objectives will be executed during the
exercise. To run through the exercise turn the page and start with Exercise 2.2 Solution.


Consume the Analytic View in SAP BusinessObjects Analysis for Microsoft Excel
Create your own report


77

EXERCISE 2.2 SOLUTION

Explanation Screenshot
1) Consume the Analytic
View in SAP
BusinessObjects
Analysis for Microsoft
Excel and create your
own report
Consume the Analytic View in SAP BusinessObjects Analysis for
Microsoft Excel and create your own report
2) Open the program
Analysis for Microsoft
Excel from the start menu.

Choose Start SAP
SAP BusinessObjects
SAP BusinessObjects
Analysis Analysis for
Microsoft Excel to start
the program.


3) At first select the Analysis
tab.

78

4) Start the Insert Data
Source wizard:

Make sure to work in
ribbon-area Analysis.

Select Insert Select
Data Source.

5) If this connection wizard
pops up select Skip.

6) The next screen presents
you a list of known ODBC
connections and SAP
Systems.

Choose the entry ANA
which is an ODBC
connection to the SAP
HANA database system
coe-he-076.wdf.sap.corp
(ANA).

Click on the Next button.



79

7) Enter your assigned User
and Password credentials.

- Use TEC160_XX where
XX represents your
assigned number.

- The password is
Welcome1.

- Click > OK.

8) In the next window select
Folders.

9) The software presents you
with a list of all packages in
the SAP HANA database
system ANA. Open your
package
tec160.session1.tec160-xx
and select your Analytic
View
TEC160_XX_MMDD_SAL
ES_AV.

Click on the OK button.

10) Now the total gross
amount (measure) is
displayed in the
spreadsheet area.

80

11) To analyse the total gross
amount more in detail go to
the Analysis section.

Here you can first of all
drag the attribute
COUNTRY to the Rows
area.

12) As a result the additional
column COUNTRY is
displayed in the
spreadsheet area and you
can see the gross amount
for each country.



81


13) Also drag the attributes
COMPANY_NAME and
CATEGORY to the Rows
area.

14) As a result the additional
columns
COMPANY_NAME and
CATEGORY are displayed
in the spreadsheet area
and now you can see the
gross amount for each
company and different
product categories in all
countries. One example is
AVANTEL in Mexico.

For sure you can
experiment with further
attributes.

Congratulations on
finishing this exercise!

You have made it!





82

DASHBOARDS

EXERCISE 3

Estimated time: 15 minutes


Objective

In the following exercise you will work with the data visualization tool SAP BusinessObjects Dashboard.

You will start this exercise with opening a blank document and importing data from a prepared Microsoft Excel file.
After that you will define values and properties for the inserted map. You will set limits for color alerts inside the map
and add an external interface connection to your dashboard.




What you learn

Add a map to your workspace
Import data from Microsoft Excel
Set limits for color range
Add external interface connection
Save to platform



Exercise Description

The following description only serves as a short overview to what objectives will be executed during the exercise. To
run through the exercise turn the page and start with Exercise 3 Solution.


Open a blank model
Import data from an external source
Adjust properties and set alert values
Set up an external interface connection
Save your Dashboard to the platform






Find more information on SAP BusinessObjects Dashboards on: http://help.sap.com/boxcel


83

EXERCISE 3 SOLUTION


Explanation Screenshot
1) To open SAP
BusinessObjects
Dashboards navigate to:

Start and select SAP
BusinessObjects
Dashboards.

2) Wait, until the entire page
has loaded and click on
Blank Model to create a
new model.

3) In the toolbar click on Data
and choose Import.

4) A popup appears.

Confirm by clicking
.

84

5) Select Desktop and
double-click on the folder
Session (Local) to open it.

6) Double-click on TEC160.

7) Double-click on
Dashboards.

8) Select Sales by Country

9) On the left-hand side, open
Maps.

10) Scroll down to Europe by
country and select it.



85

11) Drag Europe by country to
the canvas.

12) In the toolbar, click on
to fit the canvas to its
components.
13) Click on the map to select
it.

Now, go to the right-hand
side to set general settings
for your map.

Beneath Display Data, click
on .

14) In the table select rows A1
to B10.

15) Confirm by clicking on
.

86

16) Go back to the right-hand
side and select Alerts in
the maps properties.

17) Select the checkbox to
Enable Alerts.

18) Go down to Color Order
and check the radio button
for High Values are good.

19) Select the red delete
checkbox to remove the
threshold for the maximum
value.

20) Select the yellow line and
change its value to
6 000 000.

21) In the line above the
colored properties enter
18 000 000 and click on
.

22) In the maps properties
choose General.

23) Now, you want to change
the Source Data.

Select to choose a
Source Data.



87

24) In the first column select
A2 to A10.

25) Confirm by clicking
.

26) Now, that you set the Data
Source you need to select
a Destination.

Select the lower to
choose a Destination.

27) Select the cell D2

28) Confirm by clicking
.

29) In the menu bar, select
Data Connections

88

30) To add a connection click
on Add.

31) From the list of available
connections, choose:
External Interface
Connection.


32) Your first connection
appears on the left-hand
side.

Click on to add
properties for your
connection.

33) Change the Range Name
to Country.

34) Click on the lower to
set a Range.



89

35) Select the cell D2

36) Confirm by clicking
.

37) In the bottom right corner
click on to exit
Definitions.

38) In the toolbar, select File
Save to Platform

39) To Log On to the
BusinessObjects
Enterprise platform, enter
the following credentials:



User name: TEC160

Password: welcome

90



40) Scroll down to TEC160 and
expand it.

41) Select My Documents and
enter an arbitrary name like
Sales by Country.

Confirm your entry with
.

42) Close SAP
BusinessObjects
Dashboards.

43) Select no when asked if
you want to save changes.


Note:

You do not need to save
changes because that will
be saved locally on your
laptop.

44) You have completed the
exercise!



You are now able to:

Add a map to your workspace
Import data from Microsoft Excel
Set limits for color range
Add external interface connection
Save to platform



91

BI WORKSPACES

EXERCISE 4 BI WORKSPACES

Estimated time: 15 minutes


Objective

In the following exercise you will work with the data visualization tool SAP BusinessObjects BI Workspaces.

You will start by loading several modules and adding them to your workspace. After adjusting size and location of your
modules, you will use content linking to set parameters between the single interfaces and also set filter values for
these.

Furthermore you will save your BI Workspace locally and execute it in the BI Launch Pad to display its features and
view data.



What you learn

Add different modules to your workspace
Display map, pie chart and table in your workspace
Link content
Execute your Business Intelligence Workspace in the browser



Exercise Description

The following description only serves as a short overview to what objectives will be executed during the exercise. To
run through the exercise turn the page and start with Exercise 4 Solution.


Add several modules to your workspace
Adjust size and location of your modules
Link content
Save and execute your workspace



Find more information on SAP BI Platform on:
http://help.sap.com/bobip



Find more information on SAP BI Workspace on: http://help.sap.com/bobip#section7
92

EXERCISE 4 SOLUTION

Explanation Screenshot
1) Open Internet Explorer 9
from your desktop.


2) Select the shortcut BI
launch pad.

3) Refresh the site with or
F5 and add the following
credentials:


User Name: TEC160

Password: welcome





Note:

System name and
Authentication are
automatically set correctly.

4) Click on to open BI
Workspaces.

5) In the toolbar click on
Remove Column to reduce
the amount of columns to
two.



93

6) On the left-hand side in
Module Library select
Public Modules.


7) A list with several different
public modules opens.

Click on TEC160 to expand
it.

8) Expand Modules.

9) Select the Module Sales by
Country.

94

10) Drag Sales by Country to
your workspace into the
first column.

11) Select the Module Sales by
Category.

12) Drag Sales by Category to
your workspace in the
column next to your map.

13) Select the Module Sales
Details.



95

14) Drag Sales Details into the
right column under your pie
chart.

15) Resize Sales Details to
enlarge the table and
display more data.

16) Right-click on the report
and choose Select this
report part.

96

17) Your report should look like
in this screenshot.

18) Enlarge the pie chart as
well.

19) Enlarge the map.



97

20) Everything should be
displayed larger now.

21) Now, you want to link the
single elements of your
workspace to each other.

In the toolbar click on
Content Linking.

22) A popup for content linking
appears.

You see your three
modules displayed as
boxes.


Note:

If your boxes are already in
line, continue with step 24).

If not:
Drag Sales Details to the
right hand side.

23) Select Sales by Category
and drag the box to the
empty space between
Sales by Country and
Sales Details

24) Hold down the left mouse
button on the small sphere
of Sales by Country and
connect it to Sales by
Category.

98

25) You have now connected
the parameter output of
Sales by Country with the
parameter input of Sales
by Category.

26) Go to Parameter Mapping
at the bottom-right to
choose a Target Parameter
for your source Country.

27) In the drop down menu
click on Country_in.

28) Now you have to set a
second connection
between Sales by
Category and Sales
Details.

Hold down the left mouse
button on the small sphere
of Sales by Category and
drag it to the sphere of
Sales Details.

29) You have now connected
the parameter output of
Sales by Category with the
filter input of Sales Details.



99

30) Your second connection is
now selected.

Go back to Parameter
Mapping at the bottom right
and choose the Target
Parameter for your source
Category_out.

31) In the dropdown menu click
on Category.

32) Now choose the Target
Parameter for your source
Country_out.

33) In the dropdown menu click
on Country.

100

34) Confirm your selection by
clicking on at
the bottom right.

35) You return to your
workspace.

Navigate to the right-hand
side and click on Exit Edit
Mode.

36) Click on to
save your BI Workspace.

37) Click on Folders to expand
it.



101

38) Navigate to:

Public Folders TEC160
My Documents

39) Enter a filename for your
BI Workspace and confirm
by clicking on
.

40) You can open the BI
Workspace in a new
window.

41) Hover over a country to
view the total amount of
sales for such.

Click on a country, e.g.
Germany to show details in
the pie chart for Sales by
Category.

102



42) Hover over the pie pieces
to view a categorys total
amount of Sales by
Category.

Click on a pie piece, e.g.
Mobile Devices, to show
detailed information
concerning that category in
the table beneath the pie
chart.


43) You can see all the
information on the filtered
category.

Close the window with the
BI workspace.

44) To exit from the BI Launch
Pad click on Log Off in the
upper right corner.

45) Close the browser
afterwards.

46) You have completed the
exercise!



You are now able to:

Add different modules to your workspace
Display map, pie chart and table in your workspace
Link content
Execute your Business Intelligence Workspace in the browser



103





ABAP WEB DYNPRO

NAMING CONVENTIONS
FOR USERS AND OBJECTS CREATED IN THIS SESSION



System M12
Client 800
Users
Password
TEC-MMDD##
welcome
Web Dynpro component ZTEC160_MMDD_XXX
Role ZTEC160R_MMDD_XXX

Example:
TEC-070121 is the user
for date 7 of January and Group 21


Example:
ZTEC160_0701_A21
Is the Web Dynpro component for Date 7 of January
for user Session A and Group 21

NOTE YOUR INDIVIDUAL NAMING CONVENTION IN THE SPACE BELOW!
User TEC-
Web Dynpro component ZTEC160_
Role ZTEC160R_
Note
For the Virtual
Hands-on session
replace DDMM##
with todays date
and your group
number
Note
For the Virtual
Hands-on
session ID = A
104

EXERCISE 5.0 LOGIN & MANDATORY STEPS

Estimated time: 10 minutes



This Exercise 5.0 has to be executed mandatory for all Exercises 5.1 - 5.4!!!



Objective

In the following exercise 5.0 you will log on to the SAP ABAP system, prepare a local copy of the exercise template
and create a role. After this exercise you can choose with which you want to continue as all other exercises are
independent of one another.


Find more information on developing Web Dynpro ABAP Application here:
http://help.sap.com/saphelp_nw73ehp1/helpdata/en/4e/161363b81a20cce10000000a42189c/fram
eset.htm

LOGIN & MANDATORY STEPS

Explanation Screenshot
1) Start SAP Logon from your
Desktop.


2) Double click on M12 to
connect to the system.



105

3) Enter the following
credentials:

Client: 800

User: TEC160-MMDD##

Password: welcome

Logon Language: en

Confirm your entry by
pressing ENTER.


Note:

Change
MM = Month
DD = Todays date
## = Group ID


4) To start ABAP Workbench,
go to the command entry
field in the upper left corner
and enter the transaction
code /nse80.

Confirm your entry by
pressing ENTER.

5) Select
Web Dynpro Comp. / Intf
in the upper text field.

Enter ZTEC160_TEMP in
the lower entry field.

Confirm your entry with
ENTER.

106

6) In the navigation tree, right-
click on the object
ZTEC160_TEMP and
choose Copy.

7) In the popup, enter a name
for your copy in the
following format:
ZTEC160_MMDD_XXX


Note:

MM should be replaced
with the Month and DD
with the Day you are
taking this exercise on!
XXX should be changed
into your session ID (=A)
group number!


For naming conventions see page 103!

MM = Month
DD = Todays date
XXX = Session ID (=A) + Group ID
8) Save as Local Object.








107

9) Right-click on your object
ZTEC160 and select
Activate.

10) In the popup choose
to confirm the activation of
inactive objects.












Note:
This step takes a few
seconds as the Web
Dynpro component will be
activated.

11) Right-click on your object
ZTEC160_MMDD_XXX
and choose Create Web
Dynpro Application.




Note:

Your objects name will
differ from the example!
As you replaced MMDD
with the current date and
XXX represents your group
number!

108

12) Your applications name will
be displayed.
Choose to confirm.

13) Choose to save your
application.

14) Save as Local Object.

15) In the navigation tree,
expand Web Dynpro
Applications, select
ztec160_MMDD_XXX and
right-click on it.
From the dropdown menu
choose Test.



109

16) Your application will appear
in a browser window.

You can now select a
Product and the according
Business Partners will be
displayed in the table
below.











Note:

Business partners will not
change for all products.

17) Close the browser session
in the upper right corner.

18) Switch back to the ABAP
Workbench and start role
maintenance. Go to the
command entry field in the
upper left corner and enter
the transaction code
/npfcg.

Confirm your entry by
pressing ENTER.

19) Enter a name for your role
in the following format:
ZTEC160R_MMDD_XXX



Note:

MM should be replaced
with the Month and DD
with the Day you are
taking this exercise on!
XXX should be changed
into your group number!




For naming conventions see page 103!

MM = Month
DD = Todays date
XXX = Session ID + Group ID
110


Choose Single Role to
continue.

20) Choose the tab User.

21) A popup will show up. Click
on to
save the role.

22) Type in your user name.

23) Click on in the toolbar
to save your role.



111



25) You have completed the
exercise!



You are now able to start with any of the following exercises: 5.1, 5.2, 5.3
or 5.4!

As all exercises are independent from one another you are free to choose
your own order from this point forward!
112

EXERCISE 5.1 AUTO-COMPLETION

Estimated time: 5 minutes


Objective

In the following exercise we will enhance an ABAP Web Dynpro Application. You will learn how to activate the auto-
completion of input fields.



What you learn

Apply auto-completion to an input field of an ABAP Web Dynpro Application



Exercise Description

The following description only serves as a short overview to what objectives will be executed during the exercise. To
run through the exercise turn the page and start with Exercise 5.1 Solution.


Open the Web Dynpro component you created in exercise 5.0
Navigate to the input field for the Product Name in the MAIN_VIEW of your component and activate the
suggestValues property
Activate and test your Web Dynpro application
























Find more information on Suggested Values for Input Fields in ABAP Web Dynpro here:
http://help.sap.com/saphelp_nw73ehp1/helpdata/en/8c/20efbd1b0a463ba5914356f01de03f/frame
set.htm


113

EXERCISE 5.1 SOLUTION

Explanation Screenshot
1) Attention:

Make sure you already
executed the mandatory
steps of exercise 5.0 to
continue!



2) To start ABAP Workbench,
go to the command entry
field in the upper left corner
and enter the transaction
code /nse80.

Confirm your entry by
pressing ENTER.

3) In the dropdown menu on
the left-hand side choose
Web Dynpro Comp. / Intf.


Note:

The screenshot on the
right deviates in name
from your own display,
as you replaced
MMDD_XXX with your
own credentials before!

4) In the navigation tree on
the left- hand side navigate
to:

Views MAIN_VIEW

Double-click on
MAIN_VIEW to display it.

114

5) Choose in the toolbar
to switch into edit mode.

6) In the Layout tab on the
right-hand side expand the
nodes TABS_FILTER
TAB_FILTER_NAME
CONT_FILTER_NAME
FILTER_NAME.

7) Scroll down and activate
the property suggestValues
by selecting the checkbox.



8) To save your component.
click on in the toolbar



115

9) Double click on your Web
Dynpro component
ZTEC160.

Then Right-click on your
Web Dynpro component
ZTEC160,,,,,.. and select
Activate.

10) In the popup choose
to confirm the activation of
inactive objects.







Note:

Activation of the Web
Dynpro component may
take several seconds. Wait
until you see
in
the bottom left corner.


11) In the navigation tree,
expand Web Dynpro
Applications and select
Test.

116



12) Your data is displayed in a
table.

You immediately see the
existing values when
entering the first letter of a
word in the input field.

E.g. enter N and you will
see all categories starting
with the letter N as
displayed in the
screenshot.

13) You have completed the
exercise!



You are now able to:

Apply auto-completion to an input field of an ABAP Web Dynpro
Application



117

EXERCISE 5.2 ENHANCE YOUR WEB DYNPRO WITH FLASH ISLAND

Estimated time: 20 minutes


Objective

With SAP BusinessObjects Dashboards 4.0 you can create Dashboard model which can be embedded into Web
Dynpro ABAP application. Here you will learn how easy it can be to integrate an existing Adobe Flash based
Dashboard model (SWF file) into a Web Dynpro ABAP application.

What you learn

How to consume Dashboard models (SWF file) as Flash Island in Web Dynpro ABAP UI element
How to define the interface to establish the data transfer between the Dashboard model and the View context



Exercise Description

The following description only serves as a short overview to what objectives will be executed during the exercise. To
run through the exercise turn the page and start with Exercise 5.2 Solution.



Open your Web Dynpro component you created in exercise 5.0
Swap the ROOTUIELEMENTCONTAINER to Flash Island in the COUNTRIES_MAP view
Insert the data sources and the required properties
Map the properties to the view context
Activate and test your application




















Find more information on integrating Flash Islands in ABAP Web Dynpro Applications here:
http://help.sap.com/saphelp_nw73ehp1/helpdata/en/1b/eac5a6dc724b5cb7a6cc6b91fbbd64/frames
et.htm
118

FLASH ISLAND

The Flash Island Worldmap.swf which we are using in this exercise was implemented in SAP Dashboards. Each map
shows how many customers bought a selected product. We will briefly explain the Flash Island interface.

The Flash Island show maps. We are using one world map and six continent maps. Via the interface we steer which
map and data are visible. The world map requires different data as the six continent maps.

The world map is using the data of an Excel area (Column J and K). These Columns are bound to the data source
Continent with the attributes continent and value.


The continent maps are using the data of an Excel area (Column D, E and F). These Columns are bound to the data
source Data with the attributes continent, county and value.


These data sources and some additional properties and events need to be bound via context binding in the Web
Dynpro View.


119

EXERCISE 5.2 SOLUTION


Explanation Screenshot
1) Attention:

Make sure you already
executed the mandatory
steps of exercise 5.0
before you continue!


2) To start ABAP Workbench,
go to the command entry
field in the upper left corner
and enter the transaction
code /nse80.

Confirm your entry by
pressing ENTER.

3) In the dropdown menu on
the left-hand side make
sure Web Dynpro Comp. /
Intf. is selected.

4) In the navigation tree on
the left- hand side navigate
to:

Views
COUNTRIES_MAP

Double-click on
COUNTRIES_MAP to
display it.

120

5) If you are in the display
mode, click on in the
toolbar to switch into edit
mode.

6) Go to the right-hand side
and right-click on
ROOTUIELEMENTCONTA
INER.

Select Swap Root Element.



7) A popup appears where
you need to enter the typ of
your element.

Select to open the
dropdown menu and
choose Flash Island.

8) Confirm your selection with
.

9) In the property view enter:

Height = 400px
swfFile = Worldmap.swf
tooltip = World Map
width = 520px


Note:

The swf.file is case
sensitive thus beware to
use upper case letters for
the swf. file:
Worldmap.swf.



121

10) Go to the right-hand side
and right-click on
ROOTUIELEMENTCONTA
INER.

Select Insert Data Source.


Note:

Beware to follow the order
of properties as given in
this script!
Attributes need to be
executed solemnly in the
given order. Any
deviations in order will
result in malfunction of
your FlashIsland!

11) Enter the name Data for
your objects.

12) To define a data source
click on .

13) A popup appears within
which you can define
context binding.

From the list of elements
choose: COUNTRIES.

Confirm your selection with
.

122

14) Right-click on
GACDATASOURCE.

Select Insert Property.

15) Enter a name for your first
property, e.g.Property1
and select the checkbox to
remove the readOnly
restriction.

16) To define an attribute for
your property click on
.

17) From the list of elements
choose: CONTINENT.

Confirm your selection with
.



123

18) Once more right-click on
GACDATASOURCE .

Select Insert Property.

19) Enter a name for your
second property,
e.g.Property2 and select
the checkbox to remove
the readOnly restriction.

20) To define an attribute for
your property click on
.

21) From the list of elements
choose: COUNTRY.

Confirm your selection with
.

124

22) Once more right-click on
GACDATASOURCE .

Select Insert Property.

23) Enter a name for your third
property, e.g.Property3
and select the checkbox to
remove the readOnly
restriction.

24) To define an attribute for
your property click on
.

25) From the list of elements
choose: VALUE.

Confirm your selection with
.



125

26) Go back to the right-hand
side and right-click on:

ROOTUIELEMENTCONTA
INER

Select Insert Data Source.


27) Enter the name Continent
for your objects.

28) To define a data source
click on .

29) A popup appears within
which you can define
context binding.

From the list of elements
choose: CONTINENTS.

Confirm your selection with
.

126

30) Right-click on
GACDATASOURCE_1.

Select Insert Property.

31) Enter a name for your
fourth property,
e.g.Property4 and select
the checkbox to remove
the readOnly restriction.

32) To define an attribute for
your property click on
.

33) From the list of elements
choose: CONTINENT.

Confirm your selection with
.



127

34) Once more, right-click on
GACDATASOURCE_1.

Select Insert Property.

35) Enter a name for your fifth
property, e.g.Property5
and select the checkbox to
remove the readOnly
restriction.

Click on to
define an attribute for your
property.

36) From the list of elements
choose: VALUE.

Confirm your selection with
.

37) Go back to
ROOTUIELEMENTCONTA
INER and right-click on it.

Select Insert Event.


128

38) Enter Selected_Continent
as a name for your event
and click on to choose
an onAction event.

39) From the dropdown menu
choose
FILTER_CONTINENT.

40) Once more, go back to
ROOTUIELEMENTCONTA
INER and right-click on it.

Select Insert Event.


41) Enter Country as a name
for your event and click on
to choose an onAction
event.

42) From the dropdown menu
choose
EVENT_HANDLER.



129

43) Back on the right-hand
side, right-click on
GACDATASOURCE.

Select Insert Property.

44) Enter Selected_Continent
and select the checkbox to
remove the readOnly
restriction.

Click on to
define a filter attribute for
your property.

45) From the list of elements
choose: CONTINENT.

Confirm your selection with
.

46) One last time, right-click
on
ROOTUIELEMENTCONTA
INER.

Select Insert Property.


47) Enter Country as a name
and select the checkbox to
remove the readOnly
restriction.

Click on to
define a filter attribute for
your property.

130

48) From the list of elements
choose: COUNTRY.

Confirm your selection with
.

49) Here you find an overview about the created data sources, properties and actions. Please double check your
own entries beneath ROOTUIELEMENTCONTAINER with the table below.
The integration of the FlashIsland will only work if the following entries are correct.





50) Go back to the toolbar and
choose to exit the
edit mode.

51) A popup appears.

Click on to
save your changes.



131

52) Go to the left-hand side
and right-click on your
object
ZTEC160_MMDD_XXX.

Choose Activate.

53) A popup appears within
with a list of inactive
objects.

Click on to continue.


Note:

Activation may take several
seconds. Wait until you see
in
the bottom left corner.

54) Now, you want to test your
application.

Expand Web Dynpro
Applications
ztec160_MMDD_XXX and
right-click on it.

Select Test.

132



55) Your application will
appear in a browser
window.

You can now select a
Product and the according
Business Partners will be
displayed in the table
below.

In the map, the Flash
Island will show how many
customers on this continent
bought this product.

If you click on a continent
you will see the related
customers per country.





56) In this screenshot you can
see the corresponding
customers for Europe.

57) You have completed
the exercise!



You are now able to:

Consume Dashboard model (SWF file) as FlashIsland in Web Dynpro
ABAP UI element
Define the interface to establish the data transfer between the
Dashboard models and the View context



133

OPTIONAL EXERCISE
The following steps 55 64 are optional. They show how to launch SAP BusinessObjects Dashboards and the
corresponding Dashboards interface.
58) Open Start SAP BusinessObjects
Dashboards.

59) Choose
Model from Local Drive.

60) Select Desktop and double-click on
Session (local).

134

61) Double-click on TEC160.

62) Double-click on FlashIsland.

63) Select Worldmap.xlf and click on
Open.

64) In the toolbar, click on Data and
choose Connections.



135

65) Here, you see the four interfaces
provided by the
Flash Island.

Select Data.

Every interface has a range (e.g.
Data) which defines the space in the
Excel file, which is visible to
accessing applications.

The specified ranges are numbered
according to their interfaces.



66) Reduce the size of the popup to display the Excel table beneath it. The
values in the marked boxes are initial values and get overwritten once
your Web Dynpro Application accesses the interface.
The cells B1 and N1 are overwritten by the Flash Island and
contain the selected continent and country.



The columns G,H and I are hidden.
67) In your ABAP Web Dynpro Application you
defined data sources, properties and events.

The numbers refer to the interfaces of step
65. They indicate which interface and
therefore which data is accessed.

The properties refer to the respective
columns in the Excel sheet of step 66

If an Interface refers to a single Excel field, it
is used as a property in ABAP like 2 + 4.
If an interface consists of multiples columns,
it is used as a data source and each property
of the data source refers to an Excel column

136

EXERCISE 5.3 ABAP WEB DYNPRO PAGE BUILDER

Estimated time: 20 minutes


Objective

With the runtime authoring environment of the Page Builder you can create your own Web Dynpro applications by
combining several CHIPs, and arranging them on a Page.
In this exercise we will use the Page Builder to create a page and add two CHIPs in a way that they can exchange
data.



What you learn

Use Role Maintenance (PFCG) to launch Page Builder and create an Web Dynpro page
Use the Page Builder to add CHIPs to the page
Learn how the wiring between the CHIPs is configured


Exercise Description

The following description only serves as a short overview to what objectives will be executed during the exercise. To
run through the exercise turn the page and start with Exercise 5.3 Solution.


Start Role Maintenance (PFCG)
Open the role you created in Exercise 5.0
Create the folder Exercise5.3
Launch the Page Builder and add two CHIPs into the page
Create a connection (wiring) between the CHIPs
Test the application in the NetWeaver Business Client











Find more information on creating Mashups in ABAP Web Dynpro here:
http://help.sap.com/saphelp_nw73ehp1/helpdata/en/20/361af8255f4a33a2e8441956cc8f63/frame
set.htm


137

EXERCISE 5.3 SOLUTION


Explanation Screenshot
1) Attention:

Make sure you already
executed the mandatory
steps of exercise 5.0
before you continue!


2) To start role maintenance,
go to the command entry
field in the upper left corner
and enter the transaction
code /npfcg.

Confirm your entry by
pressing ENTER.

3) Enter the name of your role
you created in 5.0




Note:

MM was replaced with
the Month and DD with
the Day you are taking
this exercise on!
XXX refers to session ID
and group ID!

Choose the glasses and
confirm to continue.

4) Choose the tab Menu.

138

5) Choose to create a
new folder.

6) Enter a name for your
folder and confirm your
entry with .

7) Your folder is displayed in
the hierarchy.

8) Click on the small arrow
next to
to expand the drop down
and insert a node.

Select
Web Dynpro Application
from the dropdown menu.

9) A popup appears.

Click on the small arrow
next to

and select:
Application Type: Page.



139

10) Enter a name for your
application configuration in
the format
ZTEC160MMDDXXX

And add EX53 to indicate
that this folder refers to
exercise 5.3.



Note:

MM should be replaced
with the Month and DD
with the Day you are
taking this exercise on!
XXX should be changed
into your group number!


Click on to
continue.


Do not click on ENTER!

If you clicked on ENTER, you can open the popup again with Detail in the
context menu on WDR_CHIP_PAGE.


11) A popup appears.

Confirm your selection with
.

140

12) Save as Local Object.


13) Click on to confirm
your entry and continue.

14) Expand the folder Exercise
5.3.

Right-click on your newly
created Web Dynpro
application
WDR_CHIP_PAGE and
select Execute.

15) Your application page
appears in the browser.

In the upper right corner of
the browser window click
on and select
Configuration.



141

16) You are now in edit mode.

Click on to add
a CHIP to your application.

17) From the CHIP Catalog
choose Web Dynpro
CHIPs.

Scroll down a couple of
pages and select
Product_Chip.

Confirm your selection with
.



18) Once more, click on
to add another
CHIP to your application.

142

19) From the CHIP Catalog
choose Web Dynpro CHIPs
and select BP_CHIP.

Confirm your selection with
.





20) Scroll down to
Product_CHIP.

Hover over the grey area
next to the header. Hold
down the left mouse
bottom and drag the lower
table Product_Chip above
BP_CHIP.

The tables automatically
switch their positions once
you drag them above or
below one another.

21) Go to BP_CHIP and click
on on the right-hand
side.



143

22) From the drop down select
Display Connection.

23) The connection details for
BP_CHIP appear.

Go to the right-hand side.

To select an Outport
Parameter, click on the
entry field and choose
GUID in RAW format.



24) Confirm your selection with
.

25) Business partners with
matching orders appear
below the Connection
details.

Go back to the right-hand




Zoom
Zoom
144

side.

Click on to exit
properties.








26) Now, you can select any
product and see its
business partners with
matching order in the table
below.











Note:

Business partners will not
change for all products.



145

27) Try selecting different
products to check if the
wiring works.





















28) Select in the
UI.

29) Close the browser.

30) Return to your role
maintenance and click on
to save your
application.

146

31) Close Role Maintenance
by clicking on in the
toolbar.

32) Start the SAP NetWeaver
Business Client 4.0.

You will find the shortcut on
the desktop.







Double click on system
M12



33) The SAP NetWeaver
Business Client 4.0 opens.

Enter the following
credentials:

User: TEC160-MMDD##

Password: welcome

Logon Language: en

Confirm your entry by
pressing ENTER.


Note:

Change
MM = Month
DD = Todays date
## = Group ID





147

34) If this popup appears,
check

and click on OK.

35) Choose Exercise5.3

36) Click on
WDR_CHIP_PAGE.

148

37) Now, you can see the Web
Dynpro page you created.

You successfully created a
Web Dynpro Application
based on two CHIPs.

If you click on different
products you can see that
the related Business
Partner will change.

38) You can now close the
SAP NetWeaver Business
Client.

Click on the cross in the
upper right corner.












Note:

If you are asked if you want
to close all Tabs, choose
yes.





149



39) You have completed the
exercise!



You are now able to:

Use Role Maintenance (PFCG) to launch Page Builder to create an
Web Dynpro page
Use the Page Builder to add CHIPs to the page
Configure wiring between CHIPs

150

EXERCISE 5.4 ENHANCE YOUR WEB DYNPRO WITH A SIDE PANEL


Estimated time: 20 minutes


Objective

In SAP NetWeaver Business Client (NWBC) you can enhance existing Web Dynpro application or Dynpro application
with a side panel pages. You will create a side panel with the Page Builder and use the full range of options for
exchanging data between the application in the NWBC content area and the CHIPs displayed in the side panel on the
page.
In this exercise you will enhance an existing Web Dynpro application with a side panel. Furthermore, you can try out a
Dynpro application which is already enhanced with a side panel.
This topic is covered in the hand-on session CD263 Extending SAP Business Suite Applications with the Side Panel -
Hands-On Workshop (2hr).

What you learn


Use Role Maintenance (PFCG) to add a Web Dynpro application
Use Role Maintenance (PFCG) to launch Page Builder to create an side panel
How to add CHIPs to a side panel
Configure Lean how the wiring between the CHIPs is configured



Exercise Description

The following description only serves as a short overview to what objectives will be executed during the exercise. To
run through the exercise turn the page and start with Exercise 5.4 Solution.


Start Role Maintenance (PFCG)
Open the role you created in exercise 5
Add a new Folder and add empty Web Dynpro side panel
Add a Web Dynpro application you copied in Exercise 5
Create the application reference to the side panel
Launch the Page Builder to configure the side panel
Add the CHIP Google Map to the side panel
Test the Web Dynpro Application in the NetWeaver Business Client




151

EXERCISE 5.4 SOLUTION


Explanation Screenshot
1) Attention:

Make sure you already
executed the mandatory
steps of exercise 5.0
before you continue!


2) To start role maintenance,
go to the command entry
field in the upper left corner
and enter the transaction
code /npfcg.

Confirm your entry by
pressing ENTER.

3) Enter the name of the role
you created in exercise 5.0.

Choose to edit and
continue.


Note:

MM was replaced with
the month and DD with
the day you are taking
this exercise on!
XXX should be changed
into your group number!

4) Choose the tab Menu.

152

5) Choose Role Menu in the
Hierarchy.

6) Choose to create a
new folder.

7) Enter a name for your
folder and confirm your
entry with .

8) Your folder is displayed in
the hierarchy.

9) Click on the small arrow
next to
to expand the drop down
and insert a node.

Select Web Dynpro
Application.



153

10) A popup appears.

Click on the small arrow
next to

and select Application
Type: Page.

11) Enter a name for your
application configuration in
the format
ZTEC160MMDDXXX.

And add EX54 to indicate
that this folder refers to
exercise 5.4.



Note:

MM should be replaced
with the Month and DD
with the Day you are
taking this exercise on!
XXX should be changed
into your group number!




Click on .


Do not click on ENTER!

If you clicked on ENTER, you can open the popup again with Detail in the
context menu on WDR_CHIP_PAGE.


12) A popup will show up.
Click on or on ENTER.

154

13) Save as Local Object.


14) Continue with .





15) Click on

To add another CHIP to
your application.



155

16) In the popup, enter the
name of your Web Dynpro
Application you created in
5.0.


Note:

At this point you take
reference to the copy you
created in Exercise 5.0!
Replace MMDDXX with
month, day, session and
group ID as you did prior.

Click on to confirm
your entry and continue.

17) In the hierarchy, select
ZTEC160_MMDD_XXX.

18) In the toolbar choose
.



19) Check for Node ID and
note the ID in the box
below..









Note:

Keep the Node ID in mind
for step 23).

156

20) Double-click on your other
application
WDR_CHIP_PAGE to
display its Node Details.

21) As a Node Option choose
Side Panel.

22) For Application Alias you
need to enter the following
code:

{REF=X}

You need to replace X
with the Node ID from
step 20).








Note:

The Node ID displayed in
your workbench differs
from the screenshot.



157

23) Right-click on
WDR_CHIP_PAGE and
select Execute.

24) Your application page
appears in the browser.

In the upper right corner of
the browser window click
on and select
Configuration.

25) Click on to add
another CHIP to your
application.

26) From the CHIP Catalog
choose IFrame CHIPs
and select Google Maps.

Confirm your selection with
.

158


27) Google Maps is displayed
in your page layout.


Click on to
continue and close the
browser






Hint: In the Google Map
CHIP we already
maintained the required
TAG with the name CITY.
Therefore we only need to
apply the TAG in the Web
Dynpro Application.

How you do this, youll see
once you continue with the
next steps.
28) Return to your role
maintenance in M12 and
right-click on your second
application
ZTEC160_MMDD_XXX.

Choose Execute.








Note:

Now, we have to apply the
required tagging to the
Web Dynpro Application.



159

29) Your application is
executed in a new browser
window.

Select the address bar of
your browser and add the
following text to your
present url:

&sap-config-mode=x


Note:

You need to enter this code
to switch into configuration
mode and use tagging in
the following steps.

30) Go to the bottom left corner
and click on .

31) Right-click into the field
City and navigate to Tags
Manage Tags.

32) In the Tag field enter in
capital letters: CITY.

Then select ADD.

160

33) The tag CITY is now listed
as a tag.

Confirm your entry with
.

34) A popup appears. Continue
with and close the
browser.



35) Return to your role
maintenance and click on
to save your
application.

36) Enter /nse80 in the
command entry field to
start ABAP Workbench.




161

37) Enter the name of your
local copy.







Note:

Remember: MMDDXXX
represents the
Month/Day youre taking
this exercise on your
group number, just as in
prior steps.

38) In the list of objects
navigate to:

ZTEC160_MMDD_XX
Views MAIN_VIEW

Double-click on Details to
display them.

39) In the displayed tabs switch
to the tab Methods.

40) Choose in the toolbar
to switch into edit mode.

162

41) Double-click on WDDOINIT
to change the code in the
Controller Initialization
Method.

42) Delete the * in line 4 to
activate the code.





Note:

To transfer data between
the Web Dynpro
application and a side
panel a few lines of ABAP
code are necessary.


You can find further information on:
http://help.sap.com/saphelp_nw73ehp1/helpdata/en/88/678
8d40a3d437aa453409d1c267019/content.htm

Or by simply scanning the QR code:

43) Select the tab Actions.

44) In a new line select
PORTAL_EVENT and
double-click on it.



163

45) Delete the * in line 2 to
activate the code.


46) Double click on your Web
Dynpro component


Continue with
.



47) In the toolbar click on
to activate the Web Dynpro
Application.

48) On the popup of inactive
objects continue with .

49) Now the role is maintained
and the Web Dynpro is
ready to use.





DONE!!!

Now, lets test the application!

164

50) Start the SAP NetWeaver
Business Client 4.0.

You will find the shortcut on
the desktop





Double click on the system
M12.




51) The SAP NetWeaver
Business Client 4.0 opens.

Enter the following
credentials:

User: TEC160-MMDD##

Password: welcome

Logon Language: en

Confirm your entry by
pressing ENTER.


Note:

Change
MM = Month
DD = Todays date
## = Group ID




165

50) If this popup shows up,
check

and click on OK.

51) If this popup will appear
enter
User: tec160-xxx
Password: welcome

52) In the Index tab choose
Exercise5.4

53) Click on
ZTEC160_MMDD_XXX.

166

52) Your application opens in
the SAP NetWeaver
Business Client.




Note:
The world map will only
appear, if you did already
exercise 5.2



53) On the right-hand side click
on the arrow to expand the
side panel.



167

54) A security popup appears.

Click on No!



Note:

If you clicked on Yes,
please re-launch the side
panel with F5.
55) Google Map is now
integrated as a side panel
into your Web Dynpro
application.
Data between the
application and the side
panel is transported via the
related TAGs.


.

56) Select any Business
Partners with matching
orders and click on a
company to display its
location on the map in the
side panel.

You free to try out the drill
down in Google Maps.

168



57) You can now close the
SAP NetWeaver Business
Client.

Click on the cross in the
upper right corner.









Note:

If askedif you want to
close all Tabs, choose yes.



58) You have completed the
exercise!



You are now able to:

Use Role Maintenance (PFCG) to add a Web Dynpro application
Use Role Maintenance (PFCG) to launch Page Builder to create an
side panel
How to add CHIPs to a side panel
Configure Lean how the wiring between the CHIPs is configured


169

NOTES
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
170

_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________


171

GLOSSARY FOR SAP BUSINESSOBJECTS DESIGN STUDIO

SAP BusinessObjects Design Studio enables application designers to create analysis applications and dashboards for
browsers and mobile devices on top of BW and SAP HANA data sources. It is the product of choice when full support
for BW and HANA data models is required. The product offers a design tool that allows you to create applications in an
easy and intuitive way without the need for native HTML and iPad UI programming skills.

With SAP NetWeaver Business Warehouse 7.0 or higher you can use SAP BusinessObjects Design Studio without any
further requirements.


Backend Connections
In Design Studio you can set up connections to
SAP NetWeaver Business Warehouse systems
as well as to SAP HANA systems.






In the first official release Design Studio will be
connected to the BI Platform, so you can create
connections centrally on the BI Platform and
access it from Design Studio.



Components
Almost every component has basic properties like width, height
and margins to set its size and position.

Design Studio distinguishes between three types of
components:

Firstly, you can use Analytic Components like Crosstabs and
Charts to visualize your data. After you drag a crosstab or a
chart into the layout editor, the component initially displays
dummy data. As soon as you assign a data source to the
crosstab or chart, it displays the data of the data source.

The Basic Components folder contains a variety of
components with different functions. Components like
Dropdown Box, Radio Button and Checkbox are used to select
or filter data and thus enable user interaction at runtime.
Components like Button and Image are used to enable
navigation, whereas components like Text and Date Field are
used to enhance the design and layout of the application.

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



172



Content Assistance
The Script Editor offers a Content
Assistance which can be activated by
pressing CTRL+Space.
It shows the possible inputs at the
respective cursor position.


The Content Assistance offers a list of the
applications components.

Depending on the actual code it also
provides a list of methods for the called
component, a list of dimensions of a data
source or a list of members of a Dimension.
Dimensions and their members can be
used as parameters in some methods.


Data Source

A data source alias represents an
instance of a data source at runtime of
the application, for example, a BW query
or a SAP HANA data source.





A single application can contain multiple
instances of one data source. Every
instance can apply its own filters on the
same data source and thus represents its
own subset of data.

Here, you see two charts with the same
data source but different instances with
different filters applied.

INSTANCE_1: Upper Chart
INSTANCE_2: Lower Chart











173





Get Selected Member
The getSelectedMember(dimension) method
can be used on charts and crosstabs.
It returns the member the user selected on
the component at runtime. The method
demands one parameter, which is the
dimension of the member it shall return.


For example, in Exercise 1.1 you built a chart
which displays the Sales Organizations. If
you pass the dimension Sales Organization
as a parameter, this method would return the
external key of the selected sales
organization once you click on the chart.




Move Dimension to Rows
The moveDimensionToRows(dimension)
method is used to add a new dimension
into the rows, which is available in the used
query, but not yet visible in the data.


It defines the structure of, for example, a
crosstab, which can display the data of the
data source (left: no dimension; right:
Product dimension).




174

Script Editor
Components provide a set of specific events
that the application user can execute on the
component. For example, every button
provides an On Click Event you can
configure individually.

You can see a list of all available events of
the component in the properties view of the
design tool. Here, you can open the script
editor and specify which actions should take
place once the application user triggers the
event.










The script language is a subset of JavaScript
and allows a sequence of script API method
calls to be defined.
The script API provides access at runtime to
the application itself as well as to its
components and data source aliases.
Therefore, the application designer has
flexible control of the applications behavior
by using event scripts.



Set Filter
The setFilter(dimension, value) method is
used to apply a filter to a data source. It
demands two parameters: At first the
dimension, which shall be used to apply the
filter. For example, in Exercise 1.1 the
dimension Sales Organization is used.


The second parameter is the value, which has
to be a member of the selected dimension.
Once the filter is applied, charts or crosstabs
which implement the data source only display
the data whose value for the selected
dimension equals the filter value.






175

Target Device
The Target Device you choose
when creating a new application
determines the style of your
components.

You can choose between iPad or
Desktop Browser.

If you select iPad as target device
the components are rendered in
iPad style. Compare the sidebar of
Exercise 1.4.

There are several other designs to
choose from. These two are the
standard for the respective Target
Device.





Desktop Browser iPad

2012 by SAP AG. All rights reserved.
SAP and the SAP logo are registered trademarks of SAP AG in Germany and other countries. Business Objects and the Business Objects logo are trademarks or
registered trademarks of Business Objects Software Ltd. Business Objects is an SAP company. Sybase and the Sybase logo are registered trademarks of Sybase Inc.
Sybase is an SAP company. Crossgate is a registered trademark of Crossgate AG in Germany and other countries. Crossgate is an SAP company.

Vous aimerez peut-être aussi