Creating UI Elements Dynamically
Oct 4, 2012
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.
VIEW is the key to access the UI elements of a view which is not available on other WD methods such as
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.
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).
ROOTUIELEMENTCONTAINER has flow layout associated with it. We have added our input field to the root container.
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.