Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
ramakrishnappa
Active Contributor
14,447

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

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

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

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

Create a view V_POPUP as below

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

Create container form from the context node INPUT  as below

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

Create action “OK”  on view V_POPUP as below

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

Embed the view V_POPUP into window W_POPUP as below

Active the WD component and create WD application as below

Output:

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

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

2 Comments
Labels in this area