How-to Guide SAP NetWeaver 04

How To deal with Table input and display in Interactive Forms

(Tips and Tricks on Interactive Forms Development Based on Adobe Software Part 2)
Version 1.01 January 2006

Applicable Releases: SAP NetWeaver 04 SAP Web Application Server 6.40

 Copyright 2006 SAP AG. All rights reserved. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice. Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. Microsoft, Windows, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation. IBM, DB2, DB2 Universal Database, OS/2, Parallel Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390, OS/400, iSeries, pSeries, xSeries, zSeries, z/OS, AFP, Intelligent Miner, WebSphere, Netfinity, Tivoli, and Informix are trademarks or registered trademarks of IBM Corporation in the United States and/or other countries. Oracle is a registered trademark of Oracle Corporation. UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group. Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems, Inc. HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C, World Wide Web Consortium, Massachusetts Institute of Technology. Java is a registered trademark of Sun Microsystems, Inc. JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape. MaxDB is a trademark of MySQL AB, Sweden. SAP, R/3, mySAP, mySAP.com, xApps, xApp, SAP NetWeaver, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and in several other countries all over the world. All other product and service names mentioned are the trademarks of their respective companies. Data

contained in this document serves informational purposes only. National product specifications may vary. These materials are subject to change without notice. These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty. These materials are provided as is without a warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement. SAP shall not be liable for damages of any kind including without limitation direct, special, indirect, or consequential damages that may result from the use of these materials. SAP does not warrant the accuracy or completeness of the information, text, graphics, links or other items contained within these materials. SAP has no control over the information that you may access through the use of hot links contained in these materials and does not endorse your use of third party web pages nor provide any warranty whatsoever relating to third party web pages. SAP NetWeaver How-to Guides are intended to simplify the product implementation. While specific product features and procedures typically are explained in a practical business context, it is not implied that those features and procedures are the only approach in solving a specific business problem using SAP NetWeaver. Should you wish to receive additional information, clarification or support, please refer to SAP Consulting. Any software coding and/or code lines / strings (Code) included in this documentation are only examples and are not intended to be used in a productive system environment. The Code is only intended better explain and visualize the syntax and phrasing rules of certain coding. SAP does not warrant the correctness and completeness of the Code given herein, and SAP shall not be liable for errors or damages caused by the usage of the Code, except if such damages were caused by SAP intentionally or grossly negligent.

1 (Business) Scenario
Have you ever think that you can have your user fill out a PDF form and have the inputs automatically kick-off some business processes in your backend? In NetWeaver 04, SAP provides a new technology called Adobe Interactive Forms which allows such business scenario. In this series of how-to paper, we will show you a step-by-step guideline on developing a custom application using the Adobe Interactive Forms technology. In this paper, in particular, we will focus on how to deal with table structures input and output on an interactive form.

2 Introduction
In SAP Web Application Server 6.40 (SAP NetWeaver 04), it provides a new service called Adobe Document Service for rendering and generating Adobe Forms. In this howto paper, we will show you the basic steps you need for creating an Adobe Interactive Form for online and offline scenarios. Remarks: the info in this document is based on the NetWeaver 04 release of SAP Web Application Server 6.40. Prerequisites This paper assumes the readers have already had the basic concepts on Web Dynpro development. The details of Web Dynpros terminologies and concepts will not be explained in this paper. Users can refer to the corresponding Web Dynpro documents for details. This paper also assumes users have basic concept on how to create an online interactive form. For detail on how to create an interactive form, please refers to the how-to paper Tips on Adobe Form Development how to create online and offline Adobe Forms in Web Dynpro. Users should have had SAP Web Application Server 6.40 NetWeaver Developers Workplace installed on his/her development machine. Details on installing NetWeaver Developers Workplace can be found in the installation guide of SAP Web Application Server 6.40. Adobe Document Service should have been installed and ready for use. The detail on the installation and configuration of Adobe Document Service can be found in the installation guide. On the developers machine, you need to have Adobe Reader (>= 6.0.2) and ActiveX Control Framework installed. For details, please see the installation guideline.

-1-

3 The Step By Step Solution

3.1 PART 1 Displaying Table outputs on Adobe Forms In this part of the paper, it will show the steps for displaying a table structure output in an online interactive form inside Web Dynpro. As an example, we will build a sample data context in Web Dynpro with multiple instances / records at runtime.
3.1.1 Creating context in Web Dynpro

1. In NetWeaver Developer Studio, create a new Web Dynpro project called TableDemo with an application called TableDemoApp and a component called TechDemoComp. Put them all in a package called com.sap.demo.tabledemo. A TableDemoCompView should be generated by default.

2. In TableDemoCompView, create the following Context structure:

Value Node: EmployeeInfo o Cardinality: o Singleton: 1..n true

o Value Node: EmployeeRecords Cardinality: Singleton: 0..n true

Value Attributes: EmployeeName (type: string)

Position (type: string)

-2-

3. Create another Value Attribute in the Context root and call it pdfSource. Set the type to binary. The resulting Context will look like below.

3.1.2

Putting a table in the Interactive Form

4. Go to the Layout tab of TableDemoCompView. Create an Interactive Form called EmployeeForm. 5. In the Properties of EmployeeForm, set the followings:

DataSource: Height: pdfSource:

Width:

EmployeeInfo 400px pdfSource

500px

6. Edit the EmployeeForm (by right click on it and choose Edit). This will show the Adobe Designer for editing.

7. Place a Subform UI element onto the form. To do it, drag the Subform icon under the Standard Library tab on to the form. 8. In the Properties of this Subform, set the following:

Type: Flow Content Flow Direction: Table

-3-

9. Place another Subform element inside this Subform.

10. In the Properties of the inner Subform, set the followings:

Type: Flow Content Flow Direction: Table row

11. On the Binding properties of the inner subform, check the checkbox Repeat Subform for Each Data Item. Uncheck the checkbox of Min Count.

12. Drag the EmployeeName and Position attributes from the Data View into the inner subform. 13. Click on Save All Meta-data.

3.1.3

Testing the table output display <Please refer to Appendix 1 for the sample codes>

14. To test the application, we will create some testing data for the EmployeeRecords. To do it, go to the Implementation tab of TableDemoCompView and add the following codes to the wdDoInit() method.

-4-

15. Deploy and Run the TableDemoApp.

-5-

3.2

PART 2 Taking Table inputs on Adobe Forms

In this part of the paper, we will modify the Adobe Form created in session 1 to take in a Table like input for the employee records.
3.2.1 Adding actions to the existing form

16. We need to remove the testing data we created in session 1 first. Go back to the Implementation of TableDemoCompView. Remove all the sample codes we created in wdDoInit(). 17. Edit the EmployeeForm again. Place a Submit to Sap button onto the form. 18. Go back to the Actions tab of TableDemoCompView. Add a new action called Submit. 19. Click on the Layout tab. Go to the Properties of EmployeeForm. Set the Event On Submit to Submit.

20. Click on the Implementation tab. Add the following codes to the onActionSubmit() method. We will display the inputted employee info as a message in Web Dynpro. 21. Click on Save All Meta-data. 22. Deploy and Run TableDemoApp. Enter some testing data for the 4 records and press Submit to Sap. You should be able to see them as a message from Web Dynpro.

<Please refer to Appendix 2 for the sample codes>

-6-

4 Appendix
4.1 Appendix 1 sample code for sample data initialization

public void wdDoInit() { //@@begin wdDoInit() Collection myRecords = new ArrayList(); myRecords.clear(); IPrivateTableDemoCompView .IEmploymentRecordsElement employmentRecordElement1 = wdContext.createEmploymentRecordsElement(); employmentRecordElement1.setEmployeeName("Marc Chan"); employmentRecordElement1.setPosition("Consultant"); myRecords.add(employmentRecordElement1); IPrivateTableDemoCompView .IEmploymentRecordsElement employmentRecordElement2 = wdContext.createEmploymentRecordsElement(); employmentRecordElement2.setEmployeeName("Batman"); employmentRecordElement2.setPosition("Super Hero"); myRecords.add(employmentRecordElement2); IPrivateTableDemoCompView .IEmploymentRecordsElement employmentRecordElement3 = wdContext.createEmploymentRecordsElement(); employmentRecordElement3.setEmployeeName("James Bond"); employmentRecordElement3.setPosition("Spy 007"); myRecords.add(employmentRecordElement3); wdContext.nodeEmploymentRecords().bind(myRecords); //@@end }

4.2

Appendix 2 sample code for sample data initialization

public void wdDoInit() { //@@begin wdDoInit() Collection records = new Vector(); IPrivateTableDemoCompView.IEmploymentRecordsElement employmentrecord = null; int NUM_RECORDS = 4; for (int i = 0; i < NUM_RECORDS; i++) { employmentrecord = wdContext.createEmploymentRecordsElement(); records.add(employmentrecord); } wdContext.nodeEmploymentRecords().bind(records); //@@end }

-7-

www.sdn.sap.com/irj/sdn/howtoguides