Saturday, December 18, 2010

Demo on displaying list box with the option for selecting multiple values

Scenario:

To create a Web DynPro application with a List Box (Multiple selections).

Steps :

1. Go to transaction SE80.

2. Select “WebDynpro Comp./Intf” from the list.

3. Create a new WebDynpro component by the name ZWD_LISTBOX.

4. Double-click on the View. Select Context Tab.

5. Create a NODE as shown below.

6. Create an attribute ID as shown below:

7. Create another node SFLIGHT like below.

Select components from structure

8.Select AIRLINE node as below and double click on FILL_LIST supply function.

.

Here code will be generated automatically just uncomment following code and add select query like below.

method fill_list .
** data declaration
data lt_airline type wd_this->elements_airline.
data ls_airline like line of lt_airline.
select distinct carrid
from sflight
into table lt_airline.
* @TODO compute values
* e.g. call a data providing FuBa
* bind all the elements
node->bind_table(
new_items = lt_airline
set_initial_elements = abap_true ).
*

endmethod.


9. Double click on View. We would be designing the screen of our application with the following elements:

  1. ITEMLISTBOX
  2. BUTTON
  3. TABLE

10. Right click on ROOTUIELEMENTCONTAINER create element ITEMLISTBOX.

Set element ITEMLISTBOX’s Property as below:

Multiple Selections: Checked.

Bind DATASOURCE property of ITEMLISTBOX with AIRLINE node.

Bind TEXT property of ITEMLISTBOX with ID attribute of AIRLINE node.

11. Click on ROOTUIELEMENTCONTAINER create element TABLE.

12. Right click on TABLE element and select create binding.


13. click on ROOTUIELEMENTCONTAINER create element BUTTON

14. Create an action for BUTTON.

15. Now Double Click on ON_DISPLAY method and write following code.

METHOD onactionon_display .
* Data Declaration
DATA lo_nd_airline TYPE REF TO if_wd_context_node.
DATA lo_el_airline TYPE REF TO if_wd_context_element.
  DATA lt_elements TYPE wdr_context_element_set.
DATA ls_airline TYPE wd_this->element_airline.
DATA it_type TYPE wd_this->elements_airline.
  DATA lv_id LIKE ls_airline-id.
  DATA lo_nd_sflight TYPE REF TO if_wd_context_node.
DATA lo_el_sflight TYPE REF TO if_wd_context_element.
  DATA lt_sflight TYPE wd_this->elements_sflight.
DATA lt_sflight2 TYPE wd_this->elements_sflight.
DATA ls_sflight TYPE wd_this->element_sflight.
* navigate from  to  via lead selection
lo_nd_airline = wd_context->get_child_node( name = wd_this->wdctx_airline ).
lt_elements = lo_nd_airline->get_selected_elements( ).
  LOOP AT lt_elements INTO lo_el_airline.
    lo_el_airline->get_static_attributes( IMPORTING static_attributes = ls_airline ).
APPEND ls_airline TO it_type.
  ENDLOOP.                             " LOOP AT lt_elements  
  lo_nd_sflight = wd_context->get_child_node( name = wd_this->wdctx_sflight ).
     SELECT  carrid
connid
fldate
currency
planetype
FROM sflight
INTO TABLE lt_sflight.
  LOOP AT it_type INTO ls_airline.
LOOP AT lt_sflight INTO ls_sflight WHERE carrid = ls_airline-id.
APPEND ls_sflight TO lt_sflight2.
ENDLOOP. " LOOP AT lt_sflight
ENDLOOP. " LOOP AT it_type
* Bind Internal table with Table Element
lo_nd_sflight->bind_table( lt_sflight2 ).
ENDMETHOD.

16. Right Click on Web DynPro application and select Create Application.

17. Test Application.

OUTPUT :

Select multiple values by pressing CTRL button. And click on Display button. Data for selected values will be displayed in TABLE element like below.



No comments:

Tutorials on SAP-ABAP

Adobe Interactive Forms Tutorials

Business Server Pages (BSP)

Userexits/BADIs

Web Dynpro for ABAP (Step by step procedure for web dynpro,Tutorials on Web Dynpro,)

ALV Tutorials

Blog Archive

goodsites