Creating UI Elements Dynamically

SAP Web Dynpro ABAP is an excellent tool to create huge data related applications easily and efficiently. However most of the time we create applications that has predefined screen design. So most of the people are quite unaware about manipulating UI elements dynamically. But Web Dynpro indeed has the capability to do anything dynamically. It is a perfect Object Oriented System just like Java Swing or .NET’s Forms. I would like to give a brief introduction on creating UI elements dynamically.

There is a simple rule. Whatever you want to do dynamically with the UI elements, you have to do at WDDOMODIFY function of the view. WDDOMODIFY will be called every time the screen updates. And the screen is updated every time an action takes place on the view.

The parameter VIEW is the key to access the UI elements of a view which is not available on other WD methods such as WDDOINIT. FIRST_TIME parameter is very useful to create and populate UI elements on the view during the start of the application.

Now we will see the architecture of UI elements. Each type of UI element has a corresponding class with name of the UI element preceded by CL_WD_. For example CL_WD_INPUT_FIELD is the class of the element input field. All these classes are similar to UI classes in Java Swing or .NET Forms. You can not only access any property of a UI element but also bind attributes of context nodes to any property using the methods available on these classes.

The following code will create a new input field and add it to view.

method WDDOMODIFYVIEW .
  data:
        input_field type ref to cl_wd_input_field,
        flow_data type ref to cl_wd_flow_data,
        uicont type ref to cl_wd_uielement_container.

  if first_time = abap_true.

    input_field = cl_wd_input_field=>new_input_field( 

            bind_value = 'NODE.TEXT' ).

    flow_data = cl_wd_flow_data=>new_flow_data( input_field ).
    input_field->set_layout_data( flow_data ).

    uicont ?= view->get_element( 'ROOTUIELEMENTCONTAINER' ).
    uicont->add_child( input_field ).

  endif.
endmethod.

The bind_value attribute carries the name of the attribute in the context node which should be bound to the input field (context nodes and attributes can also be created dynamically, I would like to write about that some other day). Here create the context node as follows.

Every UI element should have the layout information needed. So we have to add the layout information and this layout information should be compatible with the layout of the parent container. The following picture helps you understand what is layout information in the context of static input fields (This changes with the type of layout of the parent container).

By default, ROOTUIELEMENTCONTAINER has flow layout associated with it. We have added our input field to the root container.

Similarly CL_WD_GRID_DATA is the class for grid layout. Browse through SE24 and find the other layout classes.

Thus elements can be created dynamically and bound to context attributes.