Purpose: 

Demonstrate the scenario of opening a pop up window and perform validation on UI fields in pop up window in WEB DYNPRO ABAP.

Pre-requisite:  Basic knowledge of ABAP Objects & Webdynpro ABAP is assumed

Here I consider explaining, how we can validate the fields on a popup window and display the
errors to user without closing window.

User T. Code – SE80 and create WD component YDEMO_POPUP with window W_MAIN, view V_MAIN as below

/wp-content/uploads/2013/11/step1_323562.png

Create global attribute GO_WINDOW on component controller to hold the reference of popup window which can be accessed across all views in
component

/wp-content/uploads/2013/11/step2_323561.png

Create ui elements page header & a button as below.Here BTN_POPUP is bound to an action POP_UP

/wp-content/uploads/2013/11/step3_323563.png

Logic to open a popup window :

Add the code in event handler ONACTIONPOP_UP as below.

 


  DATA lo_window_manager TYPE REF TO if_wd_window_manager.
  DATA lo_api_component  TYPE REF TO if_wd_component.
  lo_api_component           = wd_comp_controller->wd_get_api( ).
  lo_window_manager          = lo_api_component->get_window_manager( ).
  " Create window
  CALL METHOD lo_window_manager->create_window(
    EXPORTING
      window_name       = 'W_POPUP'
      title             = 'User Input'
      close_button      = abap_true
      button_kind       = 3 " Ok
      close_in_any_case = abap_false
    RECEIVING
      window            = wd_comp_controller->go_window
                          ).
  " CHECK IF WINDOW REF BOUND
  IF wd_comp_controller->go_window IS BOUND.
    wd_comp_controller->go_window->open( ).
  ENDIF.

Create a node INPUT with 2 attributes FIRST_NAME & LAST_NAME as below

/wp-content/uploads/2013/11/step4_323570.png

Create a view V_POPUP as below

/wp-content/uploads/2013/11/step5_323571.png

Map the node INPUT from component controller context to view context as below

/wp-content/uploads/2013/11/step6_323572.png

/wp-content/uploads/2013/11/step6_2_323573.png

Create container form from the context node INPUT  as below

/wp-content/uploads/2013/11/step7_323574.png

/wp-content/uploads/2013/11/step7_2_323575.png

Set the Property STATE of input fields to “REQUIRED” as below

/wp-content/uploads/2013/11/step8_323576.png

Create action “OK”  on view V_POPUP as below

/wp-content/uploads/2013/11/step9_323577.png

Logic to close the popup window:

Add the below code in the event handler ONACTIONOK of view
V_POPUP

  " Close the window if now validation errors
  IF wd_comp_controller->go_window IS BOUND.
    wd_comp_controller->go_window->close( ).
  ENDIF.

Logic to subscribe the button to an event on view:

Add the below code in the method WDDOINIT of view V_POPUP


" Subscribe to button event on popup window
  IF wd_comp_controller->go_window IS BOUND.
    wd_comp_controller->go_window->subscribe_to_button_event(
      EXPORTING
        button            = if_wd_window=>co_button_ok
*        button_text       =
*        tooltip           =
        action_name       = 'OK'
        action_view       = wd_this->wd_get_api( )
*        is_default_button = ABAP_FALSE
    ).
  ENDIF.

Validation Logic:

Add the below code in the method WDDOBEFOREACTION of view
V_POPUP

 


DATA lo_api_controller TYPE REF TO if_wd_view_controller.
  DATA lo_action         TYPE REF TO if_wd_action.
  lo_api_controller = wd_this->wd_get_api( ).
  lo_action = lo_api_controller->get_current_action( ).
  IF lo_action IS BOUND.
    CASE lo_action->name.
      WHEN 'OK'.
        CALL METHOD cl_wd_dynamic_tool=>check_mandatory_attr_on_view
          EXPORTING
            view_controller  = lo_api_controller
            .
    ENDCASE.
  ENDIF.

Create window W_POPUP as below

/wp-content/uploads/2013/11/step10_323578.png

Embed the view V_POPUP into window W_POPUP as below

/wp-content/uploads/2013/11/step11_323579.png

Active the WD component and create WD application as below

/wp-content/uploads/2013/11/step12_323580.png

Output:

Click on button “open pop up” and the pop up window is open as below

/wp-content/uploads/2013/11/result1_323581.png

Click on Ok button to see the validation errors as mandatory fields are not filled

/wp-content/uploads/2013/11/result2_323591.png

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

Leave a Reply