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

Multipane UI Element

This tutorial explains the multipane UI element and How to create multiple file Upload Using Multipane UI Element.

Multipane UI element:

The MultiPane UI element is used to order the contents in the form of a grid, similar to the MatrixLayout, but with the difference that the dataSource is bound against a context node.

clip_image002

 

How this UI Element works?

This UI element has a property called data source which is an obligatory binding to the context of cardinality 1..N so that atleast one pane is being displayed in the screen. It can also be set to the context node of cardinality 0..N, in that case the context has to be initialized with atlease one element for the pane to to be displayed on the screen.

When you right click on this element it provides the option to insert content into the pane. It allow us to insert content only once. So insert a transparent contaniner or Group container and inside these container we can insert ‘n’ of elements.

The Content of the pane will be duplicated for each element in the context. Say for example you have a context pane with an input field and binded to the attribute. The input value entered in the first pane will be stored on the 1st element of the context node and the input value entered in the second pane will be stored on the 2nd element of the context node and so on.

The layout of display of the pane can be controlled using the property row count and column count.

Example:

Let us see an example that explains the usage of multipane UI element. In the following example we are going to create multiple file upload using table UI element.

Step 1: Go to Tcode SE80 (Object Navigator) and create a webdynpro component.

clip_image004

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

Step 2: In the context tab of the view controller, create the context node and attributes as mentioned below.

clip_image005

Assign default value as 1 to row count. 

Step 3: Go to the layout tab of the view controller and insert multipane UI element.

clip_image007

 

Bind the data source property of the multipane UI element to the Multipane context node and bind the row count property to the context attribute row count.

clip_image009

 

Step 4: Right click on the multipane UI element and click on insert content.

clip_image011

 

Insert the transparent UI Element.

clip_image013

Right click on the transparent container and insert a file upload UI element and a check box ui element.

clip_image015

 

Bind the context attribute file_name, mime_type and data to the context attribtue.

clip_image017

 

Bind the checked property of the checkbox to the checkbox attribute.

clip_image019

 

Step 5: Insert a two button UI element and create action for the UI elements.

clip_image021

 

Step 6:

Write the following code in the event handler method for button add.

  data lo_nd_multi_pane type ref to if_wd_context_node.
 
data ls_multi_pane type
wd_this->element_multi_pane.

  lo_nd_multi_pane = wd_context->get_child_node( name = wd_this->wdctx_multi_pane ).

  lo_nd_multi_pane->bind_structure( new_item = ls_multi_pane set_initial_elements = abap_false ).


 
data lo_el_context type ref to
if_wd_context_element.
 
data ls_context type
wd_this->element_context.
 
data lv_row_count type
wd_this->element_context-row_count.

  lo_el_context = wd_context->get_element( ).

  lo_el_context->get_attribute(
   
exporting

      name = 
`ROW_COUNT`
   
importing
     
value = lv_row_count ).

  lv_row_count = lv_row_count +
1.


  lo_el_context->set_attribute(
      name = 
`ROW_COUNT`
     
value = lv_row_count ).

 

 

Step 7: Write the following code in the event handler method for remove files.


 
data lo_nd_multi_pane type ref to if_wd_context_node.
 
data lo_el_multi_pane type ref to
if_wd_context_element.
 
data lt_multi_pane type
wd_this->elements_multi_pane.
 
data lt_multi_pane_temp type
wd_this->elements_multi_pane.
 
data ls_multi_pane type
wd_this->element_multi_pane.

  lo_nd_multi_pane = wd_context->get_child_node( name = wd_this->wdctx_multi_pane ).

  lo_nd_multi_pane->get_static_attributes_table(
importing table
= lt_multi_pane ).


   
data lo_el_context type ref to
if_wd_context_element.
   
data ls_context type
wd_this->element_context.
   
data lv_row_count type
wd_this->element_context-row_count.

    lo_el_context = wd_context->get_element( ).

    lo_el_context->get_attribute(
     
exporting

        name = 
`ROW_COUNT`
     
importing
       
value = lv_row_count ).



 
loop at lt_multi_pane into ls_multi_pane where checkbox
= abap_true.

  lv_row_count = lv_row_count -
1.


  endloop.

 
delete lt_multi_pane where checkbox
= abap_true.

  lo_nd_multi_pane->bind_table( new_items = lt_multi_pane set_initial_elements = abap_true ).

 

Step 8: Create an application for the webdynpro component and test the application.

clip_image023

About Arun

0 Comments:

Post a Comment

Powered by Blogger.