interactive alv in web dynpro abap

Download Interactive ALV in Web Dynpro ABAP

Post on 11-Oct-2015

39 views

Category:

Documents

7 download

Embed Size (px)

DESCRIPTION

Interactive ALV WD

TRANSCRIPT

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

  • WDA: Interactive ALV

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

    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

  • WDA: Interactive ALV

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

    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.

  • WDA: Interactive ALV

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

    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.

  • WDA: Interactive ALV

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

    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.

  • WDA: Interactive ALV

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

    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.

  • WDA: Interactive ALV

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

    2010 SAP AG 7

    Click on the button to Create Controller Usage.

    Select the Interface Controller of the component SALV_WD_TABLE.

  • WDA: Interactive ALV

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

    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.

  • WDA: Interactive ALV

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

    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.

  • WDA: Interactive ALV

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

    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 t