Working with View plugs simple example

Working with view plugs in web dynpro ABAP, simple example on view plugs and view navigation in web dynpro ABAP

+ -

The below is the simple example of using view plugs in web dynpro for ABAP, hope you understand the concept of plugs in web dynpro abap

Step1: Go to SE80, create a web dynpro component ZSAPN_VIEW_PLUGS.

Go to SE80, select web dynpro component from drop down, provide name as ZSAPN_VIEW_PLUGS and press enter.

Web dynpro ABAP view plugs

Click on yes, provide description, continue(enter) and save it in a local object.

Web dynpro ABAP view plugs

Step2: Go to main view, insert a button

Go to change mode, expand views, double click on main view and right click on ROOTUIELEMENTCONTAINER -> Insert element.

Web dynpro ABAP view plugs

A popup will come, provide id as BT1 and type as button and enter.

Web dynpro ABAP view plugs

Select button ui element, provide text, create action method under events, a popup will code, provide action and description and enter.

Web dynpro ABAP view plugs

Step3: Create another view

Right click on view -> create

Web dynpro ABAP view plugs

A popup will come, provide name, description and enter.

Web dynpro ABAP view plugs

Save the component immediately(then only we can see second view).

Go to second view and insert button

Go to (double click) second view and right click on ROOTUIELEMENTCONTAINER -> insert element.

Web dynpro ABAP view plugs

A popup will come, provide id as BT2, type as button and enter.

Web dynpro ABAP view plugs

Select button, provide text, click on create under events, provide action and description and enter.

Web dynpro ABAP view plugs

Step4: Add inbound and outbound plugs

Go to main view, go to outbound plugs tab and add a plug as below.

Web dynpro ABAP view plugs

Go to main view, go to inbound plugs tab and add a plug as below.

Web dynpro ABAP view plugs

Repeat the same steps in SECOND view by adding plug names as IN_SECOND (inbound plug) and GOTO_MAIN (outbound plug).

Create navigation link

To use a view, we must embed it into a window(with out window we can not display a view), go to window(double click), drag and drop SECOND view onto window.

Web dynpro ABAP view plugs

Navigation link is a link between outbound and inbound plug, through which an outbound plug will identify the destination(target view).

Expand main view and right click on outbound plug -> create navigation link .

Web dynpro ABAP view plugs

Press F4 , select second view and enter .

Web dynpro ABAP view plugs

Similarly create navigation link for outbound plug of second view right click on GOTO_MAIN -> create navigation link, popup opens press F4, select MAIN and enter.

Step5: Fire outbound plg

When we call an outbound plug, we call that process as firing of outbound plug.

Go to main view, go to actions tab, double click on ON_BT1 method, click on code wizard, fire outbound plg.

Web dynpro ABAP view plugs

The below code will be generated.

 WD_THIS->FIRE_GOTO_SECOND_PLG(
    ). 

Similarly go to SECOND view, actions, double click on ON_BT2 method and fire outbound plug (GOTO_MAIN).

below code will be generated.

    WD_THIS->FIRE_GOTO_MAIN_PLG(
    ).

Step6: Create application and test

Save and activate the web dynpro component, right click on component name create -> web dynpro application, provide a name, enter save it in a local object.

Right click on application -> test.

Browser will open, click on go to second view, it will go to second view and click on go to previous view, it will go to main view.

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 17 People out of 19 think this lesson helpful


    Lesson Navigation

    ←Previous Chapter