Example using Parameters in View Plugs in Web Dynpro ABAP


A+ A-

In the below example we will be using view parameters to pass data between views.

Requirement: Create a web dynpro component with two views, create an input element and button in first view, on button click display entered text in second view as textview.

Step1: Go to SE80, create a web dynpro component ZSAPN_VIEW_PLUG_PARAMS

Using Parameters in View Plugs Web Dynpro ABAP

Provide W_MAIN as window name and V_MAIN as view name, enter.

Using Parameters in View Plugs Web Dynpro ABAP

Save it in local object and activate.

Step2: Go to change mode, navigate to V_MAIN view, go to context and create a node 'INPUT' and add attribute 'NAME' 

Using Parameters in View Plugs Web Dynpro ABAP

Using Parameters in View Plugs Web Dynpro ABAP

Using Parameters in View Plugs Web Dynpro ABAP

Using Parameters in View Plugs Web Dynpro ABAP

Step3: Go to layout tab, right click on 'ROOTUIELEMENTCONTAINER', create element, provide ID as 'INPUT' and select 'Input Field' from dropdown.

Using Parameters in View Plugs Web Dynpro ABAP

Using Parameters in View Plugs Web Dynpro ABAP

An UI element will be create in layout, select input ui element and click binding icon and select 'name' from popup.

Using Parameters in View Plugs Web Dynpro ABAP

In the same way create one more UI element 'BUTTON'.

Using Parameters in View Plugs Web Dynpro ABAP

Double click on 'BUTTON', provide text as 'Go To Details' and create action method 'GOTO_DETAILS'

Using Parameters in View Plugs Web Dynpro ABAP

Using Parameters in View Plugs Web Dynpro ABAP

Step4: Go to outbound plugs tab and create an outbound plug 'OUT_MAIN', double click on 'OUT_MAIN', add 'NAME' type string under parameters in bottom pane.

Using Parameters in View Plugs Web Dynpro ABAP

Step5: Now to actions tab, read input value from node 'INPUT' using code wizard and call outbound plug (see complete logic below).

   DATA lo_nd_input TYPE REF TO if_wd_context_node.
   DATA lo_el_input TYPE REF TO if_wd_context_element.
   DATA ls_input TYPE wd_this->element_input.
   DATA lv_name TYPE wd_this->element_input-name.
*  navigate from <context> to <input> via lead selection
   lo_nd_input = wd_context->get_child_node( name = wd_this->wdctx_input ).
*  get element via lead selection
   lo_el_input = lo_nd_input->get_element( ).
*  @TODO handle not set lead selection
   IF lo_el_input IS INITIAL.
   ENDIF.
*  get single attribute
   lo_el_input->get_attribute(
     EXPORTING
       name =  `NAME`
     IMPORTING
       value = lv_name ).
  wd_this->fire_out_main_plg(
    name = lv_name                             " string
  ).

Step6: Now create a view V_DETAILS, right click on 'views', create, provide name as 'V_DETAILS' and description, enter.

Using Parameters in View Plugs Web Dynpro ABAP

Go to context, right click -> Create -> Node, provide node name as 'DISPLAY'

Using Parameters in View Plugs Web Dynpro ABAP

Right click on 'DISPLAY' -> Create -> Attribute

Using Parameters in View Plugs Web Dynpro ABAP

Step7: Go to layout, right click on 'ROOTUIELEMENTCONTAINER' -> Insert element -> Textview.

Using Parameters in View Plugs Web Dynpro ABAP

Select 'TEXETVIEW' and click on binding for 'text' property, select name.

Using Parameters in View Plugs Web Dynpro ABAP

Step8: Go to inbound plugs, add'IN_DETAIL', enter, double click on 'HANDLEIN_DETAIL'.

Using Parameters in View Plugs Web Dynpro ABAP

Double click on 'HANDLEIN_DETAIL', add a parameter 'NAME'  

Using Parameters in View Plugs Web Dynpro ABAP

Set value to node 'DETAILS' attribute 'NAME' using code wizard, complete logic is below.


    DATA lo_nd_display TYPE REF TO if_wd_context_node.
    DATA lo_el_display TYPE REF TO if_wd_context_element.
    DATA ls_display TYPE wd_this->element_display.
    DATA lv_name TYPE wd_this->element_display-name.
    lo_nd_display = wd_context->get_child_node( name = wd_this->wdctx_display ).
*   get element via lead selection
    lo_el_display = lo_nd_display->get_element( ).

    IF lo_el_display IS INITIAL.
    ENDIF.
    lo_el_display->set_attribute(
      name =  `NAME`
      value = name ).

Step9: Go to window, drag and drop V_DETAILS on to W_MAIN.

Using Parameters in View Plugs Web Dynpro ABAP

Expand V_MAIN, right click on OUT_MAIN -> Create Navigation link.

Using Parameters in View Plugs Web Dynpro ABAP

Step10: Activate component, create application and test.


Learner Questions

No Questions by learners, be first one to ask ..!!

    Please Sign in to ask a question


    Was this lesson helpful to you? Yes No 0 People out of 1 think this lesson helpful

    Lesson Navigation

    ←Previous Chapter
    Next Lesson → Component Controller and Types of binding