SAP TECHNOLOGY HIGHLIGHTS – PUTTING THEM ALL TOGETHER TEC160 Exercises / Solutions Ulrich Klingels, Matthias Kretschmer, Dr. Matthias Sessler SAP Technology Solution Management, SAP AG
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 Dashboards…………………………………………………………………………………………………………………………82 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 Panel………………………………………………………147 Glossary for SAP BusinessObjects Design Studio ........................................................................................................ 171
2
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.
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)
1
1
V.27
3
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
4
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.
5
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 .
6
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.
7
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.
8
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 .
9
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 chart’s size as you like.
10
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 righthand side. Change your charts Style to Glossy.
11
22) Choose the On Select property and click on define a filter.
to
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.
12
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.
13
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.
14
32) You can change the button’s size and place it next to your chart.
33) Select the BUTTON_1 in the Outline area and change the button’s 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”.
15
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:
16
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
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
17
EXERCISE 1.2 – SOLUTION
Explanation 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.
18
Screenshot
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 Country0D_FC_NW_C01_Q0001 Confirm by choosing .
19
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 rightclick 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.
20
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, rightclick on CELL inside BODY and select: Create Child Pagebook
21
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.
22
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
23
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 QRCode with any barcode or QR-Code scanner application to your mobile device or iPad to run it on your own device.
24
24) To test your application in the browser, select Application Execute Locally or click on the toolbar.
in
25) Your data appears in a chart.
26) To change the page and view the crosstab, hold down the left mousebutton 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
25
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.
26
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
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 .
27
3) In the Outline area expand PAGEBOOK_1 and rightclick 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.
28
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.
29
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.
30
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 .
31
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”.
32
SALES_AV.setFilter(“COUNTRY”,CHART_1.getSelectedMember(“0D_NW _CNTRY”));
21) Confirm by choosing .
22) Test your application with CTRL+F11 or select the toolbar.
in
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.
33
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 .
34
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 rightclick 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.
35
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
36
.
39) To change the page and view the crosstab, hold down the left mousebutton on the pagebook and swipe from right to left or left to right.
40) Click on or next to the region’s 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
37
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
38
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
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
39
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.
40
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 .
41
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 .
42
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:
Note:
Alternatively to typing the code into the script editor, you can copy and paste it from a prepared file in the folder:
If you decided to copy and paste the code from the prepared file, you can continue with step 22).
Desktop Session(Local) TEC160 DesignStudio DesignStudio_Exercise_1 .4.txt 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.
43
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.
44
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 the toolbar.
in
23) Your application appears in the browser. You can select the checkbox Channel to add the dimension Distribution Channel to your crosstab.
45
24) To add the dimension Distribution Channel to your crosstab, select the checkbox Channel.
25) Now, you can select a Quarter and a year.
46
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.
47
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:
48
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
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 welldesigned 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
49
EXERCISE 2.1 – SOLUTION
Explanation 1) 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:
50
Choose the menu path “Window” “Open Perspective” “Other…”
Screenshot Preparations: Set up your SAP HANA Studio
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”.
51
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.
52
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 administrator’s 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 modeler’s view of the SAP HANA system: here one can create multi-dimensional data
53
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.
54
13) First of all let’s 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.
55
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 let’s 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.
56
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.
57
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
58
Model Parameters”. Set Default Client to “dynamic”.
59
25) 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 rightclick 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.
60
Create the Attribute View
28) Open the Tables folder of the TEC160 schema.
29) Select and add (-> Add button) the following tables: SNWD_PD SNWD_BPA SNWD_AD
61
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.
62
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.
63
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)”
64
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.
65
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.
66
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 rightclick 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.
67
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.
68
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 don’t 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).
69
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.
70
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)”
71
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)”
72
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.
73
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.
74
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!
75
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.
76
Consume the Analytic View in SAP BusinessObjects Analysis for Microsoft Excel
Create your own report
EXERCISE 2.2 – SOLUTION Explanation 1) Consume the Analytic View in SAP BusinessObjects Analysis for Microsoft Excel and create your own report
Screenshot 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.
77
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.
78
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.
79
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.
80
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!
81
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
82
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 .
83
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.
84
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 .
85
16) Go back to the right-hand side and select Alerts in the map’s 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 map’s properties choose General.
23) Now, you want to change the Source Data. Select to choose a Source Data.
86
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
87
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 set a Range.
88
to
35) Select the cell D2
36) Confirm by clicking .
37) In the bottom right corner click on Definitions.
to exit
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
89
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!
90
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
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
91
EXERCISE 4 – SOLUTION
Explanation
Screenshot
1) Open Internet Explorer 9 from your desktop.
2) Select the shortcut launch pad.
BI
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 Workspaces.
to open BI
5) In the toolbar click on Remove Column to reduce the amount of columns to two.
92
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.
93
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.
94
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.
95
17) Your report should look like in this screenshot.
18) Enlarge the pie chart as well.
19) Enlarge the map.
96
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.
97
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.
98
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.
99
34) Confirm your selection by clicking on the bottom right.
at
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.
100
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.
101
42) Hover over the pie pieces to view a category’s 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:
102
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
ABAP WEB DYNPRO NAMING CONVENTIONS FOR USERS AND OBJECTS CREATED IN THIS SESSION
Note For the Virtual Hands-on session ID = A System Client Users Password Web Dynpro component Role
M12 800 TEC-MMDD## welcome ZTEC160_MMDD_XXX ZTEC160R_MMDD_XXX
Example: TEC-070121 is the user for date 7 of January and Group 21
Note For the Virtual Hands-on session replace DDMM## with today’s date and your group number
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 TECWeb Dynpro component ZTEC160_ Role ZTEC160R_
103
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 1) Start SAP Logon from your Desktop.
2) Double click on M12 to connect to the system.
104
Screenshot
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 = Today’s 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.
105
6) In the navigation tree, rightclick 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!
8) Save as Local Object.
106
For naming conventions see page 103!
MM = Month DD = Today’s date XXX = Session ID (=A) + Group ID
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!
107
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.
108
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 = Today’s date XXX = Session ID + Group ID
109
Choose Single Role to continue.
20) Choose the tab User.
21) A popup will show up. Click on save the role.
to
22) Type in your user name.
23) Click on in the toolbar to save your role.
110
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!
111
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 autocompletion 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
112
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.
113
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
114
in the toolbar
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.
115
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:
116
Apply auto-completion to an input field of an ABAP Web Dynpro Application
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
117
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.
118
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.
119
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.
120
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 .
121
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 .
122
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 .
123
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 .
124
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 .
125
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 .
126
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.
127
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.
128
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.
129
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 edit mode.
to exit the
51) A popup appears. Click on save your changes.
130
to
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.
131
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:
132
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
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).
133
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.
134
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
135
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
136
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.
137
5) Choose new folder.
to create a
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.
138
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.
Do not click on ENTER!
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 continue.
If you clicked on ENTER, you can open the popup again with Detail in the context menu on WDR_CHIP_PAGE.
to
11) A popup appears. Confirm your selection with .
139
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.
140
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.
141
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 side.
142
on the right-hand
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.
Zoom
24) Confirm your selection with .
25) Business partners with matching orders appear below the Connection details. Go back to the right-hand
Zoom
143
side. Click on properties.
to exit
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.
144
27) Try selecting different products to check if the wiring works.
28) Select UI.
in the
29) Close the browser.
30) Return to your role maintenance and click on to save your application.
145
31) Close Role Maintenance by clicking on toolbar.
in the
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 = Today’s date ## = Group ID
146
34) If this popup appears, check
and click on OK.
35) Choose Exercise5.3
36) Click on WDR_CHIP_PAGE.
147
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.
148
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
149
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.
150
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
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 continue.
to edit and
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.
151
5) Choose Role Menu in the Hierarchy.
6) Choose new folder.
to create a
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.
152
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.
Do not click on ENTER! 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
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.
153
13) Save as Local Object.
14) Continue with
.
15) Click on To add another CHIP to your application.
154
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).
155
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.
156
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 CHIP’s and select Google Maps. Confirm your selection with .
157
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, you’ll 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.
158
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.
159
33) The tag CITY is now listed as a tag. Confirm your entry with .
34) A popup appears. Continue with browser.
and close the
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.
160
37) Enter the name of your local copy.
Note: Remember: MMDDXXX represents the Month/Day you’re 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.
161
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. 43) Select the tab Actions.
44) In a new line select PORTAL_EVENT and double-click on it.
162
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:
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, let’s test the application!
163
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 = Today’s date ## = Group ID
164
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.
165
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.
166
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.
167
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:
168
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
NOTES _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________
169
_______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________ _______________________________________________________________________________________
170
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 components:
distinguishes
between
three
types
of
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.
171
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 application’s 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
172
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).
173
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 application’s 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.
174
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
175
© 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.