Dynamically creating the UI element

Uncategorized October 4, 2012

Each UI element in the Webdynpro ABAP consists of a class using which we can place the UI elements dynamically on the screen.

Now lets see how to create these UI element dynamically.

Step 1: Go the Tcode SE80( Object Navigator ) and create a webdynpro component.

Assign the component to the package or save it in the loacl object.

Step 2: Go to the context tab of the view controller and create the context node as below.

Enter the name for the node and press enter.

Create an attribute in the context node as shown below.

Enter the name and type for the attribute and press enter.

Node and attribute is now created.

Step 3: Go to wddomodifyview method of the view controller.

In the method, check the importing variable first_time to avoid repeated calling of the codings and creating UI elements each time the method is called. The codings written within the condition will be executed only for the first time the method domodify view is called.

Step 4: Get the object reference for the root ui element container.

There is an importing parameter in the method do modify view called view referring to the interface of type if_wd_view. Calling the method get_element of this interface will provide the Specific elements of the view.

Also we have a class for the root container ui element cl_wd_uielement_container. Create a reference variable of that type obtain the reference for the root container UI element.

The method get_element is returning the object reference of type if_wd_view_element.

In the below diagram, you will be able to see the interface if_wd_view_element being implemented by the class cl_wd_uielement_container which indirectly makes the interface as the super class and the implementing class as the subclass.

Since we are assigning a object of type more genric(Superclass) to the target variable of type specific (Subclass). Hence we must assign the object using the widening cast.

Write the codings as below.

Thus now we have got the controller of the root container UI element in the reference variable lo_container using which we can add UI elements.

Step 5 : Before adding an UI element to the root container UI element we need to create it. Now let us create an Input field UI element using the class of the input field cl_wd_input_field.

There is a public static method call new input field in the class cl_wd_input_field using which we will be able to create an input field. This method will also return the control to the input field created.

Create the input field as below.

Using the object reference in lo_input we can now control the properties of the input field created.

Step 6: Set the layout property of the input field. There is a method call set_layout_data in the class for the input field cl_wd_input_field. This method will help you to set the layout of the input field.

Set the layout property of the root container ui element as matrix layout.

Create an object of type matrix layout and pass it to the set layout data method of the input field.

Step 7: Add the input field to the UI Element container as shown below.

Codings in the wddomodifyview

if first_time = ABAP_TRUE.

** Step1: Get the object reference of the ROOTUIELEMENTCONTAINER. *-

* Create a reference variable to the type of class cl_wd_uielement_container. data : lo_container type ref to cl_wd_uielement_container.

* Getting the element reference for the root container UI element.

* since the class cl_wd_uielement_container has implemented the interface IF_WD_VIEW_ELEMENT * which makes the interface like a super class and cl_wd_uielement_container as its subclass. * Hence assigning the object from the more general view to variable of less specific view * we are going for widending cast. (According to version less than 7.0)

lo_container ?= view->get_element( ROOTUIELEMENTCONTAINER ).

*-

** Step 2: Setting an input field on the view *-

* There is a class for input field called CL_WD_INPUT_FIELD which contains a public static method * called new_input_field which creates an input field and return the control of the input field UI * element in a reference variable of the type CL_WD_INPUT_FIELD with which we will be able to contol * all the attributes of the input field.

data : lo_input type ref to cl_wd_input_field.

CALL METHOD CL_WD_INPUT_FIELD=>NEW_INPUT_FIELD EXPORTING BIND_VALUE = NODE.ATTRIBUTE ID = INPUT1 RECEIVING CONTROL = lo_input .

** Step 3: setting the layout for the input field. *-

*If we dont set a layout for the input field we will get a dump stating that the no layout exists * for the following UI element. * To set a layout to the input field there is a method called set_layout_data which sets the layout * data for the input field. This method require a control for the type of layout which is of the type * CL_WD_LAYOUT_DATA * There exists a different class for the layouts and there will be method which will return the control * of the required type.

* Getting the control of the required type using the class for matrix head data.

data : lo_matrix type ref to cl_wd_matrix_head_data.

CALL METHOD CL_WD_MATRIX_HEAD_DATA=>NEW_MATRIX_HEAD_DATA EXPORTING ELEMENT = lo_input RECEIVING CONTROL = lo_matrix .

* Set the layout data for the input field.

CALL METHOD lo_input->SET_LAYOUT_DATA EXPORTING THE_LAYOUT_DATA = lo_matrix .

** Step 4: Adding the input field to the UI Element contanier *-

* Using the control of the root contanier ui element add the input field to the root container UI * element passing the control of the input field.

CALL METHOD lo_container->ADD_CHILD EXPORTING index = 1

THE_CHILD = lo_input .

endif.

Save and activate the whole component. Create an application and test the component.

Output: