BC481_EN_Col73

BC481 SAP Interactive Forms by Adobe in SAP Environments SAP NetWeaver

Date Training Training Center Instructors

Education Website

Participant Participant Handbook Handbook Course Version: Version: 73 Course Duration: 2 Day(s) Material Number: 50090874

An SAP course - use it to learn, reference it for work

Copyright Copyright © 2009 SAP AG. All rights reserved. No part of this publication may be reproduced or transmitted in any form or for any purpose without without the express express permission permission of SAP AG. The information information contained 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.

Trademarks •

Microsoft®, Microsoft®, WINDOWS®, WINDOWS®, NT®, EXCEL®, EXCEL®, Word®, PowerPoint® PowerPoint® and SQL Server® Server® are registered trademarks of Microsoft Corporation.

•

IBM®, DB2®, OS/2®, DB2/6000®, DB2/6000®, Parallel Parallel Sysplex®, Sysplex®, MVS/ESA®, MVS/ESA®, RS/6000®, RS/6000®, AIX®, AIX®, S/390®, AS/400®, OS/390®, and OS/400® are registered trademarks of IBM Corporation.

•

ORACLE ORACLE® ® is is a regist registere ered d tradema trademark rk of ORACLE ORACLE Corpor Corporati ation. on.

•

INFORMIX INFORMIX®-OnL ®-OnLine ine for SAP and INFORMIX INFORMIX® ® Dynamic Dynamic ServerTM ServerTM are registered registered trademarks of Informix Software Incorporated.

•

UNIX®, UNIX®, X/Open®, X/Open®, OSF/1®, OSF/1®, and Motif® Motif® are registered registered trademarks trademarks of the Open Group. Group.

•

Citrix®, Citrix®, the Citrix Citrix logo, ICA®, Program Program Neighborhood Neighborhood®, ®, MetaFrame®, MetaFrame®, WinFrame® WinFrame®,, VideoFrame®, MultiWin® and other Citrix product names referenced herein are trademarks of Citrix Systems, Inc.

•

HTML, HTML, DHTML DHTML,, XML, XML, XHTML XHTML are trademarks trademarks or registered registered trademarks trademarks of W3C®, World Wide Web Consortium, Massachusetts Institute of Technology.

•

JAV JAVA® is a registered registered trademark trademark of Sun Microsystem Microsystems, s, Inc.

•

JAV JAVASCRIPT® ASCRIPT® is a register registered ed trademark trademark of Sun Microsy Microsystems stems,, Inc., Inc., used used under license license for for technology invented and implemented by Netscape.

•

SAP, SAP, SAP Logo, R/2, RIVA, RIVA, R/3, R/3, SAP SAP ArchiveLin ArchiveLink, k, SAP SAP Business Business Workflow orkflow, WebFlow WebFlow,, SAP EarlyWatch, BAPI, SAPPHIRE, Management Cockpit, mySAP.com Logo and mySAP.com are trademarks or registered trademarks of SAP AG in Germany and in several other countries all over the world. All other products mentioned are trademarks or registered trademarks of their respective companies.

Disclaimer THESE MATERIALS MATERIALS ARE PROVIDED BY SAP ON AN "AS IS" BASIS, AND SAP EXPRESSLY EXPRESSLY DISCLAIMS ANY AND ALL WARRANTIES, EXPRESS OR APPLIED, INCLUDING WITHOUT LIMITATION WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE, WITH RESPECT TO THESE MATERIALS AND THE SERVICE, INFORMATION, TEXT, GRAPHICS, LINKS, OR ANY OTHER MATERIALS AND PRODUCTS CONTAINED HEREIN. IN NO EVENT SHALL SAP BE LIABLE FOR ANY DIRECT, INDIRECT, INDIRECT, SPECIAL, INCIDENTAL, INCIDENTAL, CONSEQUENTIAL, OR PUNITIVE DAMAGES OF ANY KIND WHATSOEVER, WHATSOEVER, INCLUDING WITHOUT LIMITATION LIMITATION LOST REVENUES OR LOST PROFITS, WHICH MAY RESULT FROM THE USE OF THESE MATERIALS OR INCLUDED SOFTWARE COMPONENTS.

g2009191081

About This Handbook This handbook is intended to complement the instructor-led presentation of this course, course, and serve as a source source of reference. reference. It is not suitable for self-study self-study..

Typographic Conventions American American English is the standard used in this handbook. handbook. The following following typographic conventions are also used. Type Style

Description

Example text

Words or characters that appear on the screen. These include field names, screen titles, pushbuttons as well as menu names, paths, and options. Also used for cross-references to other documentation both internal (in this documentation) and external (in other locations, locations, such as SAPNet). SAPNet).

Example text

Emphasized Emphasized words or phrases phrases in body text, titles of graphics, and tables

EXAM EXAMPLE PLE TEXT TEXT

Name Namess of eleme element ntss in the the syste system. m. These These incl includ udee report names, program names, transaction codes, table names, and individual individual key words words of a programming programming language, when surrounded by body text, for example SELECT and INCLUDE.

Exampl Example e text text

Screen output. This includes file and directory names and their paths, messages, names of variables and parameters, and passages of the source text of a program.

Exampl Example e text text

Exact user entry. entry. These are words and characters characters that you enter in the system exactly as they appear in the documentation.

text>

Variable user entry. entry. Pointed brackets indicate that you replace these words and characters with appropriate entries.

Icons in Body Text The following icons are used in this handbook. handbook.

2009

© 2009 SAP AG. All rights reserved.

iii

About This Handbook

Icon

BC481

Meaning

For more information, tips, or background

Note or further explanation of previous point Exception or caution

Procedures

Indicates Indicates that the item is displayed displayed in the instructor's instructor's presentation.

iv


2009

Contents Course Overview ....... ....... ....... ....... ....... ...... ....... ....... .. vii Course Goals ........ ........ ........ ....... ........ ........ ........ ....vii ....vii Course Ob Objectives .. .... .... .... .... .... .... ... .... ... .... .... .... .... .vii

Unit Unit 1: Pro Product duct Ove Overvie rview w ... .... .... ... .... ... .... ... .... ... .... ... .... ..1 .. 1 SAP and Adobe Partnership...........................................2 Partnership........................................... 2 Product Ad Advantages .... ... .... .... .... .... .... .... .... ... .... ... .... ...7 ...7 Product Capabilities Overview ...................................... 13 ...................................... 13

Unit 2: SAP Interactive Forms by Adobe in SAP environments 23 environments 23 SAP Interactive Forms in SAP Environments: Architecture..... 24 Business Applications Featuring SAP Interactive Forms by Adobe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 ABAP Reports and Form Interfaces I nterfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Adobe LiveCycle Designer basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

Unit 3: SAP Interacti Interactive ve Forms by Adobe Adobe in Web Dynpro Dynpro ABAP environments ...... ....... ....... ....... ....... ....... ....... ....... ...... 63 The The Web Web Dyn Dynpr pro o For For ABAP ABAP Fra Frame mewo work. rk. .. .. .. .. .. .. .. .. .. .. .. .. .. 64 .. 64 The InteractiveForm UI element .................................... 68 .................................... 68

Unit Unit 4: 4: Adva dvanced ced Fea Feature tures s . ... .... ... .... ... .... ... ... .... ... .... ... .. 87 Offline Scenarios...................................................... 89 Scenarios...................................................... 89 Email Sending ........ ....... ........ ........ ........ ........ ........ .. 95 .. 95 Complex Layouts ..................................................... 98 ..................................................... 98 Performance Aspects .... ... .... .... .... .... .... .... .... ... .... ... ..109 ..109 The PD PDFOBJ OBJECT AP API... ... .... ... .... ... .... .... .... .... .... .... ...1 ...114 Digital Sig Signatures .. .... ... .... ... .... .... .... .... .... .... ... .... .... .117

2009


v

Contents

vi

BC481


2009

Course Overview In this course, you'll learn the key aspects of SAP Interactive Forms by Adobe in interactive scenarios. What are the objectives and advantages of the Interactive Forms, what is the architecture required, what are the environments in which they can be integrated are questions which will be answered here. This technical course put emphasis on development in several SAP environments (ABAP, (ABAP, ABAP OO and Web Dynpro ABAP) and provides development development information, techniques and best practices with the Adobe LiveCycle Designer.

Target Audience This course is intended intended for the following audiences: audiences: •

Projec Projectt team team me membe mbers, rs, develo developer perss and and consu consulta ltants nts who are respon responsib sible le for for business scenarios involving interactive forms

Course Prerequisites Required Knowledge •

ABAP ABAP prog progra ramm mmin ing g expe experi rien ence ce

•

Web Dynp Dynpro ro ABAP ABAP expe experi rien ence ce

•

UI interf interface acess progra programmi mming ng kno knowled wledge ge

Recommended Knowledge •

Adobe Adobe LiveCy LiveCycle cle Design Designer er experi experienc encee

Course Goals This course will prepare you to:

2009

•

Unders Understan tand d the the SAP SAP Inter Interacti active ve Form Formss by Adobe Adobe capa capabil bilitie itiess and and use use cases cases in SAP environments

•

Underst Understand and and develo develop p SAP SAP Inter Interact active ive Forms Forms by by Adobe Adobe within within an ABAP ABAP report

•

Understand Understand and develop develop SAP Interactive Interactive Forms by Adobe with Web Dynpro Dynpro ABAP

•

Understand Understand and use the advanced advanced features features of the Adobe LiveCycle LiveCycle Designer Designer


vii

Course Overview

BC481

Course Objectives After completing this course, you will be able to: •

Underst Understand and the SAP Inte Interac ractiv tivee Forms Forms by Adob Adobee capab capabilit ilities ies and use cases cases in SAP environments.

•

Unders Understan tand d and and devel develop op SAP SAP Inte Interac ractiv tivee Forms Forms by Adob Adobee withi within n an ABAP ABAP report

•

Understand Understand and develop develop SAP Interactive Interactive Forms by Adobe with Web Dynpro Dynpro ABAP

•


SAP Software Component Information The information in this course pertains to the following SAP Software Components and releases: •

viii

SAP SAP NetW NetWea eave verr 7.0 7.0


2009

Unit 1 Product Overview Unit Overview This unit focuses on scenarios scenarios and motivations motivations by giving ideas and overview overview on product objectives, objectives , advantages and key capabilities. capabiliti es.

Unit Objectives After completing this unit, you will be able to: •

Underst Understand and reason reasonss for for partne partnersh rship ip betwee between n SAP SAP and Adobe Adobe

•

Underst Understand and the added added value value of SAP Intera Interacti ctive ve Forms Forms by Adobe Adobe

•

Compar Comparee SAP SAP Inte Interac ractiv tivee Forms Forms by Adobe Adobe to other other UI UI tech technol nologi ogies es

•

Compar Comparee SAP SAP Inte Interac ractiv tivee Forms Forms by Adobe Adobe to other other SAP printi printing ng technologies

•

Provid Providee an overvi overview ew of of SAP SAP Inter Interact active ive Forms Forms by by Adobe Adobe integr integrati ation on in in SAP NetWeaver

•

Understand Understand and explain explain the technical technical capabilities capabilities of SAP Interactive Interactive Forms by Adobe

•

Understand Understand and explain explain the technical technical integration integration of SAP Interactive Interactive Forms by Adobe in SAP technologies

•

Underst Understand and the 3-year 3-year roadma roadmap p for for SAP Interac Interactiv tivee Form Formss b by yA Adob dobee

Unit Contents Les Lesson: son: SAP SAP an and Ad Adobe Pa Partne tnersh rship .. .. ... ... .. ... ... .. ... .. ... ... .. ... ... .. ..2 ..2 Lesson: Product Advantages.....................................................7 Advantages.....................................................7 Lesson: Product Capabilities Overview....................................... 13 Overview....................................... 13

2009


1

Unit 1: Product Overview

BC481

Lesson: Lesson: SAP and and Adobe Adobe Partn Partnersh ership ip Lesson Overview This lesson gives insights insights on motivation motivation for SAP Interactive Interactive Forms by Adobe, Adobe, past and future evolution.

Lesson Objectives After completing this lesson, you will be able to: •

Underst Understand and reason reasonss for for partne partnersh rship ip between between SAP and Adobe Adobe

•

Underst Understand and the added added value value of SAP Intera Interactiv ctivee Form Formss by by Adob Adobee

Business Example You're considering the usage of SAP Interactive Forms by Adobe in a project. This lesson underlines the main aspects of SAP and Adobe partnership: the reasons and motivations for the product creation as well as objectives for this product.

Reasons for a partnership

Figure 1: Users are contrained, overwhelmed and unproductive

2


2009

BC481

Lesson: SAP and Adobe Partnership

Figure 2: Requirements for forms-based processes

Figure 3: Challenges in forms-based processes

2009


3


BC481

Figure 4: SAP and Adobe Partnership Overview

Figure 5: Drive data to new SAP users at the edge of the enterprise

4


2009

BC481

Lesson: SAP and Adobe Partnership

Figure 6: Best run businesses employ end-to-end processes

2009


5


BC481

Lesson Summary You should now be able to: •

Underst Understand and reason reasonss for for partne partnersh rship ip between between SAP and Adobe Adobe

•

Underst Understand and the added added value value of SAP Intera Interactiv ctivee Form Formss by by Adob Adobee

Related Information

6

•

SAP on Adobe: Adobe: http://www http://www.sap.c .sap.com/sol om/solutions utions/solut /solutionex ionextension tensions/inter s/interacactiveforms/index.epx

•

Adobe on SAP: http://www http://www.adob .adobe.com e.com/enter /enterprise/ prise/partn partners/sap ers/sap.html .html


2009

BC481

Lesson: Product Advantages

Lesson: Lesson: Product Product Advanta Advantages ges Lesson Overview This lesson compares SAP Interactive Forms by Adobe with other UI technologies and underlines the product advantages.



•


•


Business Example You're considering the usage of various UI technologies, for input screens as well as for print purposes. purposes. This lesson will help you to compare compare pros and cons of these technologies technologies with SAP Interactive Forms by Adobe

SAP Interactive Forms by Adobe advantages

Figure 7: Web, email and advanced forms

2009


7


BC481

Figure 8: SAP Interactive Forms by Adobe vs. other UI technologies

Figure 9: Sample forms delivered by SAP

8


2009

BC481


Figure 10: Interactive Forms: Design time and Runtime

Figure 11: Full integration in SAP NetWeaver

2009


9


BC481

Figure 12: SmartForms vs. PDF-based print forms (1)

Figure 13: SmartForms vs. PDF-based print forms (2)

10


2009

BC481


Figure 14: Migration wizard

2009


11


BC481

Lesson Summary You should now be able to:

12

•

Compar Comparee SAP SAP Inter Interacti active ve Forms Forms by Adobe Adobe to other other UI UI tech technol nologi ogies es

•

Compar Comparee SAP SAP Inte Interac ractiv tivee Form Formss by by Adob Adobee to other other SAP printi printing ng technologies

•

Provid Providee an overvi overview ew of of SAP SAP Inter Interact active ive Forms Forms by by Adobe Adobe integr integratio ation n in SAP NetWeaver


2009

BC481

Lesson: Product Capabilities Overview

Lesson: Lesson: Product Product Capabil Capabiliti ities es Overview Overview Lesson Overview This lesson aims to provide information on product capabilities: integration with various SAP technologies, usage types, integration in business solutions etc.



•


•


Business Example You're at the beginning of a project and you're responsible for the selection of the solution, which features various UI elements and several forms. You're asked to make a study and check whether SAP Interactive Interactive Forms by Adobe are a relevant relevant altenative.

SAP Interactive Forms by Adobe in SAP technical environments The focus of this lesson in the technical integration integration of SIFbA.

2009


13


BC481

Figure 15: Forms scenarios: Technical View

Figure 16: Integration into SAP environments

14


2009

BC481


Figure 17: Maintain the visual integrity of a document

Figure 18: Interactive Forms and Enterprise Services Architecture

2009


15


BC481

Figure 19: New in SAP NetWeaver 7.0: security

Figure 20: Roadmap details (1)

16


2009

BC481


Figure 21: Roadmap Details (2)

Figure 22: SAP Interactive Forms by Adobe: Summary

2009


17


BC481



•

Underst Understand and and explain explain the tech technic nical al integ integrat ration ion of SAP SAP Intera Interactiv ctivee Forms Forms by Adobe in SAP technologies

•

Underst Understand and the 3-year 3-year roadma roadmap p for for SAP Intera Interactiv ctivee Form Formss b by yA Adob dobee

Related Information • https://www.sdn.sap.com/irj/sdn/adobe

18


2009

BC481

Unit Summary

Unit Summary You should now be able to: •

Underst Understand and reason reasonss for for partne partnersh rship ip betwee between n SAP SAP and Adobe Adobe

•

Underst Understand and the added added value value of SAP Intera Interacti ctive ve Forms Forms by Adobe Adobe

•


•


•


•


•


•


Related Information

2009

•

SDN Adobe homepage: homepage: https://www https://www.sdn.s .sdn.sap.com ap.com/irj/sd /irj/sdn/adob n/adobee

•

SAP Solutions Solutions on SIFbA: http://www http://www.sap.c .sap.com/sol om/solution utions/solut s/solutionex ionextentensions/interactiveforms/index.epx


19

Unit Summary

20

BC481


2009

BC481

Test Your Knowledge

Test Your Knowledge

2009

1.

Can you explain explain the the benefits benefits of SAP and Adobe collaboratio collaboration n?

2.

Can you give give 3 advan advantag tages es on the SIFb SIFbA A over over HTML HTML scree screen n ? Over Over the SAPGUI ?

3.

Can you you explain explain the technica technicall integratio integration n of SIFbA in SAP NetWeaver NetWeaver at Design time and at Runtime ?

4.

Can you you cite cite and and explain explain 3 improvem improvements ents which which are on on the SIFbA roadmap roadmap ?

5.

Can you you cite cite 3 different different SAP environ environments ments in which which SIFbA are integr integrated ated ?


21

Test Your Knowledge

BC481

Answers 1.

Can you expl explain ain the the benef benefits its of of SAP and and Adobe Adobe colla collabor boratio ation n? Answer: Refer to information above.

2.

Can you give give 3 advan advantag tages es on the SIFb SIFbA A over over HTML HTML scree screen n ? Over Over the the SAPGUI ? Answer: Possibility to save, print and use the form offline; no learning time and no heavy client.

3.

Can you you explain explain the technic technical al integrati integration on of SIFbA in SAP NetWeaver NetWeaver at Design time and at Runtime ? Answer: Refer to slides above.

4.

Can you cite and and explain explain 3 improvem improvements ents which are on on the the SIFbA SIFbA roadmap roadmap ? Answer: Improvements on the roadmap are the following:

5.

•

Insta Install llat atio ion n and and conf config igur urat atio ion n

•

User User prod produc ucti tiv vity ity

•

Acce Access ssib ibil ilit ity y

•

Performance

•

Glob Global aliz izat atio ion n

•

Exte Extend nded ed prin printt feat featur ures es

Can you you cite cite 3 different different SAP environ environments ments in which which SIFbA are integr integrated ated ? environments in which SIFbA are integrated: integrated: Answer: There are 6 SAP environments Guided Procedures, Internet Service Request, WD Java, WD ABAP, ABAP workbench, enterprise reporting.

22


2009

Unit 2 SAP Interactive Forms by Adobe in SAP environments Unit Overview This unit is more technical and focuses on architecture, integration in ABAP programming and provides information and guidelines on the usage of the Adobe LiveCycle Designer.


Underst Understand and the archit architect ecture ure used used at design design time and runtime runtime of SAP Interactive Forms by Adobe

•

Know Know and and us usee the the best best practi practices ces and SAP recomm recommend endati ations ons in term termss of architecture

•

Troub Troubles leshoo hoott an exis existin ting g instal installati lation on and and find find test progra programs ms in an SAP SAP ECC ECC system

•

Underst Understand and and kno know w where where to loca locate te the the most most import important ant SAP Intera Interacti ctive ve Forms by Adobe in SAP ECC

•

Underst Understand and the design design and and runt runtime ime requir required ed to to gener generate ate an an inter interacti active ve form form from a traditional traditional ABAP report. report.

•

Write Write you yourr own own report report to genera generate te an Intera Interactiv ctivee Form Form..

•

Underst Understand and and make make use use of the main functi functiona onalit lities ies and elemen elements ts of of the the Adobe LiveCycle Designer

Unit Contents Lesson: SAP Interactive Forms in SAP Environments: Architecture ..... 24 Lesson: Business Applications Applications Featuring SAP Interactive Forms by Adobe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 31 Less Lesson on:: ABAP ABAP Rep Repor orts ts and and For Form m Inte Interf rfac aces es.. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. . 37 Exercise 1: Discover and understand ABAP reports used to produce an Interactive Form.......................................................... 41 Form.......................................................... 41 Less Lesson on:: Adob Adobe e Live LiveCy Cycl cle e Desi Design gner er bas basic ics.. s.. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. . 44 Exercise 2: Generate a custom interactive form ........................ 51

2009


23

Unit 2: SAP Interactive Forms by Adobe in SAP environments

BC481

Lesson: Lesson: SAP Interact Interactive ive Forms Forms in SAP Environ Environmen ments: ts: Architecture Lesson Overview This lesson provides information on architecture at design time and at runtime of the SAP Interactive Interactive Forms by Adobe Adobe in the ABAP environments. environments.


Underst Understand and the archit architect ecture ure used used at at desig design n time time and runtim runtimee of SAP Interactive Interactive Forms by Adobe

•

Know Know and and u use se the the best best practi practices ces and SAP recomm recommend endati ations ons in term termss of architecture

•

Troub Troubles leshoo hoott an exis existin ting g instal installati lation on and and find find test test progr programs ams in an SAP ECC ECC system

Business Example You're part a of a company with a complex SAP landscape, featuring various SAP solutions and NetWeaver components. You're searching more information on installation, configuration, architecture possibilities and troubleshooting guidelines. guidelines. This lesson focuses on these topics.

24


2009

BC481

Lesson: SAP Interactive Forms in SAP Environments: Architecture

SAP Interactive Forms by Adobe Architecture

Figure 23: System landscapes for PDF forms in WebAS ABAP

Figure 24: Communication in WebAS ABAP: Adobe Document Services

2009


25


BC481

Figure 25: Web Dynpro Java

Figure 26: SAP Interactive Forms by Adobe Detailed Architecture

26


2009

BC481


Figure 27: Installation Troubleshooting (1)


2009


27


BC481



28


2009

BC481


Figure 31: Installation and configuration guides: SDN

2009


29


BC481



•


•


Related Information •

30

SDN Adobe homepage: homepage: https://www https://www.sdn. .sdn.sap.co sap.com/irj/s m/irj/sdn/ado dn/adobe be


2009

BC48 BC481 1

Lesso esson: n: Busi Busin ness ess Appl Applic icat atio ions ns Feat Featur urin ing g SAP SAP Inte Interracti active ve Form orms by Ado Adobe

Lesson: Lesson: Busine Business ss Applic Applicatio ations ns Featuri Featuring ng SAP Interactive Forms by Adobe Lesson Overview This lesson goes through several examples of existing standard SAP Interactive Forms by Adobe integrated in various components of the ECC.


Underst Understand and and kno know w where where to loca locate te the the most most import important ant SAP Intera Interacti ctive ve Forms by Adobe in SAP ECC

Business Example You're part of an SAP team considering considering the usage of SAP Interactive Interactive Forms by Adobe. Your project will involve various SAP components and solutions so you're searching information on modules which make use of nteractive forms as UI tehcnology..

General Overview

Figure 32: Guided Procedures

2009


31


BC481

Figure 33: Interactive forms in business solutions

HCM Processes and Forms

Figure 34: Manager Self Services (1)

32


2009

BC48 BC481 1



Figure 36: HCM Processes and Forms

2009


33


BC481


Other SAP applications

Figure 38: Miscellaneous Miscellaneous

34


2009

BC48 BC481 1


Figure 39: Other SAP Business Applications

Figure 40: Scenario for Service Request where Transaction = Document

2009


35


BC481


Underst Understand and and kno know w where where to loca locate te the the most most importa important nt SAP SAP Inte Interac ractive tive Forms by Adobe in SAP ECC


36



2009

BC481

Lesson: ABAP Reports and Form Interfaces

Lesson: Lesson: ABAP ABAP Reports Reports and Form Form Interfa Interfaces ces Lesson Overview This lesson focuses on ABAP programming programming to develop and deploy custom SAP Interactive Forms by Adobe.



•


Business Example Your business case requires custom interactive forms for various usage. You're a part of an ABAP development team and you need to learn how to develop those forms.

Create an Interactive Form with an ABAP report

Figure 41: Create an Interactive Form with an ABAP report

2009


37


BC481

Figure 42: Tools involved at Design Time

Figure 43: During Runtime

38


2009

BC481


Figure Figure 44: Step by Step

Figure 45: PDF Print Form program: section of the application program

2009


39


BC481

Figure 46: Interfaces and Form Context

Output Output structures structures

Figure 47: Generated Interactive form: parameters in output structures

40


2009

BC481


Exerci Exercise se 1: Discove Discoverr and understand understand ABAP reports used to produce an Interactive Form. Exercise Objectives After completing this exercise, you will be able to: •

Unders Understan tand d the ABAP ABAP logic logic to produc producee PDF forms forms

•

Locat Locatee and and unde unders rsta tand nd test test prog progra rams ms

Business Example You'd like to find examples and sample programs in SAP systems which you could use to learn how to generate generate Interactive Interactive Forms.

Task 1: In this task, you'll find out which are the standard reports available in the SAP ECC. 1.

Searc Search h for for repo report rtss FP_PD FP_PDF* F*

2.

Search Search for report reportss FP_TEST FP_TEST*. *.

Task 2: In this task you're asked to run and explore the coding required to generate an Interactive Form.

2009

1.

Run and analyz analyzee progra program m FP_TEST FP_TEST_00 _00..

2.

Run and and analy analyze ze progr program am FP_TES FP_TEST_0 T_03. 3. Can you you locate locate main main part partss of the the program ? (collection of data, opening of the print program, findout and call of generated function module, close of the print program)


41


BC481

Solutio Solution n 1: Discov Discover er and understan understand d ABAP reports used to produce an Interactive Form. Task 1: In this task, you'll find out which are the standard reports available in the SAP ECC. 1.

2.

Sear Search ch for for repo report rtss FP_PD FP_PDF* F* a)

After After logi login n to you yourr sy syste stem, m, go go to transa transactio ction n SE38. SE38.

b)

Enter FP_PDF* in the search field and press F4. The list l ist of available test programs are displayed displayed

Search Search for report reportss FP_TES FP_TEST*. T*. a)

In SE38, SE38, ente enterr FP_TES FP_TEST* T* in the the searc search h field field and and press press F4. F4. The list list of of available test programs are displayed.

Task 2: In this task you're asked to run and explore the coding required to generate an Interactive Form. 1.

2.

Run and analyz analyzee progra program m FP_TES FP_TEST_0 T_00. 0. a)

In SE38, SE38, enter enter FP_TES FP_TEST_0 T_00 0 and press press F8.

b)

When prompting for an output device, enter LP01. Click on Print Preview. The generated PDF should be displayed.

c)

In the SE38 first screen, screen, select select Source Source Code Code > Display Display..

Run and analyze analyze program program FP_TEST_03. FP_TEST_03. Can you locate main parts of the the program ? (collection of data, opening of the print program, findout and call of generated function module, close of the print program) a)

In SE38, SE38, enter enter FP_TES FP_TEST_0 T_03 3 and press press F8.

b)

When prompting for an output device, enter LP01. Click on Print Preview.

c)

In the SE38 first screen, screen, select select Source Source Code Code > Display Display. Here you can identify the building blocks for the print program.

Result You are now able to locate and understand sample programs in SAP systems.

42


2009

BC481




•



2009



43


BC481

Lesson: Lesson: Adobe Adobe LiveCyc LiveCycle le Designer Designer basics basics Lesson Overview This lesson focuses on the main features of the tool used at design time: the Adobe LiveCycle Designer. The most commonly used elements will be explored.


Unders Understan tand d and and make make use use of of the the main main func functio tional naliti ities es and and elem element entss of the Adobe LiveCycle Designer

Business Example Your team is asked to produce more and more SAP Interactive Forms by Adobe and also to train people for quick and easy changes.

The Adobe LiveCycle Designer

Figure 48: Working with the LiveCycle Designer

44


2009

BC481

Lesson: Adobe LiveCycle Designer basics

Figure 49: Designer Objects

Figure 50: Master and Body Pages

2009


45


BC481

Figure 51: Master and Body Pages

Figure 52: Form Design View

Figure 53: Form Design View

46


2009

BC481


Figure 54: Configuring and Organizing Designer Objects

Figure 55: Draw Objects Objects

2009


47


BC481

Figure 56: Field Objects

Figure 57: Complex Container Objects

48


2009

BC481


Figure 58: Object Positioning and Formatting Properties

Figure 59: Custom Objects

2009


49


BC481

Figure 60: Import and Open Documents and Forms

50


2009

BC481


Exercise 2: Generate a custom interactive form Exercise Objectives After completing this exercise, you will be able to: •

Unders Understan tand d ho how w to to gener generate ate an SAP SAP Inte Interac ractiv tivee Form Form by Adob Adobee with with an an ABAP report

•

Write Write an ABAP ABAP report report to gene generate rate an SAP SAP Inte Interac ractiv tivee Form Form by by Adobe Adobe

Business Example You're responsible for the development for an Interactive Form which should be used either in standalone mode, or integrated later on in the project in an online application. For this, you decide to start the development development of the form using an ABAP report. report. Data Logo X position Logo Y position Logo width Logo height Firstname X position Firstname Y position Firstname width Firstname height Lastname X position Lastname Y position Lastname width Lastname height hei ght

Date Value

6.5in 0.375in 1.375in 1in 0.5in 1.125in 4in 0.25in 0.5in 1.375in 4in 0.25in

Task 1: First task is to create a development package to centralize all your developments you'll you'll make during this course. course. 1.

Create Create a package package with with name name ZBC481 ZBC481GROUP# GROUP##, #, where where ## ## is your group number.

Continued on next page

2009


51


BC481

Task 2: In this task, you prepare the data to be used by the Interactive Form. 1.

Create Create a structure structure called ZPDF_DAT ZPDF_DATA_##, where ## ## is your your group group number number,, with the following fields/type: MANDT/MANDT, FIRSTNAME/CHAR25, LASTNAME/CHAR25

2.

Create Create a table table type type ZPDF_TDA ZPDF_TDAT TA_##, where ## is your your group group number. number.

3.

Create an interfa interface ce called called ZBC481_EX01 ZBC481_EX01_IF_## _IF_##,, where where ## ## is your group group number number. Assign it as an optional import import parameter the structure you've you've created.

Task 3: In this task, you create a form ready to consume the interface and structures from task 1. 1.

Create a form form called called ZBC481_EX0 ZBC481_EX01_FORM 1_FORM_##, _##, where ## is is yo your ur group group number. Select the interface you've created as the interface.

2.

Insert Insert all all the the struct structure ure elemen elements ts to the form form conte context. xt.

3.

Create Create a simpl simplee layout layout for for your your PDF PDF form form with the the FIRST FIRSTNAME NAME and and LASTNAME data. Enter respectively First Name and Last Name as field captions. Set the appearance of the field to Underlined. Check that paper size of your form is A4. Insert an SAP logo on the master page (logo can be found under My Documents > BC481 > saplogo.gif). Positioning requirements for the three elements are given in the data section above.

Task 4: Finally, you create an ABAP report which will call created Interactive Form.

52

1.

Create a program program called ZBC481_GEN ZBC481_GENERA ERATE_PDF TE_PDF_##, _##, where ## is is your your group number, to generate your interactive PDF form.

2.

Generate Generate your your form. form. Save it locally and verify that it acts as as a data data container container..


2009

BC481


Solution 2: Generate a custom interactive form Task 1: First task is to create a development package to centralize all your developments you'll you'll make during this course. course. 1.

Create Create a package package with with name name ZBC481 ZBC481GROUP# GROUP##, #, where where ## ## is your group number. a)

Start Start tran transa sacti ction on SE80 SE80..

b)

Select “Package” from the drop down list, enter ZBC481GROUP##, where ## is your group number number and hit enter. enter. Enter a description description such as BC481 Package Group ##, select HOME as software software component component and hit the Save button.

c)

You're then prompted prompted for the creation creation of a workben workbench ch request request.. Hit the create request button (or F8) and enter a short description description such as BC481 Generic Request Group ##, where ## is your group number. Select this request for your package and hit continue.

d)

Your packag packagee is now now create created d and ready ready for for usage usage..


2009


53


BC481

Task 2: In this task, you prepare the data to be used by the Interactive Form. 1.

2.

Create Create a structure structure called ZPDF_DAT ZPDF_DATA_##, where ## ## is your your group group number number,, with the following fields/type: MANDT/MANDT, FIRSTNAME/CHAR25, LASTNAME/CHAR25 a)

Go to tran transac sacti tion on SE11. SE11.

b)

In the Data Type Type field enter your structure s tructure name, ZPDF_DAT ZPDF_DATA_## and hit create.

c)

Select Structure Structure and and enter enter a descript description ion such as BC481 BC481 Ex01 Structure Structure Group ##, where ## is your group number.

d)

Enter Enter the the three three menti mentione oned d fields fields state stated d above above:: MANDT MANDT of type type MANDT, FIRSTNAME of type CHAR25 and LASTNAME of type CHAR25.

e)

Select an enhancement enhancement category: category: in the the display display screen of your structure, structure, go to Extras > Enhancement category. Select Can be enhanced and hit continue. continue. (Remark: (Remark: the enhancement enhancement category category is used to define wich type of enhancement can be made on the structure itself.)

f)

Save your object object in your package, package, using using the workbench workbench request request created created above and activate it.

Create a table table type type ZPDF_TDA ZPDF_TDAT TA_##, where ## is your your group group number. number. a)

In the the field field Data Data Type, Type, enter ZPDF_TDA ZPDF_TDATA_##, where ## is is your your group number, and hit create.

b)

Select Table Type from the radio buttons. Enter a short text such as BC481 PDF Table Type Group ## and select ZPDF_DATA_## as a line type.

c)

Save Save and activa activate te your your table table type type using using your your packag packagee and the workbench request you've created earlier.


54


2009

BC481


3.

Create an interface interface called ZBC481_EX0 ZBC481_EX01_IF_# 1_IF_##, #, where where ## ## is your group number number. Assign it as an optional import import parameter the structure you've you've created. a)

Go to transac transaction tion SFP and and select the radio button button “Interf “Interface”. ace”.

b)

Enter interface name ZBC481_EX01_IF_##, select ABAP DictionaryDictionary-based based interface interface and hit create. Enter a description description such as BC481 Ex01 Interface Group ## and save it in your package, using the workbench request you've created earlier.

c)

In the the import import para paramet meters ers,, add a line line by clic clickin king g on the the white white sheet sheet (above (above the parameters parameters lines) or on the green plus sign. Name your new parameter PDFDATA, PDFDATA, which is of TYPE TYP E ZPDF_TDA ZPDF _TDAT TA_##.

d)

Don't forget forget to to check check the the two two checkbo checkboxes xes “Option “Optional” al” and and “Pass “Pass Value. Value. ”

Task 3: In this task, you create a form ready to consume the interface and structures from task 1. 1.

2.

3.

Create a form form called called ZBC481_EX0 ZBC481_EX01_FORM 1_FORM_##, _##, where ## is is your your group group number. Select the interface you've created as the interface. a)

In transaction transaction SFP, SFP, select the radio button button “Form”. “Form”.

b)

Enter your form name and click create. Enter a description such as BC481 Ex01 PDF Form Group ## and save it in your package, using the workbench request you're created in the previous task.

c)

Select the interface interface you've you've just just created created (ZBC481_EX0 (ZBC481_EX01_IF_ 1_IF_##) ##) for this form. Save the form in your package package and use the workbench request request you've previously created. Activate your form.

Insert Insert all the the struc structur turee elemen elements ts to the form form conte context. xt. a)

In the the change change mod modee for for your your form form,, go to to the the Conte Context xt tab. tab.

b)

Select the structure PDFDAT PDFDATA from the import parameters of the interface (left part of the screen).

c)

Drag Drag and drop drop the the structu structure re under under the the root root contex contextt node node (which (which has has normally the same name as your form).

Create Create a simple simple layou layoutt for for your your PDF PDF form form with with the the FIRSTNA FIRSTNAME ME and and LASTNAME LASTNAME data. Enter respectively respectively First Name and Last Name as field captions. Set the appearance of the field to Underlined. Check that paper size


2009


55


BC481

of your form is A4. Insert an SAP logo on the master page (logo can be found under My Documents > BC481 > saplogo.gif). Positioning requirements for the three elements are given in the data section above. a)

Go the the the the layo layout ut tab tab of of the the trans transacti action on SFP SFP..

b)

To check the paper size, select the Hierarchy palette and select the Page1 element element (data > (Master Pages) Pages) > Page1). Page1). When the element is selected, go to the Object palette > Master Page. You can check the master page's properties, such as paper type. Set it to A4 instead of Letter.

c)

In the left left part part of of the scree screen, n, in the the data view view palet palette, te, you you can find find the the three fields from the context. Be sure to be on the Design View in the LiveCycle Designer.

d)

By drag drag and and drop, drop, place place the the fields fields FIRST FIRSTNAM NAME E and LAST LASTNAME NAME to the design view of your form. Select the field by clicking on it in the Design View, then go to the Object palette. Set the caption and appearance. Then go to the Layout palette and set the layout requirements.

e)

Go to the Maste Masterr Pages Pages tab. tab. By drag and drop drop,, add add an Imag Imagee elemen elementt from the Standard library library. Select the element and in the layout tab set the layout requirements as indicated above. In the object tab of the image, image, check Embed image data and enter the URL of the image. Hint: the yellow folder icon next to the URL field opens an explorer to get the image. Hit Ok when 'Network 'Network Connection Connection Not Found' Found' opens up.

f)

Once Once this this is don done, e, save and activa activate te the form. form.

Task 4: Finally, you create an ABAP report which will call created Interactive Form. 1.

Create a program program called ZBC481_GEN ZBC481_GENERA ERATE_PDF TE_PDF_##, _##, where ## is is your your group number, to generate your interactive PDF form. a)

Go to transaction transaction SE38, enter ZBC481_GE ZBC481_GENERA NERATE_PDF_ TE_PDF_## ## as as name name and hit create. Enter a description such as BC481 Generate Interactive Form - Group ##.

b)

Program is an executable program, status is Test Program. Save your object in your package, using the workbench request you've created earlier.

c)

Insert Insert the the follow following ing code code to the the progr program am under under your your repo report rt name. name. Adapt the code with your group number. number. The source code of the program for group 00 can be found under My Documents > BC481 > ZBC481_GENERATE_PDF_00.txt. Continued on next page

56


2009

BC481


parameter:

p_form p_conn p_ia

type tdsfname type rfcdest type tdbool.

default 'ZBC481_E default 'ADS',

data:

fm_name type rs38l_fnam, fp_docparams fp_docparams type sfpdocparams sfpdocparams, , fp_outputpara fp_outputparams ms type sfpoutputpar sfpoutputparams, ams, error_s error_stri tring ng type type string string. .

* Firs First t get get name name of the gene genera rate ted d func functi tion on modu module le call function function 'FP_FUNCTION_ 'FP_FUNCTION_MODULE MODULE_NAME' _NAME' exporting i_name = p_form importing e_funcname = fm_name. * exce except ptio ion n han handl dlin ing g ??? ??? * Set Set outp output ut para parame mete ters rs and and open open spoo spool l job job fp_outputparams-preview = 'X'. " launch print prev fp_outputpar fp_outputparams-con ams-connectio nection n = p_conn. p_conn. fp_outputpar fp_outputparams-des ams-dest t = 'LP01'. 'LP01'. call function function 'FP_JOB_OPEN' 'FP_JOB_OPEN' changing ie_outputparams = fp_outputparams exceptions cancel = 1 usage_error = 2 system_error = 3 internal_error = 4 others = 5. if sy-s sy-sub ubrc rc <> 0. messag message e id sy-msgi sy-msgid d type type sy-msg sy-msgty ty number number sy-msg sy-msgno no with with sy-msgv sy-msgv1 1 sy-msg sy-msgv2 v2 sy-msg sy-msgv3 v3 sy-msg sy-msgv4. v4. endif. * Set Set form form lang langua uage ge and and coun countr try y (->f (->for orm m loca locale le) ) fp_docparams fp_docparams-fillab -fillable le = p_ia. * Now Now call call the the gene generat rated ed func functi tion on modu module le call call functi function on fm_name fm_name exporting /1bcdwb/docparams = fp_docparams * IMPORTING * /1BCDWB/FORMOUTPUT = Continued on next page

2009


57


BC481

exceptions usage_error = 1 system_error = 2 internal_error = 3 others = 4. if sy-s sy-sub ubrc rc <> 0. call function function 'FP_GET_LAST 'FP_GET_LAST_ADS_ER _ADS_ERRSTR' RSTR' importing e_adserrstr = error_string. if not not erro error_ r_st stri ring ng is init initia ial. l. * we re received a detailed er error des desc cription write:/ write:/ error_string error_string. . exit. else. messag message e id sy-msg sy-msgid id type type sy-msgt sy-msgty y number number sy-msg sy-msgno no with with sy-msg sy-msgv1 v1 sy-msgv sy-msgv2 2 sy-msg sy-msgv3 v3 sy-msg sy-msgv4. v4. endif. endif. * Clos Close e spoo spool l job job call function function 'FP_JOB_CLOS 'FP_JOB_CLOSE' E' * IMPORTING * E_RESULT = exceptions usage_error = 1 system_error = 2 internal_error = 3 others = 4. if sy-s sy-sub ubrc rc <> 0. messag message e id sy-msg sy-msgid id type type sy-msgt sy-msgty y number number sy-msg sy-msgno no with with sy-msg sy-msgv1 v1 sy-msgv sy-msgv2 2 sy-msg sy-msgv3 v3 sy-msg sy-msgv4. v4. endif.

2.

d)

Save Save and activate activate you yourr progra program. m.

e)

In the the top menu menu,, select select Goto Goto > Text Text elem element entss > Selecti Selection on texts texts.. Enter Enter the following following values for the respective respective parameters: parameters: P_CONN: P_CONN: ADS Connection Connection;; P_FORM: Form Name; P_IA: Interactive Interactive ?. When this is done, save and activate the texts.

Generate Generate your your form. form. Save it locally locally and verify that it acts as as a data data container container.. a)

58

Run your program. program. The interacti interactive ve form form appears appears in the SAPGUI. You can fill up the fields. Save it in local with the appropriate appropriate Reader Reader icon, enter some data, close the form the reopen it. Data has been stored in the form.


2009

BC481



Underst Understand and and make make use use of the main functi functiona onalit lities ies and elemen elements ts of of the the Adobe LiveCycle Designer

Related Information

2009

•


•

SDN ABAP homepage: homepage: https://www https://www.sdn. .sdn.sap.co sap.com/irj/ m/irj/sdn/ab sdn/abap ap


59

Unit Summary

BC481

Unit Summary You should now be able to:

60

•


•


•


•

Underst Understand and and kno know w where where to loca locate te the the most most importa important nt SAP SAP Inte Interac ractive tive Forms by Adobe in SAP ECC

•

Understand Understand the design and runtime runtime required required to generate generate an interactive interactive form from a traditional traditional ABAP report. report.

•

Write rite your your own report report to genera generate te an Intera Interacti ctive ve Form. Form.

•

Unders Understan tand d and and make make use use of of the the main main func functio tional naliti ities es and and elem element entss of the Adobe LiveCycle Designer


2009

BC481

Test Your Knowledge

Test Your Knowledge

2009

1.

Can you you expla explain in stack stackss requir required ed when when one one system system is is used ? When When multip multiple le systems are used ?

2.

What What are the the commo commonly nly used used test test prog program ramss to test test ADS instal installat lation ion and and configuration ?

3.

What What is the the cent central ral sou source rce of of infor informat mation ion for SIFbA SIFbA ?

4.

In which which SAP SAP solut solution ion can can sever several al SIFbA SIFbA be be used used as input input screen screenss ?


61

Test Your Knowledge

BC481

Answers 1.

Can you explain explain stacks stacks require required d when when one one system system is used used ? When multiple multiple systems are used ? Answer: SAPInst installs and configures automatically the ADS component when installing a system ABAP + Java.

When multiple systems are used, communication needs to be setup between the AS ABAP and AS Java, with the SM59 transaction and the J2EE Visual Admin. 2.

What What are the the commo commonly nly used used test test progr programs ams to test test ADS ADS installa installatio tion n and configuration ? Answer: All the programs FP_TEST* available within transaction SE38. The Web Services navigator available on the J2EE engine can also be used.

3.

What What is the the cent central ral sour source ce of of infor informat mation ion for SIFbA SIFbA ? Adobe hom homepa epage: ge: Answer: The SDN Adobe https://www.sdn.sap.com/irj/sdn/adobe

4.

In which which SAP SAP solut solution ion can can sever several al SIFbA SIFbA be be used used as input input scre screens ens ? Answer: The HCM module features a number of SIFbA within the HCM Processes and Forms functionality.

62


2009

Unit 3 SAP Interactive Forms by Adobe in Web Dynpro ABAP environments Unit Overview This unit focuses on the most commonly used user interface technology which can embed an interactive form: the SAP Web Dynpro technology.


Unde Unders rsta tand nd the the MVC MVC para paradi digm gm

•

Understand Understand the basics of the Web Dynpro Dynpro for ABAP framework framework to work with interactive forms: controllers, context and actions

•

Underst Understand and the steps steps requi required red to inte integra grate te an Intera Interactiv ctivee Form Form in a Web Web Dynpro ABAP application

•

Develo Develop p yo your ur own own Web Web Dynp Dynpro ro for for ABAP ABAP applica applicatio tion n with with an an embe embedde dded d Interactive Form

•

Undersa Undersand nd the differ differenc ences es betw between een ZCI and ACF develo developed ped forms forms

Unit Contents Less Lesson on:: The The Web Web Dynp Dynpro ro For For ABA ABAP P Frame Framewo work rk . .. .. .. .. .. .. .. .. .. .. .. .. .. 64 .. 64 Lesson: The InteractiveForm UI element..................................... 68 element..................................... 68 Exercise 3: Create a Web Dynpro ABAP application with an embedded SAP Inte Intera ract ctiv ive e Form Form by by Ado Adobe .... .. ... .. ... ... .. ... ... .. ... ... .. ... ... .. 75 .. 75

2009


63

Unit Unit 3: SAP SAP Int Interac eracti tiv ve Forms orms by Ado Adobe in Web Dyn Dynpro pro ABAP ABAP envi enviro ronm nmen ents ts

BC4 BC481

Lesson: Lesson: The Web Web Dynpro Dynpro For ABAP ABAP Framew Framework ork Lesson Overview This lesson covers the basis of the Web Dynpro for ABAP framework required to integrate integrate an SAP Interactive Form by Adobe. Adobe.


Unde Unders rsta tand nd the the MVC para paradi digm gm

•


Business Example You project which requires Web Dynpro ABAP knowledge is about to start and you need to keep your team up to date with this technology basics.

The Web Dynpro Basics

Figure 61: What is Web Dynpro ?

64


2009

BC481

Lesson: The Web Dynpro For ABAP Framework

Figure 62: Classic Model View Controller (MVC)

Figure 63: Web Dynpro Controllers

2009


65


BC4 BC481

Figure 64: The Context - The heart of a controller

Figure 65: Navigation between views

66


2009

BC481

Lesson: The Web Dynpro For ABAP Framework



•



2009

SDN Web Dynpro Dynpro ABAP homepage: homepage: https://www https://www.sdn.s .sdn.sap.co ap.com/irj/s m/irj/sdn/nwdn/nwwdabap


67


BC4 BC481

Lesson: Lesson: The Interac Interactiv tiveFor eForm m UI element element Lesson Overview This lesson focuses on one specific UI element of the Web Dynpro environment, the InteractiveFor InteractiveForm m UI element. element. It's a quite powerful powerful but complex complex one and this lesson deals with its integration with the Web Dynpro for ABAP framework..


Underst Understand and the step stepss requi required red to integ integrat ratee an Intera Interactiv ctivee Form Form in in a Web Web Dynpro ABAP application

•

Develo Develop py your our own Web Dynp Dynpro ro for for ABAP ABAP applic applicati ation on with with an embe embedde dded d Interactive Form

•

Undersa Undersand nd the differ differenc ences es between between ZCI and ACF develo developed ped forms forms

Business Example You're responsible for the development of a Web Dynpro ABAP application featuring featuring SAP Interactive Interactive Forms by Adobe.

Prerequisites The building blocks of the Web Dynpro application are supposed available. The minimum requires: •

A view iew to embe embed d the the PDF PDF

•

A wind window ow in whic which h the the view view is embe embedd dded ed

•

A component component controller controller (created (created by default default when application application is created) created)

•

The contex context, t, incl includi uding ng dataSo dataSourc urcee node node and pdfSou pdfSource rce attrib attribute ute

This is the most simple of a Web Dynpro application. Very often, multiple views are present, so this requires implementation of navigation between the views.

68


2009

BC481

Lesson: The InteractiveForm UI element

Integrate an SAP Interactive Form by Adobe in an Web Dynpro ABAP application application

Figure 66: Integrate an Interactive Form in a WDA Application (1)


2009


69


BC4 BC481



Every Web Dynpro view contains an element called “ROOTUIELEMENTCONTAINER”, in which all the elements must be inserted. Right-click on the “ROOTUIELEMENTCONTAINER” and select “Insert Element”. Element”. Enter the name and choose “InteractiveForm “InteractiveForm”” as type. This inserts the InteractiveForm UI element in your Web Dynpro View.

70


2009

BC481


When selected, selected, all the properties properties of this element are displayed in the lower right frame. frame. The following following properties must be filled in: •

dataSo dataSourc urce: e: this this mus mustt refer refer to a contex contextt nod node. e.

•

pdfSou pdfSource rce:: this this mu must st refe referr to to a cont context ext attribu attribute te of of type type XSTR XSTRING, ING, which which acts as the PDF Container in the view.

•

templa templateSo teSourc urce: e: this must must refer refer to to an actual actual PDF form form assoc associat iated ed with with an XML-based XML-based Interface. Interface. (Note: (Note: those can be created created automatically automatically when designing the WDA application).

•

enable enabled: d: means means genera generally lly whet whether her or not not an an event event can be trigg triggere ered d by a user user interaction. interaction. If the enabled property property is set to true, form will be interactive interactive and can act as an input screen.

•

read-only: read-only: specifi specifies es whether whether the user can select the Interactive InteractiveForm Form element element or whether it only is to be displayed as read-only.

•

displa displayT yType ype:: specifies specifies wheth whether er the the Active ActiveX X compo componen nentt or the ZCI is used used at runtime

•

onSubm onSubmit it even event: t: describe describess the the actio action n to be exec execute uted d when when the the user user choo chooses ses the Submit pushbutton Note that the submit event is only evaluated when there a submit button is selected within the form. "Within" "Within" means that the special special Adobe Web Web Dynpro submit button has been included in the Adobe Designer.

Figure 70: Zero Client Installation vs. Active Component Framework

2009


71


BC4 BC481

The other properties properties are: •

ID

•

additionalAr additionalArchive: chive: additio additional nal Gantt and Network Network extensions extensions written by the applications that are packed into a Java archive and loaded in the client.

•

Tooltip ooltip:: quick quick info info text text that that appea appears rs when when the the user user passe passess the mou mouse se poin pointer ter over the UI element

•

Height Height and Width Width:: actual height height and width width of of the the form form as as it will will be displ displaye ayed d in the browser window at runtime

•

Visible: isible: specif specifies ies the visibil visibility ity of the interf interface ace elemen elementt

The other properties are related to the Web Dynpro view.

72


2009

BC481


Here are the detailed detailed steps to integrate integrate a ZCI form in a Web Dynpro Dynpro ABAP view as referred in the slides above. 1.

Right click on the ROOTUIELEMEN ROOTUIELEMENTCONT TCONTAINER AINER and select Insert Insert Element

2.

Select element element type type Interact InteractiveFor iveForm m and and give give it a name name (in (in this this example, example, InteractiveForm)

3.

The Inte Interac ractiv tiveFor eForm m UI eleme element nt now now appear appearss under under the the ROOTUIELEMENTCONTAINER. Display and edit its properties by selecting selecting it

4.

Set its its main properties properties (dataSource (dataSource,, displayT displayType, ype, enabled, enabled, pdfSou pdfSource, rce, height height and width)

5.

Enter a name name for the new new form form template template and and hit hit enter enter. In the the popup, popup, enter enter a name for the new interface and hit the context button

6.

Select Select the the contex contextt node node which which must must be used used to to create create the the interf interface ace.. In this this explanation, we've created a new form template and a new interface based on the context. context. It's possible to use existing form and templates, templates, in this case the interface interface must be used within the view with normal normal ABAP coding coding

7.

Save Save the the newly newly crea created ted object objectss (form (form and interfa interface) ce)

8.

You're ou're sent sent to the the layout layout of of the form. form. First, First, go to to the Prope Properti rties es tab and and set the Layout Type to ZCI layout

9.

Then Then go back back to the the layout layout tab and and in the the menu menu go to Utili Utilitie tiess > Insert Insert Web Web Dynpro Dynpro Script. This command automatically automatically adds JavaScript JavaScript to the form which allows allows ZCI usage. usage. This command command must not be used in case you're you're using the xACF layout type. It's important important to add the script before adding interactive interactive buttons on the form

10. Create your form form layout layout (in (in this example example with with one action button). button). Use the appropriate buttons in the library (Web Dynpro ActiveX if you use xACF display type and Web Dynpro Native for ZCI layout type). 11. 11.

Save Save and and activ activate ate you yourr form form

12. go back to the Web Web Dynpro developm development ent environmen environment; t; create a Web Web Dynpro Dynpro application and activate it 13. Test your applicati application on (display (display of the form, form, action action buttons buttons and context context usage)

2009


73


BC4 BC481

Figure 71: Overview Exercise 3

74


2009

BC481


Exercise 3: Create a Web Dynpro ABAP application with an embedded SAP Interactive Form by Adobe Exercise Objectives After completing this exercise, you will be able to: •

Underst Understand and design design time time of Web Web Dynp Dynpro ro for for ABAP ABAP with Intera Interacti ctive ve Form Form

•

Create Create and run a Web Web Dynp Dynpro ro ABAP ABAP with an embe embedde dded d SAP SAP Inter Interact active ive Form by Adobe

Business Example You have to create an online application with an Interactive Form as input screen.

Task 1: The first task prepares the views which are used for navigation and data transfer. 1.

Create a Web Web Dynpro Dynpro ABAP application application called Z_BC481_W Z_BC481_WDAGROUP DAGROUP##, ##, where ## is your group number.

2.

Create two views in the application: application: WELCOMEVIE WELCOMEVIEW W and and PDFVIEW. PDFVIEW. Embed it in the default window, the WELCOMEVIEW being the default view.

3.

Implement Implement navigat navigation ion between those views with the help help of navigati navigation on plugs. plugs.

Task 2: In this task, you'll prepare the data which will be sent from one view to another another as well as the PDF container node. 1.

In the the COMPON COMPONENTC ENTCONTR ONTROLL OLLER, ER, create create a cont context ext node node call called ed DATASOURCE with two context attributes called FIRSTNAME and LASTNAME both of type STRING

2.

Map all the context context data data to to the the two two views, views, WELCOMEVIEW WELCOMEVIEW and PDFVIEW

3.

In the the view view PDFVIEW PDFVIEW,, create create a context context attribut attributee of type XSTRING XSTRING called called PDFSOURCE


2009


75


BC4 BC481

Task 3: Now the navigation links and data have been built, you'll create an input form for the first view and you'll embed an actual actual PDF element element in the second view, view, and set all the required properties for this particular UI element. 1.

In the the layout layout of the the WELCOMEVI WELCOMEVIEW EW,, add a container container form for the two two elements elements in the context and create a button to navigate navigate to the PDFVIEW

2.

In the the PDFVIEW PDFVIEW,, insert insert an an elemen elementt of type type Inter Interacti activeF veForm orm.. Set the the dataSource property to the context node DATASOURCE, the displayType to native, native, the enabled enabled property to true, the pdfSource pdfSource to the context context attribute attribute PDFSOURCE, PDFSOURCE, the height to 700px and the width to 100%.

Task 4: And XML-based interface needs to be created for a form used by the Web Dynpro application. The layout of the form still needs to be done with the help of the Adobe LiveCycle Designer. 1.

Once Once this this is done, done, the the PDF PDF can be desig designed ned.. In the the templa templateSo teSourc urce, e, enter Z_BC481_WD Z_BC481_WDAPDF_# APDF_## # as value and hit enter. Specify Specify Z_BC481_WDAIF_## name for the interface and create the interface from the context node DATASOURCE. Save the two created objects in your package using the previously created workbench request. This sends s ends you to the actual design of the form: add the two context fields on the form and a submit button. Select the submit button from the Web Dynpro Native library. (IMPORTANT: before to start the design of the form, go to the properties tab and select ZCI Layout in the layout field. Then go back to the Layout tab and go to Utilities > Insert Web Web Dynpro script.)

2.

Create Create an acti action on for for the onSu onSubmi bmitt event event in which which you you call call the the outbou outbound nd plug TOWELCOME

Task 5: In this task, you'll build an actual Web Dynpro application which you'll execute. 1.

76

Create Create a Web Dynpro Dynpro application application called Z_BC481_WD Z_BC481_WDAGROUP# AGROUP## # and and test it.


2009

BC481


Solution 3: Create a Web Dynpro ABAP application with an embedded SAP Interactive Form by Adobe Task 1: The first task prepares the views which are used for navigation and data transfer. 1.

2.

Create a Web Web Dynpro Dynpro ABAP application application called Z_BC481_W Z_BC481_WDAGROUP DAGROUP##, ##, where ## is your group number. a)

Go to transaction transaction SE80, select Web Dynpro Dynpro Comp. / Intf. Intf. from the the drop drop down box. Enter the name of the application application and hit enter. enter.

b)

Create the application mentioning the name, description (such as BC481 WDA and PDF Group ##), type (Web Dynpro Component).

c)

Correc Correctt the value valuess for the the automati automatical cally ly create created d View View Name Name by changing the default name MAIN to WELCOMEVIEW. The Window name can stay the same, e.g. Z_BC481_WDAGROUP##.

d)

Save your application application in your your package package using the workbench workbench request request you've created previously.

Create two views in the application: application: WELCOMEVIE WELCOMEVIEW W and and PDFVIEW. PDFVIEW. Embed it in the default window, the WELCOMEVIEW being the default view. a)

The WELCOMEVIEW WELCOMEVIEW has been automatically automatically created created o on n the the previous previous step. You should see it in the views of your Web Dynpro component (bottom left side of the screen).

b)

On the left-hand navigation, right click on the application name and select Create > View. View. Another Another option is to go to the application structures, right click on Views and select Create

c)

Save Save your your work work when when you'r you'ree promp prompted ted to. Enter Enter view view name name (PDFVIEW) and description.

d)

Open the Window Window (left hand navigation navigation > Z_BC48 Z_BC481_WDAG 1_WDAGROUP## ROUP## > Windows Windows > Z_BC481_W Z_BC481_WDAGROUP# DAGROUP## # and double click on it). Right click on the Window, select Embed View then choose PDFVIEW from the drop down menu.

e)

Right Right click click on on the view view WELCOM WELCOMEVI EVIEW EW and and select select set set as defa default ult.. Normally WELCOMEVIEW is already the default view.


2009


77


3.

BC4 BC481

Implement Implement navigat navigation ion between between those views with the the help help of of navigati navigation on plugs. plugs. a)

Open the WELCOMEVIEW WELCOMEVIEW.. In the appropriate appropriate tabs (Outbound (Outbound plugs and Inbound plugs), plugs), create an outbound plug called TOPDF and an inbound plug called FROMPDF

b)

Open the PDFView. PDFView. In the appropriate tabs (Outbound plugs and Inbound plugs), create an outbound plug called TOWELCOME and an inbound plug called FROMWELCOME.

c)

Open the window window (Z_BC4 (Z_BC481_WD 81_WDAGROUP# AGROUP##) #) and link the outbound outbound plugs to the inboung plugs accordingly by drag and drop. Leave the default inbound plug as it is.

Task 2: In this task, you'll prepare the data which will be sent from one view to another as well as the PDF container node. 1.

2.

3.

In the the COMPONE COMPONENTC NTCONT ONTROL ROLLER LER,, create create a contex contextt node node called called DATASOURCE with two context attributes called FIRSTNAME and LASTNAME both of type STRING a)

Open the COMPONENTCONT COMPONENTCONTROLLER ROLLER by double-click double-clicking ing on it

b)

In the Context tab, t ab, right click on the context node and select Create > Node. Name the node DATASOURCE. Leave other values to the proposed ones.

c)

Under the newly created context context node, node, create create the two two context context attributes attributes called FIRSTNAME FIRSTNAME and LASTNAME, both of type STRING. Leave other values to the proposed ones.

Map all the context context data data to the two views, WELCOMEVIEW WELCOMEVIEW and PDFVIEW a)

Open Open the the Conte Context xt tab tab of of the the view view WELC WELCOME OMEVIE VIEW W.

b)

Drag and drop the DAT DATASOURCE context node to the context c ontext of the view WELCOMEVIEW

c)

Do the same same oper operati ation on for the view view PDFVI PDFVIEW EW

In the the view view PDFVIEW PDFVIEW,, create create a context context attribute attribute of type type XSTRING XSTRING called PDFSOURCE a)

Right Right click click on on the root root cont context ext node node and and add add the PDFSO PDFSOURC URCE E attribute. attribute. Specify Specify XSTRING as type.


78


2009

BC481


Task 3: Now the t he navigation links and data have been built, you'll create an input form for the first view and you'll embed an actual PDF element in the second view, and set all the required properties for this particular UI element. 1.

2.

In the the layout layout of the the WELCOMEV WELCOMEVIEW IEW,, add a container container form for the two two elements elements in the context and create a button to navigate navigate to the PDFVIEW a)

In the the Layout Layout tab of of the WELCOMEVIEW WELCOMEVIEW,, on the right right hand, right click on ROOTUIELEMENTCONTAINER and select Create container form.

b)

Adjust the labelds for the input fields and set s et them to Firstname and Lastname accordingly.

c)

Click on the the Contex Contextt button button and select the DAT DATASOURCE ASOURCE node node

d)

Right click in the ROOTUIELEMEN ROOTUIELEMENTCONT TCONTAINER AINER and select Insert Element. Element. Name the element element TOPDFBUTTON TOPDFBUTTON and choose Button Button as a type

e)

In the the propert properties ies of this button, button, set the the text text property property to To To PDF >>

f)

On the the onActi onAction on event event,, click click on on the white white sheet sheet to to create create a new new actio action. n. Name it TOPDF and select s elect the outbound plug TOPDF. TOPDF. After this, the WELCOMEVIEW is completed.

In the the PDFVIE PDFVIEW W, insert insert an an elemen elementt of type type Inter Interact active iveFor Form. m. Set the the dataSource property to the context node DATASOURCE, the displayType to native, the enabled property to true, the pdfSource to the context attribute PDFSOURCE, PDFSOURCE, the height to 700px 700px and the width to 100%. 100%. a)

In the the layou layoutt tab of the the PDFVIE PDFVIEW W, right right clic click k on the ROOTUIELEMENTCONTAINER and select Insert element. Name your element INTERACTIVEFORM and select InteractiveForm as a type.

b)

Set the dataSource property to the DAT DATASOURCE context node by clicking on the button next to the dataSource property. A popup appears in which you can select your DATASOURCE node.

c)

Set the display displayT Type proper property ty to native native

d)

Set the enabled enabled p proper roperty ty to to true true by by selecting selecting the checkbox checkbox

e)

Set the context context attribut attributee PDFSOURC PDFSOURCE E for for the the pdfSour pdfSource ce proper property ty by by clicking on the button next to the pdfSource property. A popup appears in which you can select your PDFSOURCE attribute.

f)

Set the the heig height ht prop proper erty ty to 700p 700px x

g)

Set the width width proper property ty to 100 100% % Continued on next page

2009


79


BC4 BC481

Task 4: And XML-based interface needs to be created for a form used by the Web Dynpro application. The layout of the form still needs to be done with the help of the Adobe LiveCycle Designer. 1.

Once Once this this is done, done, the the PDF PDF can be desig designed ned.. In the the templa templateSo teSourc urce, e, enter Z_BC481_WD Z_BC481_WDAPDF_# APDF_## # as value and hit enter. Specify Specify Z_BC481_WDAIF_## name for the interface and create the interface from the context node DATASOURCE. Save the two created objects in your package using the previously created workbench request. This sends s ends you to the actual design of the form: add the two context fields on the form and a submit button. Select the submit button from the Web Dynpro Native library. (IMPORTANT: before to start the design of the form, go to the properties tab and select ZCI Layout in the layout field. Then go back to the Layout tab and go to Utilities > Insert Web Web Dynpro script.) a)

Execut Executee the above above mentio mentioned ned steps. steps.

b)

You're automatically sent to the form design tool (the Adobe LiveCycle Designer), where you can insert by drag and drop the two context fields on the form. Use layout data from previous exercise. exercise.

c)

Add a submit submit button button on the the form. form. IMPORT IMPORTANT: ANT: use the Submit button button in the WebDynpro Native library. Use following layout properties: X: 4.75in; 4.75in; Y: Y: 1.125in; width: width: 1.25; 1.25; height: 0.5in. Change Change the label of the Submit button from Submit to << To Welcome.

d)

When this is is done, done, activate activate the form. form. (You (You can can aslo aslo activate activate all your your other objects).


80


2009

BC481


2.

Create Create an an action action for for the the onSubm onSubmit it event event in in which which you you call call the outb outboun ound d plug TOWELCOME a)

Go back back to the the layou layoutt tab of the the PDFVIEW PDFVIEW and select select your your InteractiveForm UI element to display its properties.

b)

Click on the white sheet next to the onSubmit event (in the form properties) to create an action. Call your action TOWELCOME. Then don't click on continue continue but click on the Implementat Implementation ion button (or press F5). You're then sent to the implementation code of the TOWELCOMEACTION.

c)

Add Add the the follo followin wing g code code to to the the meth method od:: wd_this->fire_towelcome_plg( ). This will trigger the outbound plug to the WELCOMEVIEW.

d)

Another Another possibilit possibility y is to to generate generate this code code with with the the Web Web Dynpro Dynpro Code Wizard. When you're in the code, hit CTRL + F7. The wizard window window appears. appears. Check the Start Navigation radio button and select the TOWELCOME outbound plug with the help of the F4 key.

e)

The implem implement entati ation on o off the the PDFVIE PDFVIEW W is now finish finished. ed.

Task 5: In this task, you'll build an actual Web Dynpro application which you'll execute. 1.

2009

Create a Web Web Dynpro Dynpro applicat application ion called Z_BC481_WD Z_BC481_WDAGROUP# AGROUP## # and and test it. a)

Right Right click click on on your your Web Web Dynpr Dynpro o Compo Componen nentt (calle (called d Z_BC481_WDAGROUP##) and select Create > Web Dynpro Application. Application. Save the created object object in your package package using the previously created c reated workbench request.

b)

Save the created application. applicati on. Right click on the generated application and select Test. Your application appears in a new browser window.

c)

Fillup Fillup the the fields fields in the the first first screen screen,, then then go to the the PDF PDF View View.. Your data are sent from one view to another. Modify the data and test the Submit button available on the form. You're sent back to the first view. Data have been sent from the PDF View to the Welcome View via the Web Dynpro context.


81


BC4 BC481


82

•

Underst Understand and the step stepss requi required red to integ integrat ratee an Intera Interactiv ctivee Form Form in in a Web Web Dynpro ABAP application

•

Develo Develop py your our own Web Dynp Dynpro ro for for ABAP ABAP applic applicati ation on with with an embe embedde dded d Interactive Form

•

Undersa Undersand nd the differ differenc ences es between between ZCI and ACF develo developed ped forms forms


2009

BC481

Unit Summary


2009

•


•


•

Underst Understand and the steps steps requi required red to inte integra grate te an Intera Interactiv ctivee Form Form in a Web Web Dynpro ABAP application

•

Develo Develop p yo your ur own own Web Web Dynp Dynpro ro for for ABAP ABAP applica applicatio tion n with with an an embe embedde dded d Interactive Form

•

Undersa Undersand nd the differ differenc ences es betw between een ZCI and ACF develo developed ped forms forms


83

Unit Summary

84

BC481


2009

BC481

Test Your Knowledge

Test Your Knowledge 1.

2009

What What are the the two typic typical al Intera Interacti ctive ve Form Form UI elem element ent to be be linked linked with with the context ?


85

Test Your Knowledge

BC481

Answers 1.

What What are the the two typi typical cal Inte Interac ractiv tivee Form UI elemen elementt to be linke linked d with with the context ? Answer: The DataSource and pdfSource properties.

86


2009

Unit 4 Advanced Features Unit Overview This unit focuses on various various commonly commonly used SAP Interactive Interactive Forms by Adobe capabilities. It goes beyond SAP only for some parts: email, offline scenarios, complex layouts, performance aspects and PDFOBJECT ABAP API. This unit can be seen as a toolset which can be used when asserting a new scenario, to deal with performance issues of existing forms or to explore new ways of developing forms.


Understand Understand concepts concepts and possibilities possibilities in offline offline scenarios scenarios which can be used with SAP Interactive Forms by Adobe

•

Understand Understand consideratio considerations ns to have in mind when assessing assessing an offline offline scenario scenario

•

Underst Understand and and make make use of Intera Interacti ctive ve Form Form with with email email

•

Develo Develop p this this func functio tional nality ity on an existi existing ng Intera Interactiv ctivee Form Form

•

Understand Understand and handle handle complex complex layouts layouts and frequently frequently met form elements elements

•

Estima Estimate te the comple complexit xity y of an Intera Interactiv ctivee form form

•

Unders Understan tand d the the main main facto factors rs influ influenc encing ing the perfor performan mance ce of of a PDF PDF form form

•

Underst Understand and and make make use use of of the the best best prac practice ticess for for PDF forms forms design design

•

Know Know wher wheree to to loca locate te and how to use the PDFOBJE PDFOBJECT CT API

•

Show Show exam exampl ples es usin using g the the API API in in the the SAP syst system em

•

Show Show how how to use the API with with commen comments, ts, attachm attachment entss and and digit digital al sign signatu atures res

•

Understand Understand the possibilities possibilities offered offered by digital digital signatures signatures within SIFbA

•

Unders Understan tand d and and expla explain in what what can be done done with with SIFbA SIFbA digital digital signat signature uress

•

Identi Identify fy conf configu igurat ration ion requir required ed to to use use digit digital al sign signatu atures res in an an SAP SAP environment

Unit Contents Lesson: Offline Scenarios ... .... ... .... ... .... ... .... ... .... ... .... .... .... .... 89 .... 89 Lesson: Email Sen Sending.... ... .... ... .... .... .... .... .... .... .... .... .... ... .... . 95

2009


87

Unit 4: Advanced Features

BC481

Lesson: Complex Lay Layouts .... .... .... .... .... .... .... .... .... .... .... ... .... ... 98 ... 98 Exercise 4: Adobe LiveCycle Designer Advanced Features ......... 101 Lesso sson: Per Perform forma ance Aspe spects .. ... .. ... .. ... ... .. ... .. ... ... .. ... ... .. ... ... .109 Lesson: The PDFOBJECT API ...............................................1 ...............................................114 Lesson: Digital Signatures.....................................................1 Signatures..................................................... 117

88


2009

BC481

Lesson: Offline Scenarios

Lesson: Lesson: Offline Offline Scenari Scenarios os Lesson Overview This lesson shows the main offline scenarios which can be used with SAP Interactive Forms by Adobe.



•


Business Example Your company needs to make use of offline scenarios. scenarios. As you know that SIFbA can be used for this purpose, you're studying the feasability of some specific scenarios.

Online and Offline Scenarios

Figure 72: General scenarios featuring Interactive Forms

2009


89


BC481

Figure 73: Online mode

As discussed earlier in the course, the online usage of interactive forms allows you to use all the functionalities of the online applications themselves. •

Web Dynp Dynpro ro ABAP ABAP and Java Java provi provides des the develo developme pment nt and and runt runtime ime environment for online applications. The Web Dynpro framework handles connection connection between the online application and the backend backend system, SAP or non-SAP.

Figure 74: Offline mode

90


2009

BC481


Figure 75: Offline Standalone Usage: simple workflows

Figure 76: Offline scenario with backend intervention (1)

2009


91


BC481

Figure 77: Offline scenario with backend intervention (2)

Figure 78: Offline mode with backend intervention (3)

92


2009

BC481


Figure 79: Scenarios: important considerations

2009


93


BC481



•


Related Information

94

•


•

Adobe LiveCycle LiveCycle Devnet: Devnet: http://www http://www.adob .adobe.com e.com/devne /devnet/live t/livecycle/ cycle/


2009

BC481

Lesson: Email Sending

Lesson: Lesson: Email Email Sendin Sending g Lesson Overview This lesson focuses on one of the most commonly used scenarios for offline usage: the standalone email sending, where the PDF itself acts as a data container and is exchanged by email.


Underst Understand and and make make use of Intera Interactiv ctivee Form Form with email email

•


Business Example Your company wants to make use of Interactive Forms to replace existing Word documents documents or Excel sheets to ensure ensure validity validity of data. You're responsible responsible of this new practice.

Send an Interactive Form by email

Figure 80: Edit the existing form

2009


95


BC481

Figure 81: Submit by email (1)

Figure 82: Submit by email (2)

96


2009

BC481

Lesson: Email Sending


Underst Understand and and make make use use of Intera Interacti ctive ve Form Form with with email email

•


Related Information

2009

•

SDN Adobe homp hompage: age: https://www https://www.sdn. .sdn.sap.co sap.com/irj/ m/irj/sdn/ad sdn/adobe obe

•

Adobe LiveCycle LiveCycle Devnet: http://www http://www.adob .adobe.com e.com/devne /devnet/live t/livecycle/ cycle/

•

Adobe LiveCycle LiveCycle Devnet Devnet scripting scripting examples: examples: http://www http://www.adob .adobe.com e.com/de/devnet/livecycle/designer_scripting_samples.html


97


BC481

Lesson: Lesson: Comple Complex x Layou Layouts ts Lesson Overview This short lesson show classic complex layouts: the dynamic tables and the general UI elements which should be used for the vast majority of the forms.



•

Estimat Estimatee the comple complexit xity y of an Intera Interacti ctive ve form form

Business Example Your team faces some issues with development of complex forms. You're asked to support support them in their tasks and to provide provide valuable input.

Dynamic Tables

Figure 83: Tables Or Subforms

98


2009

BC481

Lesson: Complex Layouts

Figure 84: Dynamic Tables Properties

Figure 85: Dynamic Dynamic Tables Tables

2009


99


BC481

Miscellaneous features

Figure 86: Miscellaneous Miscellaneous features features

100


2009

BC481


Exerci Exercise se 4: Adobe Adobe LiveCy LiveCycle cle Designer Designer Advanced Features Exercise Objectives After completing this exercise, you will be able to: •

Use typica typicall and and most common commonly ly used used UI UI elem element entss on on a PDF form form

•

Design Design Comple Complex x layout layoutss with with the Adobe Adobe LiveCy LiveCycle cle Designe Designer r

Business Example You're a part of the project team and you're asked to write a detailed specification for a PDF form (print or interactive) interactive),, or to develop the form itself.

Task 1: The form you're developing is quite complex and features various display elements. In this first task, focus is on usage of buttons on a form. 1.

Open the form form you've you've created on the the first first exercise exercise and add add a Send by Email Email button to t o send the PDF to your email address.

2.

Add a button button called Button1. Button1. Add a button button to make it invisible invisible and another another one to make it visible, visible, using FormCalc FormCalc and the appropriate appropriate event. Test the functionality functionality with the PDF Preview tab.

Task 2: Data from your backend has to be displayed displayed in various formats. formats. In this task, focus is on displaying the data. 1.

Create Create a stati staticc text text with two two float floating ing fiel fields ds for for FIRSTN FIRSTNAME AME and and LASTNAME. Text is the follwing: Dear M. {FIRSTNAME} {LASTNAME}, this is an example of floating fields. Test your form from transaction transaction SFP and see the result.

2.

Create a dynamic dynamic table with columns columns FIRSTNAM FIRSTNAME E and and LASTNAME. LASTNAME. Test the form by entering two lines in the Test Function Module Screen.


2009


101


BC481

Task 3: In this task, the focus is on various various LiveCycle LiveCycle Designer standard standard features.

102

1.

Add a page page numb numberi ering ng of type type Page Page # / ## ## (page (page numbe numberr / total total number number of pages) on the master page. (For the text element, X position is 4in, Y position is i s 0.5in, width is 1.5in and height is 0.25in)

2.

Add a Date Date field. field. Test Test it with PDF Preview Preview tab, then set the the locale locale to to English English (Belgium) (Belgium) and set the display pattern pattern so the month is written in full text.


2009

BC481


Solutio Solution n 4: Adobe Adobe LiveCy LiveCycle cle Designer Designer Advanced Features Task 1: The form you're developing is quite complex and features various display elements. In this first task, focus is on usage of buttons on a form. 1.

2.

Open the form form you've you've created on the the first first exercise exercise and add add a Send by Email Email button to t o send the PDF to your email address. a)

Go to tran transa sacti ction on SFP SFP, ente enterr your your form form name name,, ZBC4 ZBC481 81_E _EX0 X01_ 1_FO FORM RM## ##,, where ## is your group number number and hit the Change button.

b)

Delete the two existing fields Firstname and Lastname from the existing layout.

c)

In the the layout layout tab, tab, drag drag and and drop drop an an elemen elementt of type type Butto Button n from from the Standard Standard library. library. Change Change it label to Send by email. Change Change its name in the Hierarchy palette to SendByEmail.

d)

Use following following layout layout properti properties es for the button: button: X: 0.5in; 0.5in; Y: 1in; 1in; width: width: 1.125in; 1.125in; height: 0.25in 0.25in

e)

In the the Object Object palette palette for for this this element, element, set set the the Control Control Type proper property ty to Subm Submit it.. In the the Subm Submit it tab, tab, fill fill in the the Subm Submit it To URL URL fiel field d with with the the valu value: e: mailto:[email protected]?Subject=BC481%20PDF. Set also the Submit As field to PDF.

Add a button button called Button1. Button1. Add a button button to make it invisible invisible and another another one to make it visible, visible, using FormCalc FormCalc and the appropriate appropriate event.


2009


103


BC481

Test the functionalit functionality y with the PDF Preview Preview tab. a)

Drag and and drop drop an element element of type type Button Button from the Standar Standard d library library.. In the hierarchy palette, name it Button1. Change its label to Button1.

b)

Use following layout properties for the button: X: 0.5in; Y: 1.5in; width: 1.125in; height: 0.25in.

c)

Drag and and drop drop an element element of type type Button Button from the Standar Standard d library library.. In the hierarchy palette, name it Hide. Change its label to Hide. In the scripting editor, add the following FormCalc code to the click event: Button1.pres Button1.presence ence = "invisible" "invisible"(no dot is inserted at the end of this instruction). instruction). Be sure that the language selected is FormCalc and that the Run At field is set to Client.

d)

Use followin following g layout layout properties properties for the hide hide button button:: X: 2in; 2in; Y: Y: 1.5in; 1.5in; width: 1.125in; height: 0.25in.

e)

Drag and and drop drop an element element of type Button Button from from the Standard Standard library library.. In the hierarchy palette, name it Show. Change its label to Show. In the scripting editor, add the following FormCalc code to the click event: $.parent.Butt $.parent.Button1.pr on1.presence esence = "visible" "visible"(no dot is inserted at the end of this instruction). Be sure that the language selected is FormCalc and that the Run At field is set to Client.

f)

Use followin following g layout layout properties properties for the show button: button: X: 3.5in; 3.5in; Y: 1.5in; 1.5in; width: 1.125in; height: 0.25in.

g)

Go to the the PDF PDF Previe Preview w tab in in the Designe Designerr and test test the the chang changee of presence of the button Button1.

Task 2: Data from your backend backend has to be displayed displayed in various formats. In this task, focus is on displaying the data. 1.

Create Create a stati staticc text text with two two float floating ing fiel fields ds for for FIRSTNA FIRSTNAME ME and and LASTNAME. Text is the follwing: Dear M. {FIRSTNAME} {LASTNAME}, this is an example of floating fields.


104


2009

BC481


Test your form from transaction transaction SFP and see the result. a)

Go to the the libra library ry palet palette, te, drag drag and and drop drop an elem element ent text text from from the the Standard library.

b)

Within the layout palette, palette , set s et its it s X position positi on to 0.5in, Y position to 2in, Width to 4in and Height to 2in.

c)

Add Add the the text text abov above. e.

d)

To add add the floating floating fields, fields, go to to the Designer Designer menu: menu: Insert > Floating Floating field.

e)

Double Double click click on the the newly newly creat created ed field field and and go go to the the Object Object palette, in the tab Binding. In the Default binding field, using the appropriate icon, select the FIRSTNAME field from the context: Z_BC481_EX01_PDF_## > PDFDATA > FIRSTNAME. Select update all related properties when you're prompted to (after you've bound the element).

f)

Create an additional additional floating floating field for the LASTNAME LASTNAME data data element, element, using the same technique.

g)

Test the the form form with the appropr appropriate iate icon, icon, or press press F8. In the the text function function module screen, click on the table PDFDATA. Enter your Firstname and Lastname Lastname in the appropriate appropriate fields, then go gack using the green back arrow or the F3 button. button. Select LP01 as the output device when you're prompted to and hit the Print Preview button.

h)

Check the differ difference ence in the the display display of of the normal normal input input fields fields (which (which are read only) and the floating fields.


2009


105


2.

BC481

Create Create a dynamic dynamic table table with columns columns FIRSTNAM FIRSTNAME E and and LASTNAME. LASTNAME. Test the form by entering two lines in the Test Function Module Screen. a)

Go to the the library library palet palette, te, drag drag and and drop drop an elemen elementt Tabl Tablee from from the Standard library in the Design view of the form.

b)

This opens up the table wizard. Select Create simple table, with 2 columns, 1 body row and check Include header row in Table.

c)

Use foll followi owing ng layo layout ut prop properti erties es : X: 0.5in; 0.5in; Y: 4.25i 4.25in n

d)

Change Change the the label label of the head header er row row to respec respectiv tively ely First Firstnam namee and Lastname.

e)

In the the row itsel itself, f, in each each cell cell add add a floatin floating g field: field: double double click click in a cell cell and go to the Designer menu Insert > Floating Field. Then bind the fields respectively to FIRSTNAME and LASTNAME.

f)

In the hierarchy hierarchy palette, palette, select select the table row: in your your table (Table1 (Table1 by default), Row1 by default. Go to the Object palette and check the following following properties properties under the binding binding tab. Default Default binding must be set to $record.PDFDATA.DATA[*], and the checkbox Repeat Row for Each Data Item must be checked. Leave other properties properties to their defaults.

g)

Activate Activate you you form form and test it using the Test Test or or F8 button. button. In the the Test Test function module initial screen, click on the PDFDATA table and create two rows (use the New Line button) which you can fill with some data. Go back using the back arrow or F3 button, run the function module using F8. Select LP01 as the output device and hit Print Preview. Check the result result of your dynamic table. (Hint: you can also check how your previous fields behave when you add several additional lines).


106


2009

BC481


Task 3: In this task, the focus is on various LiveCycle Designer standard features. 1.

2.

2009

Add a page page numb numberi ering ng of type type Page Page # / ## ## (page (page numbe numberr / total total numbe number r of pages) on the master page. (For the text element, X position is 4in, Y position is 0.5in, width w idth is 1.5in and height is 0.25in) a)

Go to the the libra library ry palet palette, te, drag drag and and drop drop an elem element ent text text from from the the Standard library.

b)

With the layout palette, set the t he positioning and layout as stated above.

c)

Delete Delete the the texts texts in the the text text elemen elementt and go go to the the Designe Designerr menu: menu: Insert > Current Current Page Number. Number. Add a space and a / character after after this element. element. Then go to the same menu and select Number of Pages.

d)

Test the the form form using using the PDF preview preview tab, tab, the the appropria appropriate te Test Test icon icon or via the F8 button.

Add a Date field. Test Test it it with PDF Preview Preview tab, then set the the locale locale to to English English (Belgium) (Belgium) and set the display pattern pattern so the month is written in full text. a)

Drag and drop an element element of type type Date/T Date/Time ime Field Field from from the the Standar Standard d library.

b)

Use following layout properties for the show button: X: 0.5in; Y: 2.25in; width: 4in; height: 0.25in

c)

Test the defaul defaultt resul resultt with with the the PDF PDF Prev Preview iew tab. tab.

d)

In the the Object Object palette, palette, set set the following following value to the the Display Display Pattern: Pattern: DD MMMM YYYY

e)

In the the Object Object palette, palette, set set the the Locale Locale property property to English English (Belgium). (Belgium).

f)

Test the result result with the PDF Preview Preview tab. tab.


107


BC481



•



108



2009

BC481

Lesson: Performance Aspects

Lesson: Lesson: Perform Performance ance Aspects Aspects Lesson Overview As forms are becoming more and more complex, complex, users often face performance performance issues. So it's important to have in mind the main performance performance guidelines guidelines at the beginning of the development.


Underst Understand and the main main facto factors rs infl influen uencin cing g the the perfo performa rmance nce of a PDF PDF form form

•

Underst Understand and and make make use use of of the the best best prac practic tices es for for PDF forms forms desig design n

Business Example Your team is facing performance issues with its Interactive Forms and you need to provide support to improve i mprove rendering times and usability usabili ty of the forms.

General Design Considerations [Enter a title and the conceptual information about this lesson in this section. You can also include additional sections, graphics, demonstrations, procedures, and/or simulations.

Figure 87: General Design Considerations (1)

2009


109


BC481

Figure 88: General Design Considerations (2)

Figure 89: Tips for reducing the number of objects

Figure 90: Tips for reducing the complexity of objects

110 110


2009

BC481


Figure 91: Data binding binding

Figure 92: 92: Subforms

2009


111


BC481

Figure 93: Scripting

112 112


2009

BC481



2009

•

Underst Understand and the main main facto factors rs infl influen uencin cing g the the perfo performa rmance nce of a PDF PDF form form

•

Underst Understand and and make make use use of of the the best best prac practic tices es for for PDF forms forms desig design n


113


BC481

Lesson: Lesson: The PDFOBJ PDFOBJECT ECT API Lesson Overview This lesson explores the capabilities capabilities of the PDFOBJECT API and show examples on how to use it.



•

Show Show exam exampl ples es usin using g the the API in the the SAP SAP syste system m

•

Show Show how how to use the API with commen comments, ts, attac attachme hments nts and digital digital signat signature uress

Business Example Your application requires a fully custom application with an Interactive Form with attachments, attachments, comments comments and digital digital signatures. signatures. This can be achieved by using the PDFOBJECT API.

PDFOBJECT ABAP Class

Figure 94: The PDJOBJECT ABAP class

114 114


2009

BC481

Lesson: The PDFOBJECT API

Sample standard programs using the API

Figure 95: Program FP_PDF_TEST_03

Figure 96: Programs FP_PDF_TEST_*

Figure 97: Example: generate an Interactive Form

2009


115


BC481



•


•


Related Information

116 116

•

Help.s Help.sap. ap.com com > Search Search on CL_FP_ CL_FP_PDF_ PDF_OBJE OBJECT CT

•


•

SDN ABAP OO homepage: homepage: https://www https://www.sdn. .sdn.sap.co sap.com/irj/ m/irj/sdn/ab sdn/abap ap > ABAP OO


2009

BC481

Lesson: Digital Signatures

Lesson: Lesson: Digital Digital Signatu Signatures res Lesson Overview This lesson covers aspects aspects related to digital signatures signatures embedded within SAP Interactive Interactive Forms by Adobe: what are they, they, what are the differences differences and possibilities, how can they be implemented in the PDF and how can the link with the SAP system be achieved.



•


•


Business Example You're responsible for the setup of an application which needs to meet high security standards. standards. The PDF technology technology has been chosen and you're you're asked to investigate investigate the possibilities of integration of digital signatures for internal and external usage.

Digital Certifications and Signatures You've received received or downloaded downloaded a PDF form via email, which is supposed supposed to be from one of your customers or suppliers. How can you be sure it's really from a trusted party party ? The best way is to check whether the digital signatures signatures present present on the document are authentic. A PDF document can have two type of digital signatures: •

A certifi certification cation signature, signature, which can be applied applied by by the document’ document’ss author author.. Adobe Reader or Acrobat Acrobat automatical automatically ly checks the authenticity authenticity of this signature when you open the document, and then displays a window that indicates whether the signature is valid (that is, authentic and current). This guide also refers to the certificatio certification n signature as the “author’s “author’s digital digital signature.”

•

A standa standard rd sign signatu ature, re, which which can can be be appli applied ed by by anyon anyonee who who has has permi permissio ssion n to digitally sign the document. Adobe Reader or Acrobat can automatically check the authenticity of standard signatures when you open the document, or you can check them manually from within the application.

After opening the PDF document, the Reader automatically checks for unauthorized modifications to the document and checks the authenticity of the certification and signature.

2009


117


BC481

There are three types of statuses for verification of certification signatures: •

Certifi Certificat cation ion Valid, alid, with a blue blue ribbon ribbon

•

Validat alidation ion Of Auth Author or Not Not Conf Confirm irmed, ed, with with a blue blue questi question on m mark ark next next to a person

•

Cert Certif ifica icati tion on Inva Invali lid, d, with with a red red X

On top of that, a PDF document can contain one or more standard digital signature. For each signature, the Adobe Reader also displays when the document was signed and whether it was modified modified after any of the signers signers had last signed the document. The time and date of a digital signature, called a time stamp, can be important when you are working with time-sensitiv time-sensitivee documents documents (such as contracts, contracts, real estate offers, offers, loan applications, applications, and payments). payments). For example, the time stamp can indicate indicate when offers offers or counteroff counteroffers ers were made, or whether whether a document document was signed before a deadline. In Adobe Reader or Acrobat, you can view the time stamps of signatures by opening the Signatures Signatures tab of the navigation navigation pane, and then clicking the plus signs to expand the information for a particular signature.

Figure 98: Certifications and Signatures Statuses

118 118


2009

BC481


Any time that Adobe Reader or Acrobat reports that a digital signature has a status of Validity Of Author Not Confirmed or Signature Validity Is Unknown, you must decide whether to establish trust for that signature. signature. This task involves three basic steps: 1.

Obtain a certifica certificate te for for the the digital digital signature signature from from a known, known, trusted trusted individual individual or website. If you are at work, request this certificate from your company’s IT department. department. A certificate certificate is an electronic counterpart counterpart to driver licenses, passports, membership cards, etc. Certificates are electronic files containing information information about an individual individual or organizat organization ion that is used to establish establish their digital identity.

2.

Add the the certifica certificate te in Adobe Reader Reader or Acrobat, Acrobat, and and then then set the trust trust level level for the certificate certificate in the application. application.

3.

Revalid Revalidate ate the signatu signature. re.

Signing PDF documents client side

Figure 99: Client Side Signature

2009


119


BC481

Server Side: Configuration in SAP systems

Figure 100: Digital Signatures in SAP systems

Figure 101: Example: extract document data with PDFObject API

120


2009

BC481



2009

•


•


•



121

Unit Summary

BC481


122

•


•


•

Underst Understand and and make make use of Intera Interacti ctive ve Form Form with with email email

•

Develo Develop p this functi functiona onalit lity yo on n an existin existing g Intera Interacti ctive ve Form Form

•


•


•

Underst Understand and the main main fact factors ors influe influenci ncing ng the perfor performan mance ce of of a PDF PDF form form

•

Underst Understand and and make make use use of of the the best best practic practices es for for PDF forms forms design design

•


•


•


•


•

Underst Understand and and explain explain what what can can be don donee with with SIFb SIFbA A digit digital al sign signatu atures res

•

Identi Identify fy conf configu igurat ration ion requir required ed to to use use digita digitall signa signatur tures es in in an SAP environment


2009

BC481

Test Your Knowledge

Test Your Knowledge 1.

2009

What are the the four four statuses statuses of digital digital signature signature validation validation in the the Adobe Adobe Reader Reader ?


123

Test Your Knowledge

BC481

Answers 1.

What are the the four four statuses of digital digital signature signature validation validation in the the Adobe Adobe Reader Reader ? Answer: Valid Signature, Unknown Signature, Invalid Signature and Valid signature, modified documents.

124


2009

BC481

Course Summary

Course Summary You should now be able to:

2009

•

Unders Understan tand d the the SAP SAP Inter Interact active ive Forms Forms by by Adobe Adobe capabi capabiliti lities es and and u use se cases cases in SAP environments.

•

Underst Understand and and develo develop p SAP SAP Inter Interacti active ve Form Formss by Adobe Adobe with within in an an ABAP ABAP report

•

Understand Understand and develop develop SAP Interactive Interactive Forms by Adobe with Web Dynpro ABAP

•



125

Course Summary

126

BC481


2009

Feedback SAP AG has made every effort in the preparation of this course to ensure the accuracy accuracy and completeness completeness of the materials. materials. If you have any corrections corrections or suggestions for improvement, please record them in the appropriate place in the course evaluation.

2009


127

BC481_EN_Col73

Recommend Documents