31
HIGHLIGHTS AND LATEST FEATURES OF WEB DYNPRO FOR ABAP CD266 Exercises / Solutions Michael Cuntz, Hans-Dieter Geyer, Uwe Klinger, Klaus Keller / SAP AG

CD266 Exercise

Embed Size (px)

DESCRIPTION

CD266

Citation preview

Page 1: CD266 Exercise

HIGHLIGHTS AND LATEST FEATURES OF

WEB DYNPRO FOR ABAP

CD266

Exercises / Solutions Michael Cuntz, Hans-Dieter Geyer, Uwe Klinger, Klaus Keller / SAP AG

Page 2: CD266 Exercise

2

EXERCISE 1: MULTI VALUE PASTE

Development Objectives

Within this exercise an employee data maintenance scenario will be considered showing some employee data in different ways and allowing to change it by switching between display and edit mode. The possibility to copy data from MS Excel and to paste it into a single Input Field of a Web Dynpro ABAP application will be introduced.

Sample solution: Web Dynpro Component ZCD266_EXERCISES_SOLUTION

Procedure:

1. The Web Dynpro Component ZCD266_MULTI_VAL_PASTE_XX and the according application ZCD266_MULTI_VAL_PASTE_XX are already prepared for your exercise. Open the ABAP Workbench (SE80) and view your „Local Objects‟.

a. Please start the application ZCD266_MULTI_VAL_PASTE_XX and test it.

b. You are in the „Overview‟ Panel and the „Form‟ view is selected in the DropDownListBox. The screen can show the employee‟s data structured in a Multi Pane UI element. At the moment there is no data available.

c. Top right you find two Buttons „Open Employees Spreadsheet‟ ( ) and „Delete All‟ ( ) to delete and to get employee data. Click the first one and ensure that you get the „Employees.xlsx‟ file opened. Copy the marked area into the Clipboard (Ctrl-C), place the Cursor into an editable Input Field and paste the data (Ctrl-V). The data string is entered as senseless string into the InputField.

Now, we implement the multi value paste feature so that copying MS Excel data and pasting it into an Input Field results in making them available in a WebDynpro Component. Here, it is shown in a form like display with a Multi Pane UI element.

2. Change the view „OVERVIEW_FORM‟ of Web Dynpro Component ZCD266_MULTI_VAL_PASTE_XX so that the MS Excel data can be inserted into the Input Fields of the „Form‟ view:

a. Go to Development Workbench. Select Tab „Actions‟ and double-click on action „MULTI_VALUE_PASTE‟ to change the code.

b. Uncomment the already prepared coding.

Each row of the table „TABLE‟ contains a single value from the copied range of the excel sheet. The column „ROW‟ contains the row number starting with 1 for the first row within the range. The column „COLUMN‟ contains the column number starting with 1 for the first column within the range. The table is sorted first by row and 2

nd by column. The fields of the „employee‟ structure are filled by

the corresponding column from the copied range. When the row number changes or the end of the table is reached the „employee‟ structure is appended to the „employees‟ table.

c. Save your code and go to Tab „Layout‟. Assign the action handler “MULTI_VALUE_PASTE” to the “onTablePaste” event for all of the InputFields in the “DATA_CONTAINER” container (ROOTUIELEMENTCONTAINER > MULTI_PANE > FORM_CONTAINER -> DATA_CONTAINER).

d. Save and activate the view. Re-run your application and verify the changes:

Use the Button „Open Employees Spreadsheet‟ to get the MS Excel file as mentioned above. Copy the already marked section in the spreadsheet and place the cursor into one of the Input Fields. Paste the clipboard. Check whether the data has been inserted, i.e. the values are available in a structured Multi Pane UI element in a 2 times 4 part with the chance to page through.

Page 3: CD266 Exercise

3

SOLUTION FOR EXERCISE 1: MULTI VALUE PASTE

Procedure:

1. Goto Web Dynpro Component ZCD266_MULTI_VAL_PASTE_XX whereby XX is your group number. Expand the node „Web Dynpro Applications‟ in the tree on the left hand side. Select application ZCD266_MULTI_VAL_PASTE_XX. To start the application, press Toolbar Button „Test/Execute‟, key „F8‟ or choose context menu item „Test‟ from the application context menu.

Page 4: CD266 Exercise

4

After the application has started you see the demo scenario „Employee Administration‟. Initially there is one Panel named „Overview‟ on which you find three options to display the data, selectable via the DropDownListBox on the left. Aside you have the option to change between „Edit‟ and „Display‟ mode by pressing the Button showing the pen or the glasses, respectively. Top right beside the „ITelo‟ company logo, you find two Buttons „Open Employees Spreadsheet‟ and „Delete All‟ to either load some employee data from an MS Excel file or to delete all available employee data. Currently no data is available. This is shown in the currently visible form view showing a sample picture together with one empty set of employee data.

2. Change the view „OVERVIEW_FORM‟ of Web Dynpro Component ZCD266_DRAG_AND_DROP_XX so that the MS Excel data can be inserted into the Input Fields of the „Form‟ view:

a. Go to Development Workbench. Select Tab „Actions‟ and double-click on action „MULTI_VALUE_PASTE‟ to change the code.

Page 5: CD266 Exercise

5

b. Uncomment the already prepared code.

For each row of the input Table set the different column values (1-6) to the components of the structure of the „Employees‟ context node (Employee-Id, First Name, …), respectively (and in the same series). Use a case statement to assign the different column values to the employees‟ structure fields. If the end of a row is reached (statement „at end of‟) append the „employees‟ record to the „employees‟ table.

c. Save your code and go to Tab „Layout‟ and select the Input Fields of the Transparent Container „DATA_CONTAINER‟. Assign the changed action handler to the „onTablePaste‟ event of all editable Input Fields.

Page 6: CD266 Exercise

6

d. Save and activate the view. Re-run your application and verify the changes:

Use the Button „Open Employees Spreadsheet‟ to get the MS Excel file as mentioned above.

Copy the already marked section in the spreadsheet.

Page 7: CD266 Exercise

7

Place the cursor in one of the Input Fields and paste the clipboard (switch to „Edit‟ mode if you are in „Display‟ mode).

Check whether the data has been inserted, i.e. the values are available in a structured Multi Pane UI element in a 2 times 4 part with the chance to page through.

Page 8: CD266 Exercise

8

EXERCISE 2: DRAG AND DROP

Development Objectives

Within this exercise an employee data maintenance scenario will be considered showing some employee data in different ways and allowing to change it by switching between display and edit mode. A Web Dynpro View will be changed to enable an assignment of a manager to an employee easily via drag and drop. The goal is to include the drag and drop related UI elements depending on the display/edit mode and to assign an action to execute the data change depending on which changes are possible. In this exercise a MultiPane UI element is used to display an instance of the form for each employee. Therefore the Image in the form needs to be capable of dragging and dropping.

Sample solution: Web Dynpro Component ZCD266_EXERCISES_SOLUTION

Procedure:

1. The Web Dynpro Component ZCD266_DRAG_AND_DROP_XX and the according application ZCD266_DRAG_AND_DROP_XX are already prepared for your exercise (see your „Local Objects‟ in the Development Workbench).

a. Please start the application ZCD266_DRAG_AND_DROP_XX and test it.

Page 9: CD266 Exercise

9

b. You are in the „Overview‟ Panel and the „Form‟ view is selected in the DropDownListBox. The screen shows the employees‟ data structured in a Multi Pane UI element either in a 2 times 4 part with the chance to page through or to show all employees‟ data by clicking the „Show All Employees‟ Button right above.

c. Switch to edit mode by choosing the corresponding Button. Here, you can change the data by entering the wanted changes and confirming them by hitting <enter>.

Now, we implement the drag and drop feature so that dragging an employee‟s picture to a different employee‟s picture results in the assignment of the dragged employee to the latter one.

2. Change the view „OVERVIEW_FORM‟ of Web Dynpro Component ZCD266_DRAG_AND_DROP_XX so that the Image UI element containing the employee picture is drag and drop enabled:

a. Insert the DragSource(Info), e.g. „DRAGSOURCEINFO_IMAGE‟, into the Image UI element (by using the context menu).

b. Add a DropTarget UI element „DROPTARGET_IMAGE‟ to the Transparent Container „IMAGE_CONTAINER‟ containing the image.

c. Move the image into the DropTarget element using drag‟n‟drop within the UI element tree. Save the

changes.

d. Insert as well the DropTarget(Info) „DROPTARGETINFO_IMAGE‟ into the DropTarget object in parallel to the image (by using the context menu). Save the changes.

e. Maintain the property „tags‟ of both, the DragSourceInfo object and the DropTargetInfo object equally, e.g. „AssignEmployee‟. Save the changes.

f. Assign the already existing action handler „AssignEmployee‟ to the „onDrop‟ event of the DropTarget.

g. Save and activate the view. Re-run your application and verify the changes by trying to drag and drop the employee pictures among themselves (without resulting in any changes, this we implement in step 3).

3. Change the „Drag and Drop‟ functionality so that it is enabled only in edit mode and that it results in an

assignment of a manager to an employee with data update: a. Change the „enabled‟ property of both, the DragSourceInfo object and the DropTargetInfo object and bind

it to the ‟Display_Only‟ attribute of the „Overview_Settings‟ context node. Check the “Invert Attribute/Property value‟ checkbox on the bottom of the binding dialog. By this the Boolean value will be inverted. Save the changes.

b. To get the Employee updated bind the „data‟ property of the DragSourceInfo object to the attribute „Employee_Id‟ of the „Employees‟ context node. Uncomment the coding of the action handler assigned previously.

c. Save and activate the view. Re-run your application and verify the changes by trying to drag and drop the employee pictures among themselves. Check that the manager ID and name of the dragged employee is updated with the employee on which the picture was dropped to, however in edit mode only.

Page 10: CD266 Exercise

10

SOLUTION FOR EXERCISE 2: DRAG AND DROP

Procedure:

1. Goto Web Dynpro Component ZCD266_DRAG_AND_DROP_XX whereby XX is your group number. Expand the node „Web Dynpro Applicat.‟ in the tree on the left hand side. Select application ZCD266_DRAG_AND_DROP_XX. To start the application, press Toolbar Button „Test/Execute‟, key „F8‟ or choose context menu item „Test‟ from the application context menu.

Page 11: CD266 Exercise

11

After the application has started you see the demo scenario „Employee Administration‟. Initially there is one Panel named „Overview‟ on which you find three options to display the data, selectable via the DropDownListBox on the left. Ensure that the „Form‟ view is selected in the drop down box. Aside you have the option to change between „Edit‟ and „Display‟ mode by pressing the Button showing the pen or the glasses, respectively. The screen shows the employees‟ data structured in a Multi Pane UI element either in a 2 times 4 part with the chance to page through or to show all employees‟ data by clicking the „Show All Employees‟ Button right above. Switch to edit mode by choosing the corresponding Button. Here, you can change the data by entering the wanted changes and confirming them by hitting <enter>.

Page 12: CD266 Exercise

12

2. Change the view „OVERVIEW_FORM‟ of Web Dynpro Component ZCD266_DRAG_AND_DROP_XX so that the Image UI element containing the employee picture is drag and drop enabled:

a. Insert the DragSource(Info), e.g. „DRAGSOURCEINFO_IMAGE‟, into the Image UI element (by using the context menu on the „image‟ UI element).

b. Add a DropTarget UI element „DROPTARGET_IMAGE‟ to the Transparent Container „IMAGE_CONTAINER‟ containing the image (by using the context menu entry „Insert Element‟ on the „IMAGE_CONTAINER‟).

Page 13: CD266 Exercise

13

Save the changes! Insert the image itself as content into it (by dragging inside the view designer tree), i.e. drag the Image UI element and drop it on to the DropTarget UI element you have just inserted.

Save the changes.

c. Insert as well the DropTarget(Info) „DROPTARGETINFO_IMAGE‟ into the DropTarget object „DROPTARGET_IMAGE‟ in parallel to the image (by using the context menu entry „Insert DropTarget‟ on the DropTarget „DROPTARGET_IMAGE‟ ).

Save the changes.

Page 14: CD266 Exercise

14

d. Maintain the property „tags‟ of both, the DragSourceInfo object and the DropTargetInfo object equally, e.g. „AssignEmployee‟.

Save the changes.

e. Assign the already existing action handler „ASSIGN_EMPLOYEE‟ to the „onDrop‟ event of the DropTarget „DROPTARGET_IMAGE‟.

Page 15: CD266 Exercise

15

f. Save and activate the view. Re-run your application and verify the changes by trying to drag and drop the employee pictures among themselves (without resulting in any changes!)

3. Change the „Drag and Drop‟ functionality so that it is enabled only in edit mode and that it results in an

assignment of a manager to an employee with data update: a. Change the „enabled‟ property of the DragSourceInfo object „DRAGSOURCEINFO_IMAGE‟ and bind it to

the inverted ‟Display_Only‟ attribute of the „Overview_Settings‟ context node.

Page 16: CD266 Exercise

16

Do the same for the DropTargetInfo object „DROPTARGET_IMAGE‟ and save the changes.

b. To get the Employee updated bind the „data‟ property of the DragSourceInfo object to the attribute „Employee_Id‟ of the „Employees‟ context node.

Go to the „Actions‟ tab, select the action handler assigned previously and uncomment the whole coding of the action. Save your changes.

Page 17: CD266 Exercise

17

c. Save and activate the view. Re-run your application and verify the changes by trying to drag and drop the employee pictures among themselves. Check that the manager ID and name of the dragged employee is updated with the employee on which the picture was dropped to, however in edit mode only.

Page 18: CD266 Exercise

18

EXERCISE 3: HTML ISLAND

Development Objectives

This exercise demonstrates how to add an HtmlIsland UI element to a Web Dynpro application. The HtmlIsland will be used to visualize employee relations. You will learn how to integrate an HtmlIsland UI element, add references to JavaScript sources and CSS sources to it and model a data connection using Web Dynpro context.

Sample solution: Web Dynpro Component ZCD266_EXERCISES_SOLUTION

Procedure:

1. The Web Dynpro Component ZCD266_HTML_ISLAND_XX and the according application ZCD266_ HTML_ISLAND _XX are already prepared for your exercise (see your „Local Objects‟ in the Development Workbench).

a. Please start the application ZCD266_HTML_ISLAND _XX and test it.

b. Make sure you have employee data in your application. Then switch to Panel „Organizational Chart‟. You‟ll see that no chart is shown, even if you change the DropDownListBox from „Org Tree‟ to „Org Network‟.

Now, we implement the HtmlIsland that visualizes employee data.

2. Switch to the backend system to Web Dynpro component ZCD266_HTML_ISLAND_XX and select view „ORG_CHART‟. Change to edit mode and complete the steps below:

a. Insert an HtmlIsland UI element directly under the ROOTUIELEMENTCONTAINER and set properties ID: HTML_ISLAND height: 600px staticHtml: <div id="myOrgChart"></div>

width: 800px

Layout Data (MatrixHeadData) height: 100% vAlign: top width: 100%

b. Insert a „DATA_ELEMENT‟ of type „JsonDataSource‟ to the newly created HtmlIsland. Set the properties as follows. Please pay attention, property „name is cases sensitive: dataSource: binding to ORG_CHART.EMPLOYEES name: employees

c. To the newly created JsonDataSource add 5 „DATA_ELEMENT‟s, all of type „JsonParameter‟.

The properties of the 5 JsonParameters: name: employeeId value: binding to ORG_CHART.EMPLOYEES.EMPLOYEE_ID

name: firstname value: binding to ORG_CHART.EMPLOYEES.FIRST_NAME

name: lastname value: ORG_CHART.EMPLOYEES.LAST_NAME

name: managerId value: binding to ORG_CHART.EMPLOYEES.MANAGER_ID

name: imageUrl value: ORG_CHART.EMPLOYEES.EMPLOYEE_PIC_URL

d. Insert a SCRIPT to the HtmlIsland with properties source: d3.v2.min.js

Page 19: CD266 Exercise

19

e. Insert another SCRIPT to the HtmlIsland with properties: source: org_chart.js

f. Insert a STYLE to the HtmlIsland with properties: source: org_chart.css

g. Save your changes.

3. The HtmlIsland UI Element has now been added to the view. Communication among Web Dynpro and HtmlIsland is done via JavaScript calls. But before we can execute calls, we define and initialize a view attribute that holds a reference to the HtmlIsland UI element. This is done in subsequent steps:

a. In view „ORG_CHART‟ switch to Tab „Attributes‟ and create variable „M_ORG_CHART‟ of type ref to CL_WD_HTML_ISLAND.

b. Switch to Tab „Methods‟ and double click on method „WDDOMODIFYVIEW‟ to enter the source code editor. During the first execution of „WDDOMODIFYVIEW‟ we store the reference to our HtmlIsland in the view attribute „M_ORG_CHART‟. Furthermore, to see the chart immediately after the view is loaded, we add a call to method „ORG_CHART‟ (will be filled in a later step). To do so, we add following coding to the method:

if first_time = abap_true.

wd_this->m_org_chart ?= view->get_element( `HTML_ISLAND` ).

wd_this->org_script_call( ).

endif.

4. In the next step, we add a call to JavaScript function to the HtmlIsland UI element to do the visualization,

whenever the employee data has changed. The JavaScript object on which we execute the function is called

„MyOrgChart‟. It is defined in the JavaScript source code of „org_chart.js‟, which we added to the HtmlIsland.

Two different visualizations are available: „showOrgNetwork‟ and „showOrgTree‟. We need to pass the data

from the context along with the respective function that we call.

a. In view „ORG_CHART‟ switch to Tab „Methods‟ and double click method ORG_SCRIPT_CALL to open source code editor. The function we need to call is defined by the setting of DropDownListbox with values „Org Network‟ and „Org Tree‟. Therefore first step is to get the function that is selected by the user. Following coding will do this:

data l_function type string.

wd_context->get_child_node( wd_this->wdctx_org_chart_settings

)->get_attribute( exporting name = `CHART_VISUALIZATION`

importing value = l_function ).

b. Now we have stored the function („showOrgNetwork‟ or „showOrgTree‟, depending on the user

selection) in variable l_function and can perform the actual JavaScript call. A JavaScript call is created by ABAP class CL_WD_HTML_SCRIPT_CALL. When creating a call you can define variables and functions to do a chained call and pass parameters. As parameter you can add single values or choose to add data that has been modeled on the HtmlIsland UI element as Json data sources or Json paramters .In our example we pass the data that we connected to the Web Dynpro context. Following coding defines the call and adds it do the HtmlIsland:

wd_this->m_org_chart->add_script_call( cl_wd_html_script_call=>new_call(

)->variable( `MyOrgChart`

)->function( l_function

)->add_ui_elem_data_source( `employees` ) ).

Save your changes, activate the component and test the result.

Note: If the org tree is empty but the network chart is visible then you might have a cyclic org structure. Please delete all items and paste it from the excel sheet again.

Page 20: CD266 Exercise

20

SOLUTION FOR EXERCISE 3: HTML ISLAND

Procedure:

1. Goto Web Dynpro Component ZCD266_HTML_ISLAND_XX whereby XX is your group number. You can find the component also under your local object in $TMP package. Expand the node „Web Dynpro Applicat.‟ in the tree on the left hand side. Select application ZCD266_HTML_ISLAND_XX. To start the application, press Toolbar Button „Test/Execute‟, key „F8‟ or choose context menu item „Test‟ from the application context menu.

Page 21: CD266 Exercise

21

After the application has started you see the demo scenario „Employee Administration‟. Initially there are two Panels named „Overview‟ and „Organizational Chart‟. In „Overview‟ Panel you will see the application as you know it from previous exercises. Panel „Organizational Chart‟ shows just a DropDownListbox without any further content.

Page 22: CD266 Exercise

22

2. Switch to the backend system to Web Dynpro component ZCD266_HTML_ISLAND_XX and select view „ORG_CHART‟. Change to edit mode. You can switch off „Layout Preview‟ as the content of HtmlIsland cannot be displayed in the preview area.

a. Insert an HtmlIsland UI element directly under the ROOTUIELEMENTCONTAINER

Page 23: CD266 Exercise

23

and set properties ID: HTML_ISLAND height: 600px staticHtml: <div id="myOrgChart" /> width: 800px

Layout Data (MatrixHeadData) height: 100% vAlign: top width: 100% After this step is complete, your UI tree and HtmlIsland properties should look like below:

b. Insert a „DATA_ELEMENT‟ of type „JsonDataSource‟ to the newly created HtmlIsland.

Page 24: CD266 Exercise

24

Set the properties as follows, but please pay attention, property „name is cases sensitive: dataSource: binding to ORG_CHART.EMPLOYEES name: employees

c. Insert 5 „DATA_ELEMENT‟s, all of type „JsonParameter‟, to the data source that was created in the step before.

After adding the 5 parameters the UI tree looks like this:

Page 25: CD266 Exercise

25

The properties of the 5 JsonParameters: name: employeeId value: binding to ORG_CHART.EMPLOYEES.EMPLOYEE_ID

name: firstname value: binding to ORG_CHART.EMPLOYEES.FIRST_NAME

name: lastname value: ORG_CHART.EMPLOYEES.LAST_NAME

name: managerId value: binding to ORG_CHART.EMPLOYEES.MANAGER_ID

name: imageUrl value: ORG_CHART.EMPLOYEES.EMPLOYEE_PIC_URL

Page 26: CD266 Exercise

26

d. Insert SCRIPT to the HtmlIsland

With properties source: d3.v2.min.js

e. Insert another SCRIPT to the HtmlIsland with properties: source: org_chart.js

f. Insert STYLE to the HtmlIsland With properties: source: org_chart.css

g. Save your changes.

3. The HtmlIsland UI Element has now been added to the view. Communication among Web Dynpro and HtmlIsland is done via JavaScript calls. But before we can execute calls, we define and initialize a view attribute that holds a reference to the HtmlIsland UI element. This is done in subsequent steps:

a. In view „ORG_CHART‟ switch to Tab „Attributes‟ and create variable „M_ORG_CHART‟ of type ref to CL_WD_HTML_ISLAND.

b. Switch to Tab „Methods‟ and double click on method „WDDOMODIFYVIEW‟ to enter the source code editor. During the first execution of „WDDOMODIFYVIEW‟ we store the reference to our HtmlIsland in the view attribute „M_ORG_CHART‟. Furthermore, to see the chart immediately after the view is loaded, we add a call to method „ORG_CHART‟ (will be filled in a later step). To do so, we add following coding to the method:

if first_time = abap_true.

Page 27: CD266 Exercise

27

wd_this->m_org_chart ?= view->get_element( `HTML_ISLAND` ).

wd_this->org_script_call( ).

endif.

4. In the next step, we add a call to JavaScript function to the HtmlIsland UI element to do the visualization, whenever the employee data has changed. The JavaScript object on which we execute the function is called

„MyOrgChart‟. It is defined in the JavaScript source code of „org_chart.js‟, which we added to the HtmlIsland.

Two different visualizations are available: „showOrgNetwork‟ and „showOrgTree‟. We need to pass the data

from the context along with the respective function that we call.

c. In view „ORG_CHART‟ switch to Tab „Methods‟ and double click method ORG_SCRIPT_CALL to open source code editor. The function we need to call is defined by the setting of DropDownListbox with values „Org Network‟ and „Org Tree‟. Therefore first step is to get the function that is selected by the user. Following coding will do this:

data l_function type string.

wd_context->get_child_node( wd_this->wdctx_org_chart_settings

)->get_attribute( exporting name = `CHART_VISUALIZATION`

Page 28: CD266 Exercise

28

importing value = l_function ).

d. Now we have stored the function („showOrgNetwork‟ or „showOrgTree‟, depending on the user

selection) in variable l_function and can perform the actual JavaScript call. A JavaScript call is created by ABAP class CL_WD_HTML_SCRIPT_CALL. When creating a call you can define variables and functions to do a chained call and pass parameters. As parameter you can add single values or choose to add data that has been modeled on the HtmlIsland UI element as Json data sources or Json paramters .In our example we pass the data that we connected to the Web Dynpro context. Following coding defines the call and adds it do the HtmlIsland:

wd_this->m_org_chart->add_script_call( cl_wd_html_script_call=>new_call(

)->variable( `MyOrgChart`

)->function( l_function

)->add_ui_elem_data_source( `employees` ) ).

Afer the changes your source code in method „ORG_SCRIPT_CALL‟ should look like:

Save your changes, activate the component and test the result. After starting the application „ZCD266_HTML_ISLAND_XX‟ change to Panel „Organizational Chart‟. Initially you will see a tree chart that can be expanded:

Page 29: CD266 Exercise

29

Page 30: CD266 Exercise

30

004_Introduction / Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed doeiusmod tempor

incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud exercitation ullamco

laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit

esse cillum dolore eu fugiat nulla pariatur. Nam liber te conscient to factor tum poen legum odioque civiuda.

01_Headline

010_Body_Copy_Subhead 02_Body_CopyLorem ipsum dolor sit amet, consectetaur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

020_Body_Copy_BulletLorem ipsum dolor sit amet, consectetaur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..

020_Body_Copy_Bullet_Lorem ipsum dolor sit amet

021_Body_Copy_Bullet_Lorem ipsum dolor sit amet

021_Body_Copy_Bullet_Lorem ipsum dolor sit amet

011_Body_Copy_Subhead 02_Body_CopyLorem ipsum dolor sit amet, consectetaur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

020_Body_Copy_Bullet

020_Body_Copy_Bullet

020_Body_Copy_Bullet

Table head Table subhead

Table head Table subhead

Table head Table subhead

Table head Table subhead

Table copy: Tatem lusto dipit

Table body copy: Namplius nora

C. M. Seriae publi, dem iu quem, paridii ssenat, considi

Table body copy: Namplius nora

Namplius nora C. M. Seriae publi, dem iu quem, paridii ssenat,

poricia cesta,

poricia cesta,

Table copy: Tatem lusto dipit

Namplius nora

notasdacto conis, ,

C. M. Seriae publi, dem iu quem, paridii ssenat, considi

Namplius nora notasdacto conis, C. M.

C. M. Seriae publi, dem iu quem, paridii ssenat, considi

Nampliu considi ncussolum ma, C. Ivive.

Astre fatarictui poricia cesta,

Astre fatarictui

Page 31: CD266 Exercise

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