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

January 10, 2014 | 2,232 Views |

Former Member

UI Web Dynpro ABAP

abap web dynpro abap webdynpro Web Dynpro web dynpro abap webdynpro webdynpro abap webdynpro for abap

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 )

Step 8:

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

Step 9:

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

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.

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

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.

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.

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

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

Output:

Click on BROWSE button as shown below

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

Click on attach button as shown below

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

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

The data is stored into data base table YTR_ATTACH_FILES as below

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

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

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

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

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

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 🙂 🙂 🙂

To report this post you need to login first.

48 Comments

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

Vimal Sharma January 10, 2014 at 9:59 am

Good One. Thanks Rama

like (0)
1. Former Member Post authorJanuary 10, 2014 at 10:59 am
  
  Thanks Vimal… 🙂 hope this helps you…
  
  like (0)
Sahir Nidagundi January 11, 2014 at 7:22 am

Thanks for sharing.

like (0)
1. Former Member Post authorJanuary 11, 2014 at 9:25 am
  
  Thank you Sahir 🙂
  
  like (0)
Vimal Sharma January 16, 2014 at 7:09 am

Hi Rama,

In step no. 8,You have binded Data property to which attribute of node Attachment_List. ?

Thanks,

Vimal

like (0)
1. Former Member Post authorJanuary 16, 2014 at 7:22 am
  
  Hi Vimal,
  
  Sorry, the image was not clear. I have updated new image at step 8.
  
  Please check now.
  
  Regards,
  
  Rama
  
  like (0)
Syam Babu January 16, 2014 at 7:22 am

Brilliant Blog Ramakrishna.

Thanks,

Syam

like (0)
1. Former Member Post authorJanuary 16, 2014 at 7:26 am
  
  Thank you Syam 🙂
  
  I am glad if its useful
  
  like (0)
Vimal Sharma January 16, 2014 at 9:18 am

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?

like (0)
1. Former Member Post authorJanuary 17, 2014 at 1:39 am
  
  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
  
  like (0)
Former Member January 16, 2014 at 7:56 pm

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?

like (0)
1. Former Member Post authorJanuary 17, 2014 at 1:18 am
  
  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.
  
  like (0)
  1. Former Member January 17, 2014 at 4:22 pm
    
    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
    
    like (0)
    1. Former Member Post authorJanuary 17, 2014 at 4:32 pm
      
      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
      
      like (0)
      1. Former Member January 17, 2014 at 9:16 pm
        
        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.
        
        like (0)
        
        Former Member Post authorJanuary 18, 2014 at 8:16 am
        
        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
        
        like (0)
        
        Former Member January 18, 2014 at 2:50 pm
        
        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
        
        like (0)
        
        Vimal Sharma January 20, 2014 at 9:16 am
        
        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
        
        like (0)
Former Member January 18, 2014 at 5:56 am

Thanks for the helpful document Rama. Keep going.

Thanks

Katrice

like (0)
1. Former Member Post authorJanuary 18, 2014 at 8:14 am
  
  Thank you Katrice 🙂 .. I am happy if its useful.
  
  Your feedback and ratings motive me ,,, to go ahead 🙂
  
  like (0)
  1. Former Member January 18, 2014 at 11:34 am
    
    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.
    
    like (0)
    1. Former Member Post authorJanuary 18, 2014 at 2:21 pm
      
      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
      
      like (0)
      1. Former Member January 19, 2014 at 5:44 am
        
        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.
        
        like (0)
        
        Former Member Post authorJanuary 20, 2014 at 3:00 am
        
        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
        
        like (0)
Former Member January 20, 2014 at 5:04 am

Hi Rama

Very useful thanks for sharing…

like (0)
1. Former Member Post authorJanuary 20, 2014 at 6:33 am
  
  Thank you Shanthan 🙂
  
  like (0)
Former Member February 13, 2014 at 2:41 pm

Hi Ramakrishnappa,

thank you for sharing. The way you exaplained is good. Keep it up 🙂

Best regards,

Rao.

like (0)
1. Former Member Post authorFebruary 13, 2014 at 2:43 pm
  
  Thanks a lot Rao 🙂 I am glad if its useful.
  
  Regards,
  
  Rama
  
  like (0)
Priyesh Shah March 10, 2014 at 8:13 am

Hi,

Good Tutorial on File Attachments.

Any Possibility integration of Document Server.

Best Regards,

Priyesh Shah

like (0)
1. Former Member Post authorMarch 11, 2014 at 2:07 am
  
  Thank you Priyesh 🙂
  
  Yes, we can attach files to GOS instead of custom table with the amendment in the updation / ratrieving logic.
  
  Regards,
  
  Rama
  
  like (0)
  1. Priyesh Shah March 11, 2014 at 10:20 am
    
    Hi Ramakrishna,
    
    You mean to say in WebDynpro ABAP we can use GOS objects.
    
    How?
    
    Best Regards
    
    Priyesh Shah
    
    like (0)
    1. Former Member Post authorMarch 12, 2014 at 7:14 am
      
      Yes we can attach files to GOS in WDA.
      
      Please refer the below document
      
      Attach files to GOS with Save, Retrieve, Delete functionality in SAP Web Dynpro ABAP – Part 1
      
      Regards,
      
      Rama
      
      like (0)
Former Member April 1, 2014 at 12:25 pm

Thank you very much Rama for sharing.

I started to work in Webdynpro. It is very helpful for me 🙂

like (0)
1. Former Member Post authorApril 1, 2014 at 1:34 pm
  
  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
  
  like (0)
Former Member May 5, 2014 at 12:15 pm

Hi Ramakrishnaappa,

This is very useful information.

Thanks for sharing.

Regards,

Siva kumar.

like (0)
1. Former Member Post authorMay 8, 2014 at 3:08 am
  
  Thank you Siva 🙂
  
  Regards,
  
  Rama
  
  like (0)
Former Member October 13, 2014 at 7:38 am

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.

like (0)
1. Former Member Post authorOctober 13, 2014 at 8:28 am
  
  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
  
  like (0)
Former Member October 13, 2014 at 9:41 am

Hi Rama,

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

Regards,

Tashi

like (0)
1. Former Member Post authorOctober 14, 2014 at 2:52 am
  
  Thank you Tashi 🙂
  
  Regards,
  
  Rama
  
  like (0)
Former Member October 14, 2014 at 9:55 am

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! 😉 )

like (0)
1. Former Member Post authorOctober 14, 2014 at 4:09 pm
  
  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
  
  like (0)
Former Member October 14, 2014 at 2:09 pm

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

like (0)
1. Former Member October 14, 2014 at 2:49 pm
  
  “ 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 ^^
  
  like (0)
2. Former Member Post authorOctober 14, 2014 at 4:17 pm
  
  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
  
  like (0)
Former Member April 10, 2015 at 9:48 am

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

2.File Name is not displaying once uploaded

like (0)
1. Former Member Post authorApril 10, 2015 at 11:53 am
  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
  like (0)
  1. Former Member April 10, 2015 at 1:26 pm
    
    Thank You Rama,
    
    Issue Resolved.Thanks for your Quick response.
    
    like (0)