Upload
tamanam-kiran-kumar
View
42
Download
6
Embed Size (px)
DESCRIPTION
CD266
Citation preview
HIGHLIGHTS AND LATEST FEATURES OF
WEB DYNPRO FOR ABAP
CD266
Exercises / Solutions Michael Cuntz, Hans-Dieter Geyer, Uwe Klinger, Klaus Keller / SAP AG
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.
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.
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.
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.
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.
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.
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.
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.
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.
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>.
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‟).
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.
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‟.
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.
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.
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.
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
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.
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.
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.
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
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.
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:
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
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.
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`
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:
29
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
© 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.