Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
Webdynpro ABAP

Multiple File Upload Using table UI element

 

 

This tutorial explains how to create multiple file upload using table UI element.

 

Pre-Requisites: Knowledge on

1.      Table UI element

2.      File Upload UI element

3.      Cell variant in table UI element.

4.      Checkbox UI element

 

 

Step 1: Go to Tcode SE80 and create a webdynpro component:

 

1


 

Assign the component to the package or save it in the local object.

 

Step 2: In the context tab of the veiw controller create a context node with cardinality 1..N and set the initialize lead selection as no.

 

2

And add attributes of following types.

 

 3

 

 

 

Step 3: Go the layout tab of the view controller and place the table UI element.

 

 4

 

Right click on the table and create binding for the table with the context node created as below.

 

 5

 

Set the following properties of table as below.

 

Selection mode – None

Display empty rows – Unchecked

 

 

Step 4: Insert the cell variant for the colum 1(File upload UI element).

 

 6

Enter the ID and type of cell as below.                         

7

 

Enter the variant key for the variant.

 

 6.1

 

Right click on the cell variant and click on insert editor.

8 

Enter the type of editor UI element as Text view.

 

9

 

Bind the text property of the text view to the file name attribute.

10

 

In the properties of the table column bind the selected cell variant property of the table to the variant attribute.

 

6.2

 

Step 5: Now, select the file upload UI element and bind the data property to the attribute data and mime type property to the attribute Mime_type.

 

 

 

 11

 

 

 

Step 6: Create two buttons add file and remove files with actions for it.

 12

 

 

 

Step 7:  Write the following code in the respective methods.

 

Method : DOMODIFYVIEW

data lo_nd_file_upload type ref to if_wd_context_node.
data lt_file_upload type wd_this->elements_file_upload.
data ls_file_upload type wd_this->element_file_upload.
data lv_lines type i.
  lo_nd_file_upload = wd_context->get_child_node( name = wd_this->wdctx_file_upload ).
  lo_nd_file_upload->get_static_attributes_table( importing table = lt_file_upload ).
*  delete lt_file_upload where file_name is  initial.
loop at lt_file_upload into ls_file_upload where file_name is not initial
and variant is initial.
   ls_file_upload-variant = 'KEY'.
modify lt_file_upload from ls_file_upload index sy-tabix.
clear : ls_file_upload.
  endloop.
  lv_lines = lines( lt_file_upload ).
if lv_lines is initial.
append initial line to lt_file_upload.
  endif.
  lo_nd_file_upload->bind_table( lt_file_upload ).

 

Method ADD:

data lo_nd_file_upload type ref to if_wd_context_node.
data ls_file_upload type wd_this->element_file_upload.
lo_nd_file_upload = wd_context->get_child_node( name = wd_this->wdctx_file_upload ).
lo_nd_file_upload->bind_structure( new_item = ls_file_upload set_initial_elements = abap_false ).

 

Method Remove Files:

data lo_nd_file_upload type ref to if_wd_context_node.
data lt_file_upload type wd_this->elements_file_upload.
  lo_nd_file_upload = wd_context->get_child_node( name = wd_this->wdctx_file_upload ).
  lo_nd_file_upload->get_static_attributes_table( importing table = lt_file_upload ).
delete lt_file_upload where checkbox = abap_true.
  lo_nd_file_upload->bind_table( lt_file_upload ).

     

       Step 8: Save and activate the whole component. Create a webdynpro application to test the component.

      Output:

                       13

About Arun

0 Comments:

Post a Comment

Powered by Blogger.