Skip to Content
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 display under ESS on the Portal.

 

2.      Prerequisites 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.      Prerequisites 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 note 834573.

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.

 

Due to the constraint that this document is prepared as an example to know what’s needed to do the development, I won’t 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 not complete when compared to development done and thus has room for improvement.

 

 

  

Getting Started with the Development:

The example that I’ll 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 installation guide… 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. 

  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 to context of the ADOBE form.

 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.

 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.

Figure A9 – UI Element Image Filed. 

  1. Binding the Image Filed. The UI Element needs to be bind so that if can receive the image at run time. For binding the fields select the UI Element … select the menu option Palette à Object.

Figure A10 – Object window used for binding 

  1. Click on Binding tab on the object window.

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 WebDynPro Application.

 

  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 Component 

  1. Click on Yes button to proceed further.

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

 

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 on the 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

 

Figure B5 – UI Adobe Form Properties. 

 

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 the node “Z_IF_TEST_CV” press enter.

Figure B7 – Web DynPro statement structure

 

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.

 *** 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 Number
  CALL METHOD cl_ssf_xsf_utilities=>get_bds_graphic_as_bmp
    EXPORTING
      p_object       = c_graphics
      p_name         = lv_pernr1
      p_id           = c_bmap
      p_btype        = c_bcol
    RECEIVING
      p_bmp          = ls_z_if_test_cv-im_photo
    EXCEPTIONS
      not_found      = 1
      internal_error = 2
      OTHERS         = 3. 

*** Send the values back to the node
  lo_el_z_if_test_cv->set_static_attributes(
    EXPORTING
      static_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 on the right hand side.

Figure B10 – Make the view as default view under Window. 

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

 Figure B11 – Create Web dynPro Application  

  1. 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 click on Test to test the application.

Figure B12 – Test WebDynPro Application 

  1. 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 the WebdynPro 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.

 Snap Shot of the development

Figure B14 – Snapshot of Actual Development.

 

              HAPPY ADOBE and Web DynProing … hope this document will help you to swim in the world of ADOBE print forms and WebdynPro Application.        

To report this post you need to login first.

32 Comments

You must be Logged on to comment or reply to a post.

    1. Former Member Post author
      Hey I think u missed it ashu.. I have mentioned it … “Ask your portal team to Create WebDynPro for ABAP I-view and assign the WebdynPro application to the I-view, I-view can be assigned to page à page to a role à role to your user id so that you can test it on the portal”.

      Hey soon I’ll be coming  with ISR too.. just wait for some time.

      (0) 
  1. S J
    Hi it was very interactive and an exhaustive blog bahawani. Specially for the new guys who want to have an hands on on Adobe + ABAP 🙂
    Too good.
    Waiting for your ISR Blog.
    (0) 
  2. Kenneth Moore
    We store our employee photos in IXOS (now OpenText).  I can retrieve the photos and get a url and display the picute via the url.  Do you know a way of making this work with Adobe through binding like you did with the BDS/BMP?
    (0) 
    1. Former Member Post author
      Hi, sorry for the delay in response. If you are able to generate the URL, you have the option to display the picture in ADOBE using url. I Hope this will help you.

      Regards,
      ~BD.

      (0) 
  3. Former Member
    Hi,
    Nice blog. Very clear and it make Adobe forms integration easy .
    Now i’m made a WD4A application within an Adobe Form which have to be pre-filled with back-end data. My adobe form was define as your , based on Abap Dictionnary. Now when i try my application no data appears on the Adobe Forms.
    I’ll contact OSS Support and Thomas Jung for help ..the only answer was make your form based on XML schema before we help you …You can’t find help if you’re using Abap Dictionnary interface.

    Regards

    (0) 
    1. Former Member Post author
      Hi Bertrand, Thanks for your comments.

      I don’t find any reason why ABAP Dictionary based interface can’t be integrated WD4A application, I did it and was even able to display the data on the portal.

      Well XML schema based interface is always recommended for web based applications, you can even try that.

      Regards,
      Bhawanidutt

      (0) 
  4. Former Member
    Hi bhavani,

    I am new to adobe forms, Thanks alot for your blog as it was very help full for the first application .

    But i have a problem with webdynpro. This ex works fine for sfp but it goes to error in webdynpro.

    If you could tell me what can be the problem.

    Thanks

    (0) 
    1. Former Member Post author
      Hi, there could be n numbers of reasons, just look at the nodes which gets created. Can you also tell me what is the error that you get.
      (0) 
  5. Former Member
    Hi Bhawanidutt

    Thanks for the very informative and clear blog.
    I have followed your instructions exactly and even added the correct image in se78.
    During debugging, everything seems to get filled correctly, however the image still doesn’t display.
    Could it be a problem with my version of IE? or Adobe?
    I added the image to the web dynpro view as well but all I see is a place holder for the image, but not the image itself.
    Static images display correctly, but not these dynamic images.

    Any ideas what the problem could be?

    Thanks
    Anton Kruse

    (0) 
  6. Former Member
    hi,

    the image cannot be displayed.

    I am using the same table as the method you call do, only the input is different i am using ‘ENJOY’ as input. so the code goes like this. I navigated through the method get_bds_graphic_as_bmp and reached the table STXBITMAPS that it is suppose to have all the images.

    *** First name and last name.
      ls_z_abs_pdf_test_2-im_firstname = ‘America’.
      ls_z_abs_pdf_test_2-im_lastname = ‘Barahona’.

    *** Get the Photographs.
      lv_pernr1 = ‘ENJOY’. “
      CALL METHOD cl_ssf_xsf_utilities=>get_bds_graphic_as_bmp
        EXPORTING
          p_object       = c_graphics
          p_name         = lv_pernr1
          p_id           = c_bmap
          p_btype        = c_bcol
        RECEIVING
          p_bmp          = ls_z_abs_pdf_test_2-im_photo
        EXCEPTIONS
          not_found      = 1
          internal_error = 2
          OTHERS         = 3.

    *** Send the values back to the node
      lo_el_z_abs_pdf_test_2->set_static_attributes(
        EXPORTING
          static_attributes = ls_z_abs_pdf_test_2 ).

    but anything happend i take the image from the context attribute im_photo, but nothing happend, the image is not displayed.

    the blog is really good but i am facing that only problem.

    (0) 
    1. Former Member Post author
      Hi Mauricio,

      make sure that the binding is done with Image Field instead of Image.

      Just delete the Image field from the layout and drag the new Image field UI from the Library and do the fresh binding with the node.

      It worked for me it should also work for you. 🙂

      Thanks,
      Bhawani

      (0) 
      1. Former Member
        Thanks for the quick answer, Bhawani…

        I am using CRM 7.0. Some screenshots in my system are different from your tutorial but the functionalities are the same.

        That’s why instead of drag & drop the UI element, I just added from Insert -> Standard -> Image Field Menu Bar.

        The image field is added to the layout. just to make sure I will write the info that appears in the Object Pallete:
        FIELD TAB:
        – Type: Image Field
        – Caption: PHOTO
        – URL: any picture URL. This image is showed in the design time but not in runtime.
        – Embed Image Data: checked.
        – Sizing: Scale Image to Fit Rectangle
        – Presence: Visible.
        – Default locale.

        BINDING TAB:
        – Name: blank
        – Default Binding: $record.IM_PHOTO
        – Import/Export Binding: blank.

        In runtime, as I said, No imaged is displayed. Any other suggestions are welcome.

        In Advance, thanks a lot.

        (0) 
          1. Former Member
            Hi again,

            I created a text field to capture the value returned by the method calling.

            the value is:
            424D26050000000000003604000028000000100000000F000000010008000000000000000000890B0000890B00000000000000000000000000000000800000

            i dont know if this is correct or not.

            thanks, in advance…

            (0) 
            1. Former Member
              Hi,

              is the value the correct one?

              other thing: I was checking the SAP notes and found 2 that might be interesting
              – 1249492: to show an image in runtime, a webservice or database connection must be used due to security issues.
              – 1009567: adobe interactive forms doesn’t support images saved on the SE78 transaction. So my question is… how did you do this example? since this note is from a date later than your this example. Is that functionality not supported in an earlier release of Interactive Form or CRM??

              I hope you can help me. thanks in advance…

              (0) 
            2. Former Member
              Hi,

              is the value the correct one?

              other thing: I was checking the SAP notes and found 2 that might be interesting
              – 1249492: to show an image in runtime, a webservice or database connection must be used due to security issues.
              – 1009567: adobe interactive forms doesn’t support images saved on the SE78 transaction. So my question is… how did you do this example? since this note is from a date later than your this example. Is that functionality not supported in an earlier release of Interactive Form or CRM??

              I hope you can help me. thanks in advance…

              (0) 
          2. Former Member
            The full returned value for the image field is: 424D26050000000000003604000028000000100000000F00000001000800000000000000000089
            0B0000890B00000000000000000000000000000000800000800000008080008000000080008000
            8080000080808000C0DCC000F0CAA600000099002600C4006666FF009999FF00CCCCFF005D
            00530090548100B386A500DEBED40056280000843D0000A66A5C00C0928F00FFCCCC006B41
            0000A4630000BD845900D1A78F00F3D6C60088000000AA000000FF993300F0CD8E00F9EED9
            000C4D2400116C320019A64D006CC08C009BD3B30000594400007D5F0000C092006BD2B800
            9CDFD1001E505000336666006699990099CCCC00D6FFFF0000707900009DAA0058D2E80000
            EBFF009EF0FF0000476E0000649A000066FF000099FF0057B3F70033CCFF000D355600204A6
            E004E7EA6006D9FC70099CCFF00E6E6E600D9D9D900BFBFBF00A6A6A600999999008C8C8
            C0066666600404040009C8C6F00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF0
            0FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00
            FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00F
            FFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FF
            FFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFF
            FFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFF
            FF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFF
            F00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF
            00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF0
            0FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00
            FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00F
            FFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FF
            FFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFF
            FFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFF
            FF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFF
            F00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF
            00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF0
            0FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00
            FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00FFFFFF00F
            FFFFF00FFFFFF00F0FBFF00A4A0A000808080000000FF0000FF000000FFFF00FF000000FFFF
            FF00FFFF000000000000FD4949494949494949494949494949490000000000000000000000000
            000000000282827282828282828282827282800002B2A272A2A2A2A2A2A2A2A272B2800002B2
            A2A2A2A2A2A2A2A2A2A2A2A2800002B2A2A2A2A2A2A2A2A2A2A2A2A280049002B2B2B2B2
            B2B2B2B2B2B2B2B0049FD4900000000000000000000000049FDFDFDFDFD49003E3F3E3D004
            949FDFDFDFDFDFDFD003E3F3F3F3E3D4849FDFDFDFDFDFDFD003E3F3F3F3E3D0049FDF
            DFDFDFDFDFD003E3F3F3F3E3D0049FDFDFDFDFDFDFD003E3F3F3F3E3D4849FDFDFDFDF
            DFDFD49003E3E3E3D0049FDFDFDFDFDFDFDFDFD490000000049FDFDFDFDFD
            (0) 
          3. Former Member
            Hi Bhawanidutt,

            Finally I can show the image in the adobe form.

            the solution is to call the method

            CALL FUNCTION ‘SSFC_BASE64_ENCODE’
              EXPORTING
                bindata = image_xstring
              IMPORTING
                b64data = image_string.

            I guess the image field in the adobe form receives a string variable in base 64.

            You need to call this method in the WDDOINIT method in the view, pass the b64data to the context attribute of type string then bind this context attribute to the image field.

            more info can be found in the following topic:
            another image question – using Regular ABAP not web dynpro

            thank you for all your time and help. keep teaching us in this matter.

            (0) 

Leave a Reply