Drag and Drop in Web Dynpro ABAP ALV

[former_member184578]

Introduction

This document helps to create Drag & Drop between ALVs in Web Dynpro ABAP. Drag and Drop between ALVs is not supported until Netweaver 702. In this document,we are going to create 2 ALVs(one as as Drag source and other for Drop target) and then we will execute a Drag & Drop operation from one ALV to the other.

Prerequisites

SAP NetWeaver 700 Ehp2.

Step by Step Process

Step 1: Create a Web Dynpro Component.

Go to the SE80 transaction and create a Web Dynpro Component.

Enter Description and click on OK.

Step 2: Component Usage

Go to the Web Dynpro Component and add 2 component uages ALV_DRAG, ALV_DROP(one for drag source and other for drop source) of ALV component SALV_WD_TABLE

Step 3: Data Binding

Go to the Context tab of Component controller and create a node FLIGHT_DRAG( to hold data for Drag source of ALV).

Enter Node name, select cardinality 0..n and click on OK.

Create the required attributes with the required types ( for DEMO purpose, I have just created 5 attributes).

Similarly, create another node FLIGHT_DROP( to hold data for drop source of ALV) with cardinality 0..n and the necessary attributes.

Step 3: Layout Design.

   Now Go to Layout tab of MAIN view, right click on ROOTUIELEMENTCONTAINER and then click on Insert Element.

Create a ViewContainerUIELement ( for placing ALV1).

Similarly, create another View Container UI Element ( for placing ALV2 ).

Go to the Context tab of MAIN view, and Drag and Drop FLIGHT_DRAG node from Component controller context to View Context.

Similarly, Drag and Drop FLIGHT_DROP node from Component controller context to View Context.

Now, go to the properties tab of view and then click on Create Controller Usage

Add the Interface controller of ALV_DRAG usage.

Similarly, also add the Controller usage for ALV_DROP.

Step 4: Method Declaration & Implementation.

Go to the Methods tab of view, and write the below code in WDDOINIT method

WDDOINT

METHOD wddoinit .   DATA: lo_nd_flight_drag TYPE REF TO if_wd_context_node,         lo_nd_flight_drop TYPE REF TO if_wd_context_node,         lt_flight_drag    TYPE wd_this->elements_flight_drag,         lt_flight_drop    TYPE wd_this->elements_flight_drop.   DATA: lr_usage          TYPE REF TO if_wd_component_usage,         lr_component      TYPE REF TO iwci_salv_wd_table,         lr_model          TYPE REF TO cl_salv_wd_config_table,         lr_table_settings TYPE REF TO if_salv_wd_table_settings,         lr_header         TYPE REF TO cl_salv_wd_header,         lr_avl_drag       TYPE REF TO if_salv_wd_drag_and_drop,         lr_avl_drop       TYPE REF TO if_salv_wd_drag_and_drop. *Set Data to ALV Nodes   lo_nd_flight_drag = wd_context->get_child_node( name = wd_this->wdctx_flight_drag ).   SELECT * FROM sflight INTO CORRESPONDING FIELDS OF TABLE lt_flight_drag UP TO 10 ROWS.   lo_nd_flight_drag->bind_table( new_items = lt_flight_drag ).   lo_nd_flight_drop = wd_context->get_child_node( name = wd_this->wdctx_flight_drop ).   SELECT * FROM sflight INTO CORRESPONDING FIELDS OF TABLE lt_flight_drop UP TO 4 ROWS.   lo_nd_flight_drop->bind_table( new_items = lt_flight_drop ). **Set ALV Drag Source and Drop Target Infos *...get ALV DRAG component usage   lr_usage =   wd_this->wd_cpuse_alv_drag( ).   IF lr_usage->has_active_component( ) IS INITIAL.     lr_usage->create_component( ).   ENDIF. *...get ALV DRAG component   lr_component = wd_this->wd_cpifc_alv_drag( ). * get ConfigurationModel from ALV DRAG Component   lr_model = lr_component->get_model( ). * Set Header for ALV Drag   lr_table_settings ?= lr_model.   lr_header = lr_table_settings->get_header( ).   lr_header->set_text( 'ALV Drag Source' ).                  "#EC NOTEXT   lr_avl_drag ?= lr_model. * get ConfigurationModel from ALV DROP Component   lr_usage =   wd_this->wd_cpuse_alv_drop( ).   IF lr_usage->has_active_component( ) IS INITIAL.     lr_usage->create_component( ).   ENDIF.   lr_component = wd_this->wd_cpifc_alv_drop( ).   lr_model = lr_component->get_model( ). * Set Header for ALV Drag   lr_table_settings ?= lr_model.   lr_header = lr_table_settings->get_header( ).   lr_header->set_text( 'ALV Drop Target' ).                  "#EC NOTEXT   lr_avl_drop ?= lr_model. * *Drag Source Info * Create alv as drag source   lr_avl_drag->create_drag_source_info(     EXPORTING       data = 'ALV_DRAG'       tags = 'alv1'       enabled = abap_true ). * Drop on Row Target Infos   lr_avl_drop->set_drop_row_name_fieldname( 'CARRID' ). " Column name   lr_avl_drop->set_drop_row_name( '' ).   lr_avl_drop->create_drop_row_target_info(     EXPORTING       id   = 'ALV_DROP'       name = 'AA'            "Value       tags = 'alv1'          enabled = abap_true ). ENDMETHOD.

Now, Create an Event handler(ON_DROP_CARRID) for the event ON_DROP of the ALV_DROP Component.

Write the below code in ON_DROP_CARRID event handler method.

ON_DROP_CARRID

METHOD on_drop_carrid .   DATA: lr_node_drag    TYPE REF TO if_wd_context_node,         lr_element_drag TYPE REF TO if_wd_context_element,         lr_node_drop    TYPE REF TO if_wd_context_node,         lr_element_drop TYPE REF TO if_wd_context_element,         ls_flight       TYPE wd_this->element_flight_drag. *  Get the Data of ALV DRAG Source   IF r_param->data = 'ALV_DRAG'.    lr_node_drag    = wd_context->get_child_node( 'FLIGHT_DRAG' ).     lr_element_drag = lr_node_drag->get_lead_selection( ).     IF lr_element_drag IS BOUND.       lr_element_drag->get_static_attributes(       IMPORTING         static_attributes = ls_flight ).     ENDIF.   ENDIF. * Get Index of ALV DROP Target   lr_node_drop    = wd_context->get_child_node( 'FLIGHT_DROP' ).   lr_element_drop = lr_node_drop->get_element( index = r_param->row_index ).   IF lr_element_drop IS BOUND. *   Set the ALV DROP Target data from ALV DRAG Source     lr_element_drop->set_static_attributes(        static_attributes = ls_flight ).   ENDIF. ENDMETHOD.

Step 5: Data Mapping.

Go to the Interface controller of ALV_DRAG component usage and then click on Create Controller Usage( if Component controller is not already available).

Select the Component controller of your Web Dynpro Component.

Now, drag and drop FLIGHT_DRAG node from component controller to the DATA node of Interface controller.

Similarly, go the Interface controller of ALV_DROP component usage and then map the FLIGHT_DROP node from component controller to the DATA node of Interface controller.

Now, go to the Window of the Component, right click on VC1 view container and then click on Embed View;

Select the TABLE  view of ALV_DRAG component.

Similarly, Embed TABLE view of ALV_DROP component in the 2nd View container.

Now Save and Activate the Web Dynpro Component.

Create Application.

Create Web Dynpro Application and save it.

Enter description and click on save.

Now right click on web dynpro application and click on Test.

Result:

Now you can see 2 ALVs in the output( first one as a Drag source and second as Drop target)

Now, am going to drop the selected record from 1st ALV on to the 4th record of 2nd ALV( which will modify the target with the source data).

After drop on the target row( carrid column), we can see the data in the target record gets modified with the source data.

Conclusion

Here I demonstrated a simple example on how to use Drag & Drop between 2 ALVs and modify the target data. You can also add the record to the Target ALV from the drag source. Also, we can drag and drop from other UI elements to ALVs too.

Reference: Drag and Drop - Web Dynpro for ABAP - SAP Library