Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
Webdynpro ABAP

Creating an UI element dynamically

 

 

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.

 

clip_image002

 

 

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.

 

clip_image004

 

 

Enter the name for the node and press enter.

 

clip_image006

 

 

Create an attribute in the context node as shown below.

 

clip_image008

 

 

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

 

clip_image010

 

 

Node and attribute will be created as below.

 

 

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.

 

clip_image012

 

 

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

 

clip_image014

 

 

 

 

 

 

 

 

 

 

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.

 

clip_image016

 

 

 

 

 

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.

 

clip_image018

 

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.

 

clip_image020

 

 

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.

 

clip_image022

 

 

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.

 

clip_image024

 

Create the input field as below.

 

clip_image026

 

 

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.

clip_image027

 

 

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

 

clip_image029

 

 

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

clip_image031

 

 

 

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:

 

clip_image032

About Arun

0 Comments:

Post a Comment

Powered by Blogger.