Interactive ALV in Web Dynpro ABAP

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

2010 SAP AG 1

WDA: Interactive ALV

Applies to:

This document applies to SAP ECC 6.0, SAP Netweaver 2004s. For more information, visit the Web Dynpro ABAP homepage.

Summary

This article helps a developer to use Interactive ALV Report in WDA.

Author: Rahul Muraleedharan

Company: Applexus Software Solutions (P) Ltd

Created on: 24 November 2010

Author Bio

Rahul Muraleedharan is working as SAP Technology Consultant with Applexus Software Solutions (P) Ltd. He has an experience of over 1 year in SAP ABAP.



2010 SAP AG 2

Table of Contents

Introduction ......................................................................................................................................................... 3

Steps for implementing an Interactive ALV Report: ........................................................................................ 3

Step by Step Process ......................................................................................................................................... 4

Step 1: Create a Web Dynpro Component. .................................................................................................... 4

Step 2: Data Binding. ...................................................................................................................................... 5

Step 3: Context Mapping................................................................................................................................. 5

Step 4: Declare Component Usage. ............................................................................................................... 6

Step 5: Declare the component Usage in the view controller. ........................................................................ 6

Step 6: Design the layout. ............................................................................................................................... 8

Step 7: Embed the VIEWCONTAINERUIELEMENT. ..................................................................................... 8

Step 8: Context Mapping Between the two components. ............................................................................... 9

Step 9: Create a view for Item Details .......................................................................................................... 10

Step 10: Bind the node to be displayed as ALV. .......................................................................................... 10

Step 11: Set the HOTSPOT .......................................................................................................................... 11

Step 12: Create an event handler method for hotspot click. ......................................................................... 12

Step 13: Create Plugs for navigation between the views. ............................................................................ 12

Step 14: Navigation from Header details to Item details. .............................................................................. 13

Step 15: Navigate back from Item details to the header details. .................................................................. 14

Step 16: Activate and create a Web Dynpro Application. ............................................................................. 15

Application ........................................................................................................................................................ 16

Related Content ................................................................................................................................................ 17

Disclaimer and Liability Notice .......................................................................................................................... 18



2010 SAP AG 3

Introduction

WDA provides a Web Dynpro Component SALV_WD_TABLE for including SAP List Viewer. In most cases the end user requirements will be drill through the reports ie., from a header level report, on clicking a particular field the corresponding item level report should be displayed. This article is a step by step guide to make the ALV Report interactive.

Steps for implementing an Interactive ALV Report:

1. Create a Web Dynpro Component.

2. Data Binding.

3. Context Mapping.

4. Declare Component Usage.

5. Declare the component Usage in the view controller.

6. Design the layout.

7. Embed the VIEWCONTAINERUIELEMENT.

8. Context Mapping Between the two components.

9. Create a view for Item Details

10. Bind the node to be displayed as ALV.

11. Set the HOTSPOT

12. Create an event handler method for hotspot click.

13. Create Plugs for navigation between the views.

14. Navigation from Header details to Item details.

15. Navigate back from Item details to the header details.

16. Activate and create a Web Dynpro Application.



2010 SAP AG 4

Step by Step Process

Step 1: Create a Web Dynpro Component.

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

Save the Component and Activate it.



2010 SAP AG 5

Step 2: Data Binding.

Go to the Component Controller and add the required nodes and attributes to the Root node of the context.

In this example I have added two nodes viz., HEADER and ITEM each containing attributes from tables VBAK and VBAP respectively.

Step 3: Context Mapping.

Go to the context tab of the header details view. Map the context nodes from the Component Controller to the Context Root Node of the view.



2010 SAP AG 6

Step 4: Declare Component Usage.

Note: a new folder of Component Usages is created in the objects tree in the left hand side of the screen.

Step 5: Declare the component Usage in the view controller.

Go to the properties tab of the view. Here also the SALV_WD_TABLE component should be specified among the Used Controllers/Components as the View of the SAL_WD_TABLE component is to be displayed in the layout of the custom view created.



2010 SAP AG 7

Click on the button to Create Controller Usage.

Select the Interface Controller of the component SALV_WD_TABLE.



2010 SAP AG 8

Step 6: Design the layout.

Insert a VIEWCONTAINERUIELEMENT on the view. This is done to embed the TABLE view from the SALV_WD_TABLE component, which contains the ALV report, into our view.

Step 7: Embed the VIEWCONTAINERUIELEMENT.

Go to the window and select the VIEWCONTAINERUIELEMENT we have created in the view. Embed the required view from SALV_WD_TABLE. Right Click the VIEWCONTAINERUIELEMENT and select Embed View Option.



2010 SAP AG 9

Press ENTER. Now the navigation tree shows that the view TABLE of SALV_WD_TABLE is embedded into our VIEWCONTAINERUIELEMENT.

Step 8: Context Mapping Between the two components.

Go to COMPONENT USAGES -> ALV -> INTERFACECONTROLLER_USAGE.

In the properties tab click CREATE COMPONENT USAGE.

Select your Web Dynpro Component.



2010 SAP AG 10

Now go to the Context Tab and map the node from your component to the Interface Controller of SALV_WD_TABLE.

Here you want to show the data in HEADER node as the ALV Report so drag and drop the HEADER node of our component into the DATA node of SALV_WD_TABLE.

Now the DATA node will have a double headed arrow.

Step 9: Create a view for Item Details

In this example, on clicking the hotspot the item details for the particular sales order will be displayed. So another view for displaying the Item Details should be created. Do the context mapping and design the layout.

Step 10: Bind the node to be displayed as ALV.

Go to the WDDOINIT method of the component controller. Read the context node to which the data is to be bound. Populate the internal table and bind the data to the node.

method WDDOINIT.

DATA lo_nd_header TYPE REF TO if_wd_context_node.

DATA lo_el_header TYPE REF TO if_wd_context_element.

DATA lt_header TYPE STANDARD TABLE OF vbak.

* navigate from to via lead selection

lo_nd_header = wd_context->get_child_node( name = wd_this->wdctx_header ).

* get element via lead selection

lo_el_header = lo_nd_header->get_element( ).

* For the example the select query for fetching the header details is wr

iiten here.

* Actually this should be avoided and data is to be fetched throught class methods

SELECT * FROM vbak INTO TABLE lt_header UP TO 50 rows.



2010 SAP AG 11

lo_nd_header->bind_table( lt_header ).

endmethod.

Step 11: Set the HOTSPOT

Write the code for setting the hotspot in the ALV in the WDDOINIT method of the header view.

a) For this you have to get the reference to the component used.

b) Then a reference to the interface controller of the used component should be obtained.

c) After that reference to the column on which the hotspot has to be set should be obtained.

d) Now the hot spot action should be set for the particular column.

method WDDOINIT .

DATA: lo_ref_cmp_usage TYPE REF TO if_wd_component_usage,

lo_salv TYPE REF TO iwci_salv_wd_table,

lo_value TYPE REF TO cl_salv_wd_config_table,

lo_column_settings TYPE REF TO cl_salv_wd_column,

lo_link_to_action TYPE REF TO cl_salv_wd_uie_link_to_action.

* create the used component

lo_ref_cmp_usage = wd_this->wd_cpuse_alv( ).

IF lo_ref_cmp_usage->has_active_component( ) IS INITIAL.

lo_ref_cmp_usage->create_component( ).

ENDIF.

* Get a pointer to the SALV interface controller

lo_salv = wd_this->wd_cpifc_alv( ).

* Get the reference to properties of all the columns and rows

lo_value = lo_salv->get_model( ).

* Get the reference to the column VBELN

call method lo_value->if_salv_wd_column_settings~get_column

EXPORTING

id = 'VBELN'

receiving

value = lo_column_settings.

* Create the object of cl_salv_wd_uie_link_to_action

* If the column has to be in the editable mode create the object

* of cl_salv_wd_uie_input_field instead.

CREATE OBJECT lo_link_to_action.

* Set the Field VBELN with the Hyperlink Texts in the Cells

lo_link_to_action->set_text_fieldname( 'VBELN' ).

endmethod.



2010 SAP AG 12

Step 12: Create an event handler method for hotspot click.

Go to methods tab of the view in which ALV is embedded, and create an event handler method for handling the event ON_CLICK of SALV_WD_TABLE.

Step 13: Create Plugs for navigation between the views.

Create an inbound and outbound plug each for the two views and navigation links. Outbound plug from Header Screen is triggered when hotspot is clicked and outbound plug from item details is triggered when BACK button is pressed.



2010 SAP AG 13

Step 14: Navigation from Header details to Item details.

In the event handler method ACTIONON_CLICK of the header details view fire the outbound plug after the binding the internal table to the node.

method ACTIONON_CLICK .

TYPES: BEGIN OF ty_item,

vbeln TYPE vbeln_va,

posnr TYPE posnr_va,

matnr TYPE matnr,

charg TYPE charg_d,

arktx TYPE arktx,

pstyv TYPE pstyv,

zmeng TYPE dzmeng,

meins TYPE meins,

kdmat TYPE matnr_ku,

spart TYPE spart,

netwr TYPE netwr_ap,

waerk TYPE waerk,

END OF ty_item.

DATA: lt_item TYPE STANDARD TABLE OF ty_item.

FIELD-SYMBOLS: TYPE vbeln_va.

DATA lo_nd_item TYPE REF TO if_wd_context_node.

DATA lo_el_item TYPE REF TO if_wd_context_element.

DATA ls_item TYPE wd_this->element_item.

* navigate from to via lead selection

lo_nd_item = wd_context->get_child_node( name = wd_this->wdctx_item ).

ASSIGN r_param->VALUE->* TO .

SELECT vbeln

posnr

matnr

charg

arktx

pstyv

zmeng

meins

kdmat

spart

netwr

waerk FROM VBAP

INTO TABLE lt_item

WHERE vbeln = .

UNASSIGN . lo_nd_item->bind_table( lt_item ).

wd_this->fire_to_item_plg( ).



2010 SAP AG 14

endmethod.

Step 15: Navigate back from Item details to the header details.

Assign an ACTION to the Button BACK in the layout of the Item details view.



2010 SAP AG 15

Step 16: Activate and create a Web Dynpro Application.

Activate the whole Web Dynpro component and create a Web Dynpro application.

Save the application and test it.



2010 SAP AG 16

Application

On Hotspot click:



2010 SAP AG 17

Related Content

ALV Interactive in webdynpro

Dynamic report output in a webdynpro alv

SAP List Viewer in Web Dynpro for ABAP

For more information, visit the Web Dynpro ABAP homepage.



2010 SAP AG 18

Disclaimer and Liability Notice

This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade.

SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document, and anyone using these methods does so at his/her own risk.

SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this document.

Documents

Interactive ALV in Web Dynpro ABAP