Skip to Content

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.

1.JPG

Enter Description and click on OK.

2.JPG


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

3.JPG

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).

/wp-content/uploads/2014/08/4_516604.jpg

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

/wp-content/uploads/2014/08/5_516605.jpg

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

6.JPG

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

7.JPG

Step 3: Layout Design.

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

/wp-content/uploads/2014/08/8_516614.jpg

Create a ViewContainerUIELement ( for placing ALV1).

9.JPG

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

10.JPG

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

11.JPG

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

12.JPG

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

/wp-content/uploads/2014/08/13_516625.jpg

Add the Interface controller of ALV_DRAG usage.

14.JPG

Similarly, also add the Controller usage for ALV_DROP.

16.JPG

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.

17.JPG


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).

/wp-content/uploads/2014/08/18_516644.jpg

Select the Component controller of your Web Dynpro Component.

19.JPG

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

20.JPG

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.

21.JPG

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

/wp-content/uploads/2014/08/22_516648.jpg

Select the TABLE  view of ALV_DRAG component.

23.JPG

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.

/wp-content/uploads/2014/08/24_516650.jpg

Enter description and click on save.

25.JPG

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)

27.JPG

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).

28.JPG

/wp-content/uploads/2014/08/29_516657.jpg

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

30.JPG

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

To report this post you need to login first.

4 Comments

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

  1. Sharmila Subramanian

    Nice to know about the drag and drop option in ABAP Webdynpro ALV. Your document is very clear with step by step instructions, illustrated with screenshots. Great job. Thanks.

    (0) 

Leave a Reply