Using Drop Down by Index in Table UI Element With Web Dynpro ABAP

12
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com © 2009 SAP AG 1 Using Drop Down By Index in Table UI Element in WebDynpro ABAP Applies to: Enterprise portal, ECC 6.0, Web Dynpro ABAP. For more information, visit the Web Dynpro ABAP homepage . Summary This article would help ABAP developers, who are faced with a scenario of having a DropDownByIndex within the Table UI Element in their Web Dynpro Component. Author: Tulasi Palnati Company: Yash Technologies Created on: 15 September 2009 Author Bio Tulasi Palnati is an Enterprise Portal Consultant at Yash Technologies, Hyderabad-India

Transcript of Using Drop Down by Index in Table UI Element With Web Dynpro ABAP

Page 1: Using Drop Down by Index in Table UI Element With Web Dynpro ABAP

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

© 2009 SAP AG 1

Using Drop Down By Index in

Table UI Element in WebDynpro

ABAP

Applies to:

Enterprise portal, ECC 6.0, Web Dynpro ABAP. For more information, visit the Web Dynpro ABAP homepage.

Summary

This article would help ABAP developers, who are faced with a scenario of having a DropDownByIndex within the Table UI Element in their Web Dynpro Component.

Author: Tulasi Palnati

Company: Yash Technologies

Created on: 15 September 2009

Author Bio

Tulasi Palnati is an Enterprise Portal Consultant at Yash Technologies, Hyderabad-India

Page 2: Using Drop Down by Index in Table UI Element With Web Dynpro ABAP

Using Drop Down By Index in Table UI Element in WebDynpro ABAP

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

© 2009 SAP AG 2

Table of Contents

Step 1: Create a WebDynpro Component ......................................................................................................... 3

Step 2: Create a Context to hold data ................................................................................................................ 3

Step 4: Create the Layout and Bind the context to UI Elements ........................................................................ 7

Step 5: Create Application and Test it ............................................................................................................... 9

Output: ............................................................................................................................................................ 9

Related Content ................................................................................................................................................ 11

Disclaimer and Liability Notice .......................................................................................................................... 12

Page 3: Using Drop Down by Index in Table UI Element With Web Dynpro ABAP

Using Drop Down By Index in Table UI Element in WebDynpro ABAP

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

© 2009 SAP AG 3

Step 1: Create a WebDynpro Component

A. Create a new WebDynpro component by the name ZWD_DROPDOWN_TABLE.

Step 2: Create a Context to hold data

B. Double click on View. Go to Context Tab.

C. Create Node as Shown below..

D. Click on Add Attribute from Structure

F. Select components from the structure and Click on finish.

Page 4: Using Drop Down by Index in Table UI Element With Web Dynpro ABAP

Using Drop Down By Index in Table UI Element in WebDynpro ABAP

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

© 2009 SAP AG 4

G. Create another node under SPFLI node as below.

Page 5: Using Drop Down by Index in Table UI Element With Web Dynpro ABAP

Using Drop Down By Index in Table UI Element in WebDynpro ABAP

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

© 2009 SAP AG 5

H. Create two attributes under the Node SFLIGHT as below.

I. Context of the view looks as below.

J. Select the SFLIGHT and Double click on CARRID_DATA supply function.

Page 6: Using Drop Down by Index in Table UI Element With Web Dynpro ABAP

Using Drop Down By Index in Table UI Element in WebDynpro ABAP

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

© 2009 SAP AG 6

Step 3: Code for Supply Function.

K. Copy the below code in the method CARRID_DATA.

DATA:

lt_carrid TYPE TABLE OF s_carr_id,

ls_spfli TYPE wd_this->element_spfli,

lt_spfli TYPE wd_this->elements_spfli,

lt_sflight TYPE wd_this->elements_sflight,

ls_sflight TYPE wd_this->element_sflight,

wd_node TYPE REF TO if_wd_context_node,

lr_element TYPE REF TO if_wd_context_element.

SELECT DISTINCT carrid UP TO 20 ROWS FROM sflight INTO TABLE lt_carrid.

*** This would create 20 blank rows in the table with only the dropdown filled with CARRID values

DO 20 TIMES.

APPEND ls_spfli TO lt_spfli.

ENDDO.

node->bind_table( new_items = lt_spfli

set_initial_elements = abap_true ).

LOOP AT lt_spfli INTO ls_spfli.

Page 7: Using Drop Down by Index in Table UI Element With Web Dynpro ABAP

Using Drop Down By Index in Table UI Element in WebDynpro ABAP

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

© 2009 SAP AG 7

LOOP AT lt_carrid INTO ls_sflight-carrid.

ls_sflight-key = sy-index.

CONDENSE ls_sflight-key.

APPEND ls_sflight TO lt_sflight.

CLEAR ls_sflight.

ENDLOOP.

lr_element = node->get_element( sy-tabix ).

wd_node = lr_element->get_child_node( 'SFLIGHT' ).

wd_node->bind_table( lt_sflight ).

ENDLOOP.

Step 4: Create the Layout and Bind the context to UI Elements

L. Double Click on view layout tab.

M. Click on ROOTUIELEMENTCONTAINER create element TABLE.

N. Bind SPFLI node elements to the table as below.

0. Bind the texts Property of Carrid DropdownByIndex with MAIN.SPFLI.SFLIGHT.CARRID

P. Create one action On_CARRID_SELECT.

Page 8: Using Drop Down by Index in Table UI Element With Web Dynpro ABAP

Using Drop Down By Index in Table UI Element in WebDynpro ABAP

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

© 2009 SAP AG 8

Q. Go to Methods tab. Select On_carrid_select method Double click on it.

R. Copy the below code and Paste it.

method ONACTIONON_CARRID_SELECT .

DATA: lr_element TYPE REF TO if_wd_context_element,

lv_index_table TYPE i,

lv_index TYPE i,

lt_sflight TYPE wd_this->elements_sflight,

ls_sflight TYPE wd_this->element_sflight,

wd_node TYPE REF TO if_wd_context_node,

ls_spfli TYPE wd_this->element_spfli.

*** Get row number from which dropdown value was selected

lr_element = wdevent->get_context_element( 'CONTEXT_ELEMENT' ).

lv_index_table = lr_element->get_index( ).

wd_node = wd_context->get_child_node( 'SPFLI' ).

wd_node->set_lead_selection_index( index = lv_index_table ).

*** Get the index of value within dropdown which is selected

wd_node = wd_context->get_child_node( 'SPFLI' ).

wd_node->set_lead_selection_index( index = lv_index_table ).

lv_index = wdevent->get_int( name = 'INDEX' ).

*** Fetch all the dropdown values into an internal table

wd_node = wd_context->path_get_node( 'SPFLI.SFLIGHT' ).

CALL METHOD wd_node->get_static_attributes_table

EXPORTING

from = 1

to = 2000

IMPORTING

table = lt_sflight.

*** Obtain the value selected in the dropdown by the user using the index obtained

READ TABLE lt_sflight INTO ls_sflight INDEX lv_index.

wd_node->set_attribute( EXPORTING name = 'CARRID'

value = ls_sflight-carrid ).

SELECT SINGLE carrid

connid

countryfr

cityfrom

airpfrom

countryto

cityto

airpto

FROM spfli

INTO CORRESPONDING FIELDS OF ls_spfli

WHERE carrid = ls_sflight-carrid.

Page 9: Using Drop Down by Index in Table UI Element With Web Dynpro ABAP

Using Drop Down By Index in Table UI Element in WebDynpro ABAP

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

© 2009 SAP AG 9

*** Fill the fetched values into the corresponding textfields of table

wd_node = wd_context->get_child_node( 'SPFLI' ).

CALL METHOD wd_node->set_static_attributes

EXPORTING

index = lv_index_table

static_attributes = ls_spfli.

endmethod.

Step 5: Create Application and Test it

S. Now Create a WebDynpro Application and save and activate all.

Output:

Page 10: Using Drop Down by Index in Table UI Element With Web Dynpro ABAP

Using Drop Down By Index in Table UI Element in WebDynpro ABAP

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

© 2009 SAP AG 10

Page 11: Using Drop Down by Index in Table UI Element With Web Dynpro ABAP

Using Drop Down By Index in Table UI Element in WebDynpro ABAP

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

© 2009 SAP AG 11

Related Content

E-Learning Tutorials-WebDynpro ABAP

WebDynpro ABAP in SDN

Page 12: Using Drop Down by Index in Table UI Element With Web Dynpro ABAP

Using Drop Down By Index in Table UI Element in WebDynpro ABAP

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

© 2009 SAP AG 12

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.