Skip to Content
Author's profile photo Kiran Kumar Valluru

Auto Align UI Elements Dynamically in Web Dynpro ABAP

Introduction

This document helps how to Auto align UI elements if there are any hidden UI elements in Web Dynpro ABAP.


Here I will demonstrate a simple scenario to hide some UI elements for a particular user and then Reorder the alignment of UI elements.

Step by Step Process

Step 1: Create a Web Dynpro Component.

Go to the SE80 transaction and create a Web Dynpro Component.

/wp-content/uploads/2014/01/1_355693.jpg


Enter Description and click on OK.

/wp-content/uploads/2014/01/2_355703.jpg

Step 2: Data Binding

Go to the Context tab of Main View and create a node MATERIAL.

/wp-content/uploads/2014/01/3_355704.jpg

Enter dictionary structure MARA and click on ‘Add attributes from structure’.

/wp-content/uploads/2014/01/4_355705.jpg

Select the required fields and click on OK.

/wp-content/uploads/2014/01/5_355706.jpg


Step 3: Layout Design.

   Now Go to Layout tab, and click on Web Dynpro Code Wizard( magic symbol button).

/wp-content/uploads/2014/01/6_355707.jpg

Double click on Form to create the input UI elements in Transparent container and bind them.

/wp-content/uploads/2014/01/7_355708.jpg

Click on context and select the MATERIAL Node.

/wp-content/uploads/2014/01/8_355712.jpg

Click on Continue.

/wp-content/uploads/2014/01/9_355713.jpg

Now we can see the all the input UI elements and labels are created automatically in a transparent container. Delete the unnecessary TEXT_VIEW UI element.

/wp-content/uploads/2014/01/10_355714.jpg

Now align the UI elements in the transparent container and select the label ERSDA_LBL, under properties click on bind button for Visible property.

/wp-content/uploads/2014/01/11_355736.jpg

Select the required attribute( ERSDA ), And select the radio button ‘Bind to the property of selected Attribute’ and select ‘Visible’ property. click on OK.

/wp-content/uploads/2014/01/12_355737.jpg

Similarly, select input field  ERSDA, under properties click on bind button for Visible property. Bind it to same attribute( ERSDA ), And select the radio button ‘Bind to the property of selected Attribute’ and select ‘Visible’ property. click on OK.

/wp-content/uploads/2014/01/13_355738.jpg

Now goto Methods tab, and enter below code in WDDOINIT method.


WDDOINIT
METHOD wddoinit .

   DATA lo_nd_material TYPE REF TO if_wd_context_node.
   DATA lo_el_material TYPE REF TO if_wd_context_element.

   lo_nd_material = wd_context->get_child_node( name = wd_this->wdctx_material ).

   lo_el_material = lo_nd_material->get_element( ).

   IF syuname = ‘KIRAN_V’.
*   For this user hide the ‘Created On’ field
     lo_el_material->set_attribute_property(
       attribute_name   `ERSDA`
         property       = lo_el_material->e_propertyvisible
         value          = abap_false ).
   ENDIF.

ENDMETHOD.


Now Save and Activate the Web Dynpro Component.

Create Application.

Create Web Dynpro Application and save it.

/wp-content/uploads/2014/01/14_355743.jpg

Enter description and save it.

/wp-content/uploads/2014/01/15_355744.jpg


Now right click on web dynpro application and click on Test.

/wp-content/uploads/2014/01/18_355751.jpg

Result:

Now you can see the output in browser with all the UI elements visible and neatly aligned for other users.

/wp-content/uploads/2014/01/16_355752.jpg

Problem:

Suppose if the user ‘KIRAN_V’ ( to whom the ‘Created on’ UI has to be hidden) is logged on and execute the application, we can see the UI element ‘Created On’ is hidded and there is an empty gap in the layout which doesn’t make it look good!

/wp-content/uploads/2014/01/17_355760.jpg

Solution:


Write the below code in WDDOMODIFYVIEW method.

WDDOMODIFYVIEW
METHOD wddomodifyview .

   DATA: lr_container         TYPE REF TO cl_wd_transparent_container,
         lt_child                    TYPE cl_wd_uielement=>tt_uielement,
         lr_matrix_head_data TYPE REF TO cl_wd_matrix_head_data,
         lr_matrix_data          TYPE REF TO cl_wd_matrix_data,
         lv_visible                  TYPE wdui_visibility,
         lv_total_columns      TYPE i VALUE 4, ” Change it based on your total columns
         lv_cur_col                TYPE i,
         lf_line_break            TYPE boole_d.

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

*  Get the Transparent Container
   lr_container ?=  view->get_element( ‘TRANSPARENT_CONTAINER ‘ ).
*  Get All UI elements in the Transparent container
   lt_child = lr_container->get_children( ).

   LOOP AT lt_child ASSIGNING <lr_uielement>.
*   Get Visibility of UI element
     lv_visible = <lr_uielement>->get_visible( ).
     IF lv_visible = ’01’. ” If UI Element is Hidden
*     Remove the UI element; To be used only for one time hidden UI element(s) scenario
       lr_container->remove_child( id = <lr_uielement>->id ).
     ENDIF.
   ENDLOOP.

*  Get the New Visible UI elements in the Transparent container
   lt_child = lr_container->get_children( ).

*  Align the Layout without empty spaces of hidden UI elements
   LOOP AT lt_child ASSIGNING <lr_uielement>.
     lv_cur_col = lv_cur_col + 1.
     IF lv_cur_col = 1.
       lf_line_break = abap_true.
     ELSE.
       lf_line_break = abap_false.
     ENDIF.
     IF lf_line_break = abap_true.
       lr_matrix_head_data = cl_wd_matrix_head_data=>new_matrix_head_data( <lr_uielement> ).
       <lr_uielement>->set_layout_data( lr_matrix_head_data ).
     ELSE.
       lr_matrix_data = cl_wd_matrix_data=>new_matrix_data( <lr_uielement> ).
       <lr_uielement>->set_layout_data( lr_matrix_data ).
     ENDIF.
     IF lv_cur_col = lv_total_columns.
       CLEAR lv_cur_col.
     ENDIF.
   ENDLOOP.

ENDMETHOD.

Save and activate the component and test the application.

/wp-content/uploads/2014/01/19_355834.jpg

Now we can see that the UI elements are aligned in a proper order without the empty spaces left by Hidden UI elements.

Conclusion

This can be used according to yourrequirements by changing the total number of columns. Note that the above generic solution works for one time hidden UI elements scenario such as – Hide UI elements for particular user or based on some values. But not for hiding and showing UI elements(again) based on actions. In such cases, you have to add the child to the transparent container back dynamically in the corresponding action handler method.

Assigned Tags

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

      Finally we got a solution for this situation. I also tried the same thing but some issue was coming. Thanks for writing and sharing with us. I will try this in all cases and if i got any doubt i will ask you.

      Thanks again.

      Author's profile photo Manoj Mohanty
      Manoj Mohanty

      Wow... Got the solution for my issue. Thanks for sharing.