Skip to Content
Ramakrishnappa Gangappa
Ramakrishnappa Gangappa
January 10, 2014 6 minute read

Attach files with save, retrieve and delete functionality in Web Dynpro ABAP – Part 2

Follow RSS feed
5 Likes 7,607 Views 48 Comments

Continues……

Pre-requisite: ( Please go through the below link before you continue )

Attach files with save, retrieve and delete functionality in Web Dynpro ABAP – Part 1

Step 7:

Create a table ui element TBL_LIST and bind it to the context node ATTACHMENT_LIST as below

Note: choose editor for FILE_NAME attribute as FILE DOWNLOAD (ui element )

v6.PNG

Step 8:

Go the column editor TBL_LIST_FILE_NAME_EDITOR and bind the properties as show below

new_v.PNG

Step 9:

Create a tool bar to the table TBL_LIST and add a button BTN_SAVE and attach an action as show below

v8.PNG

Add the below code (Save functionality) in event handler method ONACTIONSAVE

ONACTIONSAVE

METHOD onactionsave .
  DATA lo_nd_attachment_list  TYPE REF TO if_wd_context_node.
  DATA lt_attachment_list     TYPE wd_this->elements_attachment_list.
  DATA lo_msg_manager         TYPE REF TO if_wd_message_manager.

  FIELD-SYMBOLS <fs_attachment_list> LIKE LINE OF lt_attachment_list.

  lo_nd_attachment_list =
  wd_context->get_child_node( name = wd_this->wdctx_attachment_list ).

  lo_nd_attachment_list->get_static_attributes_table(
      IMPORTING table = lt_attachment_list ).

  DATA lt_data     TYPE TABLE OF ytr_attach_files.
  DATA ls_data     LIKE LINE OF lt_data.

  “==========================================================
  “Loop over attachment list for only new attachments
  “==========================================================

  LOOP AT lt_attachment_list ASSIGNING <fs_attachment_list>
    WHERE status = abap_false.” new attachment

    ” set status
    <fs_attachment_list>-status = abap_true.

    CLEAR ls_data.
    MOVE-CORRESPONDING <fs_attachment_list> TO ls_data.
    APPEND ls_data TO lt_data.

  ENDLOOP.

  “get message manager
  lo_msg_manager =
  wd_comp_controller->wd_get_api( )->get_message_manager( ).

  IF lt_data[] IS INITIAL.
    ” Attachement list is already saved
    lo_msg_manager->report_error_message(
        message_text = ‘Attachement list is already saved’ ).

    RETURN.
  ENDIF.

  “==========================================================
  ” Save attachments
  “==========================================================
  MODIFY ytr_attach_files FROM TABLE lt_data.
  IF sy-subrc IS INITIAL.
    ” after successful save, update the status
    lo_nd_attachment_list->bind_table(
      EXPORTING
        new_items            =    lt_attachment_list
    ).

  ” Show success message
  lo_msg_manager->report_success(
        message_text = ‘Attachement list saved successfully !!!’ ).
  ENDIF.

ENDMETHOD.

Step 10:

Create another button BTN_DELETE (to delete files ) and attach the action DELETE_ATTACHMENT as shown below

v9.PNG

Add the below code in (Delete functionality) in event handler method ONACTIONDELETE_ATTACHMENT

ONACTIONDELETE_ATTACHMENT

METHOD onactiondelete_attachment .
  DATA lo_node        TYPE REF TO if_wd_context_node.
  DATA lt_elements    TYPE wdr_context_element_set.
  DATA lo_element     TYPE REF TO if_wd_context_element.
  DATA ls_attach_list TYPE wd_this->element_attachment_list.
  DATA lo_msg_manager TYPE REF TO if_wd_message_manager.

  “==========================================================
  ” Get the selected elements from the context
  “==========================================================
  lo_node =
  wd_context->get_child_node( name = wd_this->wdctx_attachment_list ).

  lt_elements =
  lo_node->get_selected_elements( ).

  IF lt_elements[] IS INITIAL.
    “report error message, Please choose a file to delete
    lo_msg_manager =
    wd_comp_controller->wd_get_api( )->get_message_manager( ).

    lo_msg_manager->report_error_message(
        message_text              = ‘Please select atleast 1 row’ ).

    RETURN.
  ENDIF.

  DATA lt_data TYPE TABLE OF ytr_attach_files.
  DATA ls_data LIKE LINE OF lt_data.

  CLEAR lt_data.

  “==========================================================
  ” Delete the record from attachment list
  “==========================================================
  LOOP AT lt_elements INTO lo_element.
    lo_element->get_static_attributes(
      IMPORTING
        static_attributes = ls_attach_list
    ).
    ” delete from the context node
    lo_node->remove_element( element = lo_element  ).

    “Check if record exists in table
    IF ls_attach_list-status = abap_true.
      CLEAR ls_data.
      MOVE-CORRESPONDING ls_attach_list TO ls_data.

      APPEND ls_data TO lt_data.

    ENDIF.
  ENDLOOP.

  “==========================================================
  ” Delete the record(s) from data base table
  “==========================================================
  DELETE ytr_attach_files FROM TABLE lt_data.
ENDMETHOD.

Step 11:

Go to method WDDOINIT(  ) of view and add the below code ( Retrieve functionality )

WDDOINIT

METHOD wddoinit .

  DATA lo_nd_attachment_list  TYPE REF TO if_wd_context_node.
  DATA lt_attachment_list     TYPE wd_this->elements_attachment_list.
  DATA ls_attachment_list     LIKE LINE OF lt_attachment_list.
  DATA lt_data                TYPE TABLE OF ytr_attach_files.

  FIELD-SYMBOLS: <ls_data> LIKE LINE OF lt_data.
  “==========================================================
  ” get the attachment files from table for the current user
  “==========================================================
  SELECT *
    INTO TABLE lt_data
    FROM ytr_attach_files
    WHERE uname = sy-uname.

  CLEAR lt_attachment_list.
  LOOP AT lt_data ASSIGNING <ls_data>.
    CLEAR ls_attachment_list.
    MOVE-CORRESPONDING <ls_data> TO ls_attachment_list.
    APPEND ls_attachment_list TO lt_attachment_list.
  ENDLOOP.

  “==========================================================
  ” Bind data to context node
  “==========================================================
* navigate from <CONTEXT> to <ATTACHMENT_LIST> via lead selection
  lo_nd_attachment_list =
  wd_context->get_child_node( name = wd_this->wdctx_attachment_list ).

  lo_nd_attachment_list->bind_table( new_items = lt_attachment_list
set_initial_elements = abap_true ).

ENDMETHOD.

  

Save the component and active it

Step 12:

Create WDA application as below

appl1.PNG

Now, we are ready to see some output and the save, retrieve & delete functionality while attaching files

Output:

o.PNG

Click on BROWSE button as shown below

o1.PNG

The choose file to upload wizard appears & choose a file and click on OPEN button as below

o2.PNG

Click on attach button as shown below

o3.PNG

Now, file is attached into table but it is not yet saved into database table ( see the highlighted cell )

o4.PNG

Click on Save attachments button as show below (Now, the attachment is saved into data base .. see the highlighted cell )

o5.PNG

The data is stored into data base table YTR_ATTACH_FILES as below

o6.PNG

Again, browse another file and attach ( see the second row – for newly added file )

o7.PNG

To delete an attachment, we need to select a row & click on “Delete attachment” button as show below

o8.PNG

Note: on click delete attachment button, it deletes the attachment from data base as well ( if file is already stored )

Error messages:

If user clicks on save attachment button and no fresh attachment to save, then user will be notified with the below error message

o_err1.PNG

If user clicks on Delete attachment button and no row has been selected (chosen), then user will be notified with below error message

o_err2.PNG

—————————————————

Hope this document helps for those who are looking for uploading files and storing in table and retrieving 🙂

I appreciate if any comments/feedback from you 🙂 🙂 🙂

Assigned tags

Related Blog Posts

    Related Questions

      48 Comments
      You must be Logged on to comment or reply to a post.
      • Vimal Sharma

        Hi Rama,

        I am able to design this application successfully.But i have a question,Now suppose ABAPer’s want to access this file,So how can they access it in same format.

        ABAPer’s want to save this attached file to some standard TCODE. How can they do this ?

        We have simply used select statements and binded the data and we are able to download the file.But  how the same thing is possible in ABAP.is there any FM ?

        Can you help on this?

        • Ramakrishnappa Gangappa Post author

          Hi Vimal,

          Thats good, you are able to create this application successfully 🙂

          There are many scn threads available to attach files in abap.

          Please refer the methods in the class CL_GUI_FRONTEND_SERVICES.

          Here you can use methods to read files/content and you can save into table as we did here.

          Hope this helps you.

          Regards,

          Rama

      • Former Member

        Nice and clear document. I am working on similar requirement , here I need to attach .Txt/.msg/.xls/.docx too . In one of your screenshots above, .txt is in false state.

        any work around?

        • Ramakrishnappa Gangappa Post author

          Hi Mohinder,

          We can attach all types of files with this application.

          The status ” false” indicates that the file is not yet saved into database table ( just attached but not pressed SAVE button 🙂 ).

          Please refer the below snap shot – where all types of files have been attached and saved into data base.

          output_all_types.PNG

          • Former Member

            Hi Rama,

            Indeed a nice explanation of document, very neatly done. I tried approach mentioned abovve, however CL_SYSTEM_UUID doesnt exist in below EHP6.

            Thanks

            Mohinder

            • Ramakrishnappa Gangappa Post author

              Hi Mohinder,

              Thank you 🙂 : I appreciate your ratings for this document 😎

              The class CL_SYSTEM_UUID is used just to create a unique key.

              You can create GUID by using FM:  GUID_CREATE.

              Use GUID22 from this FM.

              Regards,

              Rama

              • Former Member

                Hi Rama,

                Thanks for clarification. I followed exactly same steps , but when I click to link I get below

                pop-up. Whats wrong I am doing here? This happened when I tried earlier also, then thought of following your code but same error.

                Excel.png

              • Ramakrishnappa Gangappa Post author

                Hi Mohinder,

                This dialog box is asking the user for options to choose while downloading a file.

                If you don’t want to see again, please un-check the check box “Always ask before opening this type of file”.

                Regards,

                Rama

              • Former Member

                Hi Rama,

                Thanks for the info,however I understand this pop up I can disable anytime but if you see ~wd_key.htm , is the name of folder and it wouldnt open any documents, this document is in .htm format and doesnt open any files. Only PDFs, .PNG opens any ways thanks for help.

                Thanks

                Mohinder

              • Vimal Sharma

                Hi Mohinder,

                Please bind following properties on UI element File Download

                i) Data

                ii)File Name

                iii)File Type

                and your file will be able to get downloaded in any format.

                Thanks,

                Vimal Sharma

          • Former Member

            Hi Rama,

            One of the most useful doc.

            Thanks for sharing 🙂

            But can u explain me how to view the attached document.

            In your screen you have kept the file name as link to action. By clicking on it will it open the attached file???

            Pls let me know how to view the attached file?

            Thanks,

            Nalla B.

            • Ramakrishnappa Gangappa Post author

              Hi Nalla,

              Thank you 🙂 I appreciate your feedback and ratings on this document.

              Let me answer your question :

              Here, I have used FileDownload ui element in the table. Hence you are able to see the link under file name. As we all know, on click on fileDownload ui element, we can either see or save the files.

              Regards,

              Rama

              • Former Member

                Hi Rama,

                Could you pls share the code for the file download options used in this application.

                It will be very much useful. 🙂

                Thanks

                Nalla B.

              • Ramakrishnappa Gangappa Post author

                Hi Nalla,

                I haven’t written any code to download the files. Its the feature of FileDownload ui element that, as you click on link, user is allowd to open or save file.

                Regards,

                Rama

        • Ramakrishnappa Gangappa Post author

          Thank you Sangeetha 🙂   I appreciate your feedback and I am glad that it is helpful for you 😎

          Welcome to WD world … keep exploring the documents under this section and all the best !!!

          Regards,

          Rama

      • Former Member

        Hi Rama,

        I have done the same and got the things working but I am not getting the colour in column. I guess the colour coding is missing here. kindly help on the same.

        • Ramakrishnappa Gangappa Post author

          Hi,

          Thanks for following the document in detail 🙂

          Ooops, that is missed,

          To set color to column—>

               Select the table column and set the cell design property as required.

          Regards,

          Rama

      • Tashi Norbu

        Hi Rama,

             Havent tried yet, but content is definitely useful(gonna use when oppoprtunity comes) .. Thanks for sharing.

        Regards,

        Tashi

      • Former Member

        Hi Rama!

        I like the work done here!

        A simple idea : you could provide the save/retrieve/delete methods as interface so that the component could be used by anyone and the files stored in everyone own personnal data storage (like SAP BDS or PM attached doc or else…) just by implementing this interface.

        Then with sap link (for example) provide a nice tool for the community! 🙂

        Kind regards,

        (if you need help for this do not hesitate! 😉 )

        • Ramakrishnappa Gangappa Post author

          Hi Giraud,

          Thank you for your comments 🙂

          I too liked your Idea but here in this document I have written the business logic inside component ( to minimize the documentation steps 😉 ) just for DEMO purpose.  It should be separated into a class/interface implementation.

          Any way I will try to provide component & class using sap link program ASAP.

          Regards,

          Rama

      • Former Member

        Hi Rama,

        Great effort in writing the blog. To be honest i have not seen a customer asking to store documents in DB when there are better solutions available like kM, content server. DMS. Such solutions have better file management and archiving mechanisms rather than storing the files in traditional DB.

        Integration with KM, content server, and DMS are all available. This woud be my last solution.

        Ashish

        • Former Member

          “ To be honest i have not seen a customer asking to store documents in DB”

          Been there!!

          That’s why the interface solution can enable user case free adaptation of the component as suggested in a previous comment ^^

        • Ramakrishnappa Gangappa Post author

          Hi Ashish,

          Thanks for your comments 🙂

          “To be honest i have not seen a customer asking to store documents in DB”

          May be you have not come across such customers 😉 … just kidding.


          Agree with you that to suggest the customers for km, content server, dms etc. But here, I just explained possible option with DB, may be its useful if customers insists for this kind of approach.

          Please refer my other document, which explains about attaching documents to GOS.

          Attach files to GOS with Save, Retrieve, Delete functionality in SAP Web Dynpro ABAP – Part 1

          Regards,

          Rama


      • Former Member

        Hi Rama,

           the thread is so useful and clearly explained,Kudos for the thread.It helped me in solving the uploading of the attachments but I am unable to download the uploaded file using Download UI element in table.As no text is displaying in that column. As earlier you said that there is an issue with 7.30 the same i am facing but I solved the issue of binding the file download UI element and i am unable to bind the data source of the table to the Raw string of the table.Can u please help me in this.

        1.Error while binding the file

        Capture.JPG

        2.File Name is not displaying once uploaded

        Capture1.JPG

        • Ramakrishnappa Gangappa Post author

          Hi Rohith,

          Thank you for your feedback.

          To resolve your issue, follow the below steps

          • Go to node UPLOAD_LIST and remove the dictionary type used for the node
          • Now, change the type of attribute FILE_DATA to XSTRING
          • Bind to the property “data” of file download ui element

          Hope this solves your issue.

          Regards,

          Rama