Download - 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 -
8/1/2019 How to Use Webdynpro
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/ -
8/1/2019 How to Use Webdynpro
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.
-
8/1/2019 How to Use Webdynpro
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.
-
8/1/2019 How to Use Webdynpro
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.
-
8/1/2019 How to Use Webdynpro
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.
-
8/1/2019 How to Use Webdynpro
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/1/2019 How to Use Webdynpro
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
-
8/1/2019 How to Use Webdynpro
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
-
8/1/2019 How to Use Webdynpro
10/16
Figure B5 UI Adobe Form Properties.
-
8/1/2019 How to Use Webdynpro
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
-
8/1/2019 How to Use Webdynpro
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.
-
8/1/2019 How to Use Webdynpro
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.
-
8/1/2019 How to Use Webdynpro
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.
-
8/1/2019 How to Use Webdynpro
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.
-
8/1/2019 How to Use Webdynpro
16/16
Figure B14 - Snapshot of Actual Development.