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.
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.
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.
Assign default value as 1 to row count.
Step 3: Go to the layout tab of the view controller and insert multipane UI element.
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.
Step 4: Right click on the multipane UI element and click on insert content.
Insert the transparent UI Element.
Right click on the transparent container and insert a file upload UI element and a check box ui element.
Bind the context attribute file_name, mime_type and data to the context attribtue.
Bind the checked property of the checkbox to the checkbox attribute.
Step 5: Insert a two button UI element and create action for the UI elements.
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.
0 Comments:
Post a Comment