Tec160 Exercises Vho Final

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

.


.

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.moveDimensionToRows(0D_NW_PROD);

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


.

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


.

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



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

2) Select the file DESIGNSTUDIO_E1_PART2_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


.

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.


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.


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


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.



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



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


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


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


.

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

13) Drag the new data source tec160/TEC160_SALES_AV 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_AV - SALES_AV and choose Edit Initial View.

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


.

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


.


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


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.


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.


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


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.isChecked()) { }

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.ischecked()==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.


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


Preparations: Set up your SAP HANA Studio

Analyse Database Tables

Create an Attribute View

Create an Analytic View

50



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_PD.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.PRODUCT_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.COUNTRY

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_SALES_AV Description: TEC160_XX_MMDD_SALES_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_SO_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_SALES_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_SALES_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



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


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


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.


.

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


.

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


.

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.



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


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


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.



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


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.


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


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/frameset.htm

113



1) Attention: Make sure you already executed the mandatory steps of exercise 5.0 to continue!


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.



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


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/frameset.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



1) Attention: Make sure you already executed the mandatory steps of exercise 5.0 before you continue!


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


.

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.


.

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: ROOTUIELEMENTCONTAINER 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.


.


.

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


.

46) One last time, right-click on ROOTUIELEMENTCONTAINER. 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.



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/frameset.htm

137




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.


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


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



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


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




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.


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


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/6788d40a3d437aa453409d1c267019/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

Tec160 Exercises Vho Final

Documents

Transcript of Tec160 Exercises Vho Final