Skip to Content
Author's profile photo Ramakrishnappa Gangappa

How to Hide UI Elements & Adjust View Layout Dynamically in Web Dynpro ABAP


Demonstrate the scenario of hiding view UI elements and aligning the elements in view layout dynamically by using recursive search


If we need to hide some view ui elements from layout dynamically, there is always the issue with the alignement of view ui elements.

In many of our applications, we need to have may UI element containers nested and deeply structured. Hence if we need to get one ui element by its ID dynamically, it is required to search in all available containers in the view layout. Hence, to search/ find the ui elements at any level, the recursive logic makes it so simple.

So, here I would like to explain the procedure to hide view ui elements and auto align them in view layout dynamically using recursive method call.

Key factor :

                    If we just set the visibility property of ui element to NONE, the element is hidden but the layout space still exists.


                    Hence we need to remove the element from view layout to make space for the following element.

                    Problem: We cannot get the removed element back again if we need to make it visible because its no more in the layout


                    Solution: We need to reset the view and build the view tree hierarchy by using standard view method VIEW->RESET_VIEW( )


Basic knowledge of Webdynpro ABAP & OO ABAP

Step by Step Process:


Create the WDA component by using T-Code SE80, and give the details as below and save the data.


Step 2:

Go to the context tab of view V_MAIN and create the context node FIELDS  ( using table PA0001 ) and a context attribute HIDDEN_FIELD of type STRING as below


Step 3:

Create the view layout as below


Step 4:

Create a method SET_VISIBILITY( ) with parameters ID_FIELD_TO_BE_HIDDEN & IO_CONTAINER as below


Add the below code into SET_VISIBILITY( )


METHOD set_visibility .

  DATA lo_container       TYPE REF TO cl_wd_uielement_container.
  DATA lo_view_elm        TYPE REF TO cl_wd_view_element.
  DATA lt_children        TYPE cl_wd_uielement=>tt_uielement.
  DATA lo_wdr_view_elm    TYPE REF TO cl_wdr_view_element.
  DATA lo_layout_data     TYPE REF TO cl_wd_layout_data.
  DATA lb_set_layout_data TYPE wdy_boolean.

  FIELD-SYMBOLS: <fs_element> TYPE REF TO cl_wd_uielement.

  CLEAR lb_set_layout_data.
  FREE lo_layout_data.

  ” Return if nothing to do
  IF id_field_to_be_hidden IS INITIAL OR
     io_container IS NOT BOUND.



  ” Get the children of the given container
  CLEAR lt_children.

  lt_children = io_container->get_children( ).

  LOOP AT lt_children ASSIGNING <fs_element>.

    IF <fs_element>->id CS id_field_to_be_hidden.

      ” Get the layout data of the first field to be hidden
      IF lo_layout_data IS NOT BOUND AND
         lb_set_layout_data EQ abap_false.

        lo_layout_data = <fs_element>->get_layout_data( ).
        lb_set_layout_data = abap_true.

      Remove the element from the container
          id        = <fs_element>->id


      ” make the ui element visible
      <fs_element>->set_visible( cl_wd_uielement=>e_visiblevisible ).

      ” Check if layout data needs to be set ?
      IF lb_set_layout_data EQ abap_true AND lo_layout_data IS BOUND.

        ” Set the layout data of first removed ui elment
        <fs_element>->set_layout_data( lo_layout_data ).

        FREE lo_layout_data.
        CLEAR lb_set_layout_data.


      “Is the ui element container?
      lo_view_elm ?= <fs_element>.

      IF lo_view_elm->_is_ui_element_container EQ abap_true.
        lo_container ?= <fs_element>.

      ” Is container has any children ?
      IF lo_container IS BOUND AND
        lo_container->has_children( ) EQ abap_true.

        ” Recursive call for handling children
        CALL METHOD wd_this->set_visibility(
            id_field_to_be_hidden = id_field_to_be_hidden
            io_container          = lo_container




Step 5:

Add the below code in WDDOMODIFYVIEW(  )


METHOD wddomodifyview .

  DATA lv_hidden_fld  TYPE wd_this->element_contexthidden_field.
  DATA lo_container   TYPE REF TO cl_wd_uielement_container.

  FIELD-SYMBOLS: <fs_ui_element> TYPE REF TO cl_wd_uielement.


  ” get the name of field to be hidden from the context
    name = ‘HIDDEN_FIELD’
    value = lv_hidden_fld ).

  TRANSLATE lv_hidden_fld TO UPPER CASE.

  ” Rebuild/ reset the view layout
    view->reset_view( ).

  ” Get the root ui element container ref.
FREE lo_container.
  lo_container ?= view->get_root_element( ).

  “set the visibility property of the given ui element
  CALL METHOD wd_this->set_visibility
      id_field_to_be_hidden = lv_hidden_fld
      io_container          = lo_container.



Initial output :


Now, we are going to hide the field “Personnel No.” as below


Final out put after hiding the field “Personnel No.” and End Date takes its position


Hope this helps for those who are looking for handling view ui elements & its layout dynamically.

Comments/suggestions are always welcome

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Chandra Shekhar Agarwal
      Chandra Shekhar Agarwal

      I think this document is already published by Kiran Kumar Valluru..

      Auto Align UI Elements Dynamically in Web Dynpro ABAP

      Author's profile photo Ramakrishnappa Gangappa
      Ramakrishnappa Gangappa
      Blog Post Author

      Hi Chandra,

      Thanks for your comments. 🙂

      I know Mr. Kiran, has created similar document but his document do not cater for the requirement of repeated hide/visible of a field. Also, here the approach differs from that document