Auto Align UI elements dynamically

[Former Member]

Hi Experts,

I have a requirements where I have 6 group UI elements on the screen and out of 6 , some should be made invisible dynamically. but when i do this dynamically by binding context to visible property, the place where the group was there is getting blank. but i want to align it dynamically so that there is no blank space in between.

I am using a matrix layout with 2 columns( head data, matrix data) 3 groups are head data and 3 are matrix data. when i make the 2nd row matrix data invisible the 3rd row head data should become to 2nd row matrix data and 3rd row matrix data should become head data.

Please let me know how to achieve this through using other layouts or how to handle this dynamically in matrix layout itself.

Thanks in advance.

Divakar

[Former Member]

Hi ,

How achieve this programatically in WDDOMODIFYVIEW ? ( Change the Layout Data )

Thanks

Divakar

[uday_gubbala2]

Hi Diwakar,

You would need to pass the id of your Group ui element and fetch its reference. You can then use any of the layout classes to set your desired layout. For example consider the same coding below in which I am dynamically creating:

1) A context node

2) Four attributes under this node

3) A group ui element with a caption associated with it

4) Four TextEdit ui elements & embedding them within the Group

As you can understand I would be setting the element properties dynamically.

Regards,

Uday

METHOD wddomodifyview.
  DATA: lr_container TYPE REF TO cl_wd_uielement_container,
        lr_group TYPE REF TO cl_wd_group,
        lr_caption_group TYPE REF TO cl_wd_caption,
        lr_textedit TYPE REF TO cl_wd_text_edit,
        lr_node_info TYPE REF TO if_wd_context_node_info,
        lr_node TYPE REF TO if_wd_context_node,
        lr_element TYPE REF TO if_wd_context_element,
        lr_attribute_info TYPE wdr_context_attribute_info,
        content TYPE string,
        attribute_name TYPE string,
	lv_textview_id TYPE string.

  CHECK first_time = abap_true.

  lr_node_info = wd_context->get_node_info( ).

  CALL METHOD lr_node_info->add_new_child_node
    EXPORTING
      name                         = 'CHILD'
      is_mandatory                 = abap_false
      is_multiple                  = abap_true
      is_multiple_selection        = abap_true
      is_singleton                 = abap_false
      is_initialize_lead_selection = abap_true
      is_static                    = abap_false
    RECEIVING
      child_node_info              = lr_node_info.


  lr_container ?= view->get_root_element( ).
cl_wd_matrix_layout=>new_matrix_layout( container = lr_container ).

  lr_group = cl_wd_group=>new_group( id = 'GROUP' ).
  lr_group->set_width( value = '50%' ).

  cl_wd_matrix_layout=>new_matrix_layout( container = lr_group ).
  cl_wd_matrix_head_data=>new_matrix_head_data( element = lr_group ).
  lr_caption_group = cl_wd_caption=>new_caption( text = 'Group Header' ).
  lr_group->set_header( the_header = lr_caption_group ).


  DO 4 TIMES.
    MOVE sy-index TO attribute_name.

** Preparing the data to be displayed in the textEdit i.e, data for context attribute
    CONCATENATE 'This'
                'is the'
                'data for textEdit number: '
                 attribute_name  INTO content SEPARATED BY cl_abap_char_utilities=>newline.

    CONCATENATE 'ATTR'
                attribute_name INTO attribute_name.

** Condense the ID to ensure that the format is consistent with SAP standard
    CONDENSE attribute_name NO-GAPS.

** Prepare properties of attribute & add to context node CHILD
    lr_attribute_info-name = attribute_name.
    lr_attribute_info-type_name = 'STRING'.
    lr_attribute_info-value_help_mode = '0'.

    lr_node_info->add_attribute( EXPORTING attribute_info = lr_attribute_info ).

    lr_node = wd_context->get_child_node( name = 'CHILD' ).
    lr_element = lr_node->create_element( ).

    lr_element->set_attribute( name  = attribute_name
                               value = content ).

    lr_node->bind_element( new_item             = lr_element
                           set_initial_elements = abap_false ).

** Compute the attribute path dynamically i.e, like CHILD.ATTR1
    CONCATENATE 'CHILD.'
                attribute_name INTO attribute_name.
    CONDENSE attribute_name NO-GAPS.
    lr_textedit = cl_wd_text_edit=>new_text_edit( cols  = 10
                                                  rows  = 5
                                                  width = '90%'
                                                  bind_value = attribute_name ).

    cl_wd_matrix_head_data=>new_matrix_head_data( element = lr_textedit ).

    lr_group->add_child( the_child = lr_textedit ).
  ENDDO.
  		
lr_container->add_child( the_child = lr_group ).
ENDMETHOD.

[uday_gubbala2]

Hi Diwakar,

First within your WDDOMODIFYVIEW declare a refernce variable of type cl_wd_group. Next pass the id of your Group & obtain its reference on your screen. Suppose your Groups id is G1 then you can get its reference by saying as:

lr_group ?= view->get_element( id = 'G1' ). " Here view is the parameter of WDDOMODIFYVIEW method

Next you can use any layout manager class to set the corresponding layout for this Group. Consider the small code snippet below. here I create a button & set its layout using the Matrix layout.

METHOD wddomodifyview .
  DATA: lr_container TYPE REF TO cl_wd_uielement_container,
        lr_button TYPE REF TO cl_wd_button.
 
  CHECK first_time = abap_true.
  lr_container ?= view->get_element( id = 'ROOTUIELEMENTCONTAINER' ).
  cl_wd_matrix_layout=>new_matrix_layout( container = lr_container ).
 
 
  lr_button = cl_wd_button=>new_button( id         = 'BUTTON'
                                        text       = 'My Button!'
                                        on_action  = 'ACTION' ).
  cl_wd_matrix_head_data=>new_matrix_head_data( element = lr_button ).
 
  lr_container->add_child( the_child = lr_button ).
ENDMETHOD.

You would be better off going through these excellent series of dynamic programming by Thomas Szuecs.

[Introduction and Part I: Understanding UI Elements|/people/thomas.szcs/blog/2005/12/28/dynamic-programming-in-web-dynpro-abap--introduction-and-part-i-understanding-ui-elements]

[Part II: Handling ViewElements|/people/thomas.szcs/blog/2006/01/03/dynamic-programming-in-web-dynpro-abap--part-ii-handling-viewelements]

[Part III: Aggregations and DDIC-Binding of ViewElements|/people/thomas.szcs/blog/2006/02/22/dynamic-programming-in-web-dynpro-abap--part-iii-aggregations-and-ddic-binding-of-viewelements]

Regards,

Uday

[Former Member]

Hi Thomas,

I tried using flow layout, but in flow layout i am not able to get 2 columns. I get only 1 column . how to get 2 columns using flow layout ?

Thanks

Divakar

[thomas_jung]

If you want a fixed number of columns, but with a flow based row wrapping - try the Grid Layout. You can set column count on the container element that controls the Layout for the items. You then wrap based upon filling this column count.

[thomas_jung]

Matrix layout isn't well suited to this kind of activity. This is exactly why we have other layouts like Flow to allow for the changing of the lines based upon the number of visible elements and the amount of available space. The suggestion would be to use the Flow based layout. Otherwise you are going to have to use the WDDOMODIFYVIEW to programatically change the layout data on the existing UI elements.

[Former Member]

We had the same problem in WD Java (MatrixLayout row of invisible elements still takes space) and fixed it in the meantime. So I would consider this as a bug in the current WD ABAP implementation and not as a drawback of MatrixLayout itself.

Armin