how to use webdynpro

8/1/2019 How to Use Webdynpro

1/16

How To Integrate ADOBE form on WebdynPro for ABAP

and Deploy it on portal.

Bhawanidutt Dabral

Business Card

Company: Accenture Services Pvt. Ltd.Posted on Nov. 15, 2007 06:31 AM in ABAP, Web

Dynpro, Enterprise Portal (EP)

How To Integrate ADOBE form on WebdynPro for ABAP and Deploy it on portal.

1. Scenario

You want to show Employee CV on the Portal. The output format in which you want to

display his / her CV should be PDF file (ADOBE Print forms) and you wanted it to displayunder ESS on the Portal.

2. Perquisites for Employee

a. HR Master data is maintained for the employee

b. ESS User ID is maintained in Infotype 0105 Subtype 0001.

c. Employee has the specific role attached where he has the authorization to

view the custom development on the Portal.d. Has ADOBE reader installed on the system.

3. Perquisites for Developer

a. Knowledge of OOPS

b. Familiar with WEBDynPro for ABAP Concepts (MVC Model, View and

Controller)c. SAP NetWeaver AS System with Adobe Document Services (ADS)

d. Has ADLC installed.

e. Adobe Reader (>= 7.0) installed on your local computer See also note834573.

f. Have rights as content administrator for creating custom I-view.

4. Connection Test

Execute program FP_PDF_TEST_00 to ensure that the ADS was configured correctly. If

the configuration is correct, the out put of the test program will be the version number of

the installed ADS.

This document will provide step-by step guide how to create ADOBE Print forms and

integrate it with WebDynPro for ABAP and later attach it to custom WebdynPro I-View so

that it appears on the portal.

Subscribe

Print

Permalink
https://weblogs.sdn.sap.com/pub/u/251782462https://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.sdn.businesscard.SDNBusinessCard?u=4rS5hx65ht0%3Dhttps://weblogs.sdn.sap.com/weblogs/topic/29https://weblogs.sdn.sap.com/weblogs/topic/43https://weblogs.sdn.sap.com/weblogs/topic/43https://weblogs.sdn.sap.com/weblogs/topic/22http://weblogs.sdn.sap.com/pub/q/weblogs_rss?x-ver=1.0&x-mimetype=application%2Frdf%2Bxmlhttps://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/7783https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/7783http://weblogs.sdn.sap.com/pub/q/weblogs_rss?x-ver=1.0&x-mimetype=application%2Frdf%2Bxmlhttps://weblogs.sdn.sap.com/pub/u/251782462https://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.sdn.businesscard.SDNBusinessCard?u=4rS5hx65ht0%3Dhttps://weblogs.sdn.sap.com/weblogs/topic/29https://weblogs.sdn.sap.com/weblogs/topic/43https://weblogs.sdn.sap.com/weblogs/topic/43https://weblogs.sdn.sap.com/weblogs/topic/22http://weblogs.sdn.sap.com/pub/q/weblogs_rss?x-ver=1.0&x-mimetype=application%2Frdf%2Bxmlhttps://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/7783


2/16

Due to the constraint that this document is prepared as an example to know whats needed

to do the development, I wont be able to show the whole development done but will cover

all the critical point needed you to develop the same in future. This document is notcomplete when compared to development done and thus has room for improvement.

Getting Started with the Development:

The example that Ill be demonstrating today will be:

Display Employee First name and Last name

Display His / her photograph on the CV, the photograph will be fetched at the run

depending upon the employees personnel number and then will be displayed on the

ADOBE form.

A. Creating ADOBE Form:

Check Point: Please make sure that you have installed ALCD - ADOBE Life Cycle

Designer on your work station. It comes with the SAP pack with the entire installationguide please approach your basis team for more details, it can also be download from

http://www.adobe.com/

1. Type the transaction code SFP in your command box.

2. Select the radio button Interface enter the name of the interface starting with Z(here as creating as Z_IF_TEST_CV)

3. Click on create button

4. Enter description and let the interface type be as it is. (default interface type)

Figure A1 Creating interface.1. Save the interface and assign it a transport request (here I am saving as local object)

2. Create 2 Import parameters as im_vorna and im_nachn and 1 import parameter for

employee photograph as im_photo.

Figure A2 Import Parameters in Interface.
https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/7783https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/7783https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/7783https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/7783https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/7783https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/7783https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/7783https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/7783https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/7783https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/7783https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/7783https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/7783https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/7783https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/7783https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/7783https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/7783https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/7783https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/7783http://www.adobe.com/http://www.adobe.com/


3/16

1. Save and activate the interface and come back on the main screen

2. Create Form : select the radio button form

Figure A3 Creating form

1. Click on create button and Enter description, specify the interface that you have

create above in step 8.

Figure A4 Creating Form

1. Enter save assign to the transport request (here we have assigned it to local

package)

2. The new screen will appear with 3 tab pages and 2 panes can be seen in context tab

page.1. The left hand pane is the interface and the right hand pane is the context of

the adobe form. The interface needs to be mapped with the context of the

form. This can be done by drag and drop of the fields from interface tocontext of the ADOBE form.


4/16

Figure A5 - Mapping Interface with Context of the ADOBE form.1. Once the mapping is done click on the layout tab. In this tab you may design your

ADOBE form layout.

Note: If ADLC is not installed on your workstation then you will get error message.

1. Once you are in the layout tab click on the Data Window. (if you cant see this

window select Menu Option Palette Data View)

Figure A6 - Data View Window.1. To design the layout drag and drop the filed im_vorna and im_nachn on the master

page of the form.


5/16

Figure A7 Drag and drop the fields on the Master Page of the Form. 1. Create UI element for Photograph. Select menu option Palettes Library.

Figure A8 Library

1. Drag and drop the UI Element Image Field on the form master page.


6/16

Figure A9 UI Element Image Filed.

1. Binding the Image Filed. The UI Element needs to be bind so that if can receive theimage at run time. For binding the fields select the UI Element select the menu

option Palette Object.

Figure A10 Object window used for binding1. Click on Binding tab on the object window.


7/16

Figure A11 - Binding

1. As you have dragged and dropped the field im_vorna and im_nachn binding

automatically takes place or else you may also bind the fields as done for im_photo.2. Save and Activate the ADOBE Form.

B. Creating WebdynPro Application.

Basic knowledge of OOPS and concept of MVC required for creating WebDynProApplication.

1. Go To SE80 transaction code (object navigator)

2. In the Drop Down field select Web Dynpro Comp./Inft.3. Enter the name in the free text fields starting with Z in this case we have the same

name as in ADOBE form. (Z_IF_TEST_CV) and hit the enter key.

Figure B1 Creating WebDynPro for ABAP Component1. Click on Yes button to proceed further.


8/16

Figure B2 - Creating WebDynPro for ABAP Component, enter description and enter

1. Enter Description and enter.2. Assign it to transport request (in our case we are saving it as local object)

3. Create View where you can display your custom ADOBE Form.

Figure B3 Create View.

1. Enter the name and the description of the view


9/16

Figure B3a Create View.

1. Enter and proceed further

2. Click on the layout of the View which you have created.ROOTUIELEMENTCONTAINER is the default UI element that gets created, right

click and select Insert Element.

Figure B4 Create UI Element for ADOBE form.

1. For the templateSource property, enter the name of the form. You can select an

existing form (via F4, for example) or enter a name to create a new form. Based onthe interface of the selected form, a context node with attributes is automatically

created for the UI element InteractiveForm. The dataSource property of the UI

element is automatically bound to this context node.

2. Specify whether the form is a PDF-based print form or an interactive form. If it is a non-interactive form usage, that is. the form is a PDF-based print

form, make sure that the property enabled is not selected in the property table.This is the default setting.

If it is an interactive form usage, activate the property enabled in the property

table


10/16

Figure B5 UI Adobe Form Properties.


11/16

Figure B6 Context of the View the node z_if_test_cv automatically gets created with

all the 3 fields which were created in the interface of the ADOBE form.

1. Click on the method tab page and double click on the method WDDOINIT.2. Now you got to read the context node that was automatically created when defining

the ADOBE form.3. Click on the Icon WebDynPro Code Wizard (Ctrl+F7).

4. New screen will appear select radio button Read Context select F4 to select thenode Z_IF_TEST_CV press enter.

Figure B7 Web DynPro statement structure


12/16

Figure B8 Context Viewer

1. After pressing enter you will be back to your method and this piece of code will be

automatically generated for you.

Figure B9 Auto code generation (Meta Data)

1. Currently we will Hard Code the fields Vorna and Nachn and will use the standard

method to get the photographs form SE78 (Form Graphics).2. Add this piece of code

CONSTANTS: c_graphics TYPE tdobjectgr VALUE 'GRAPHICS',

c_bmap TYPE tdidgr VALUE 'BMAP' ,

c_bcol TYPE tdbtype VALUE 'BCOL'.DATA: lv_pernr1 TYPE tdobname.


13/16

*** Vorna and Nachn.

ls_z_if_test_cv-im_vorna = 'Bhawanidutt'.

ls_z_if_test_cv-im_nachn = 'Dabral'.

*** Get the Photographs.

lv_pernr1 = '00000028'. " Employee NumberCALL METHOD cl_ssf_xsf_utilities=>get_bds_graphic_as_bmp

EXPORTINGp_object = c_graphics

p_name = lv_pernr1

p_id = c_bmapp_btype = c_bcol

RECEIVING

p_bmp = ls_z_if_test_cv-im_photoEXCEPTIONS

not_found = 1

internal_error = 2OTHERS = 3.

*** Send the values back to the node

lo_el_z_if_test_cv->set_static_attributes(

EXPORTINGstatic_attributes = ls_z_if_test_cv ).

1. Save and Activate the Method.

2. Making the View as Default view or else nothing will appear on the portal.

3. On the left hand side pane of your WebdynPro Component, double click on the

Window. Now Drag and drop the view from left hand side under the window onthe right hand side.

Figure B10 Make the view as default view under Window.


14/16

1. Creating Web DynPro Application: Right click on the Web DynPro Component

click on create select Web DynPro Application.

Figure B11 Create Web dynPro Application1. Enter the description name and press enter.

Figure B11a Create Web DynPro Application.

1. Save the Application assign it to a transport request.

2. Test the Web DynPro Application. Right click Web DynPro Application and clickon Test to test the application.


15/16

Figure B12 Test WebDynPro Application1. The output gets generated in the Browser and the content gets displayed in the

ADOBE Print form with the browser.

Figure B13- Out of the ADOBE Form in the browser. Thats me in the

photograph :)

1. Ask your portal team to Create WebDynPro for ABAP I-view and assign theWebdynPro application to the I-view, I-view can be assigned to page a page to a

role, a role to your user id so that you can test it on the portal.


16/16

Figure B14 - Snapshot of Actual Development.

how to use webdynpro

Documents