Dynamic creation of UI element and Context attribute in Web Dynpro ABAP-3

--------------------------------------------------------------------------------------------------------------
Post Details- This post shows how to create a context attribute and node dynamically.
After that creating UI elements like Label, Input Field, Button and Table dynamically.


Create a web dynpro component.

 Layout set is flow layout.

 To create a context attribute and a context node, change the WDDOINIT method.

Put the below code to create an attribute and Node dynamically.

 -------------------------------------------------------------------------------------------------------------
METHOD wddoinit .
  DATA :
         lr_node_info  TYPE REF TO if_wd_context_node_info,
         lr_node_info1 TYPE REF TO if_wd_context_node_info,
         ls_attr_info  TYPE        wdr_context_attribute_info.
  CALL METHOD wd_context->get_node_info
    RECEIVING
      node_info = lr_node_info.
  ls_attr_info-name = 'CARRID'.
  ls_attr_info-type_name = 'S_CARR_ID'.
* CREATE A CONTEXT ATTRIBUTE
  CALL METHOD lr_node_info->add_attribute
    EXPORTING
      attribute_info = ls_attr_info.
* Creating a context node with cardinality 'N'
  CALL METHOD cl_wd_dynamic_tool=>create_nodeinfo_from_struct
    EXPORTING
      parent_info    = lr_node_info
      structure_name = 'SFLIGHT'
      is_multiple    = abap_true
*     is_mandatory   = ABAP_FALSE
      node_name      = 'SFLIGHT'
    RECEIVING
      new_node       = lr_node_info1.
ENDMETHOD.

---------------------------------------------------------------------------------------------------------------
To Build UI element Dynamically change the WDDOMODIFYVIEW method.

-----------------------------------------------------------------------------------------------------------------------

METHOD wddomodifyview .

  DATA :

         lr_root_element TYPE REF TO if_wd_view_element,

         lr_container    TYPE REF TO cl_wd_uielement_container,

         lr_label        TYPE REF TO cl_wd_label,

         lr_input        TYPE REF TO cl_wd_input_field,

         lr_button       TYPE REF TO cl_wd_button,

         lr_table        TYPE REF TO cl_wd_table,

         lr_flow_data    TYPE REF TO cl_wd_flow_data,

         lr_node1        TYPE REF TO if_wd_context_node.

  IF first_time = abap_true.

    CALL METHOD view->get_element

      EXPORTING

        id      = 'ROOTUIELEMENTCONTAINER'

      RECEIVING

        element = lr_root_element.

    lr_container ?= lr_root_element.

* create a label

    CALL METHOD cl_wd_label=>new_label

      EXPORTING

        id        = 'L_FLIGHT_CODE'

        label_for = 'FLIGHT_CODE'

      RECEIVING

        control   = lr_label.

    CALL METHOD cl_wd_flow_data=>new_flow_data

      EXPORTING

        element = lr_label

      RECEIVING

        control = lr_flow_data.

    CALL METHOD lr_label->set_layout_data

      EXPORTING

        the_layout_data = lr_flow_data.

    CALL METHOD lr_container->add_child

      EXPORTING

        " index     = 1

        the_child = lr_label.

* Create an input field

    CALL METHOD cl_wd_input_field=>new_input_field

      EXPORTING

        bind_value = 'CARRID'

        id         = 'FLIGHT_CODE'

      RECEIVING

        control    = lr_input.

    CALL METHOD cl_wd_flow_data=>new_flow_data

      EXPORTING

        element = lr_input

      RECEIVING

        control = lr_flow_data.

    CALL METHOD lr_input->set_layout_data

      EXPORTING

        the_layout_data = lr_flow_data.

    CALL METHOD lr_container->add_child

      EXPORTING

        "   index     = 2

        the_child = lr_input.

* Creating a button

    CALL METHOD cl_wd_button=>new_button

      EXPORTING

        enabled   = 'X'

        id        = 'BTN'

        on_action = 'DISP_RECORD'

        text      = 'Display'

      RECEIVING

        control   = lr_button.

    CALL METHOD cl_wd_flow_data=>new_flow_data

      EXPORTING

        element = lr_button

      RECEIVING

        control = lr_flow_data.

    CALL METHOD lr_button->set_layout_data

      EXPORTING

        the_layout_data = lr_flow_data.

    CALL METHOD lr_container->add_child

      EXPORTING

*       index     = 3

        the_child = lr_button.

* Creating a table

    CALL METHOD wd_context->get_child_node

      EXPORTING

        name       = 'SFLIGHT'

      RECEIVING

        child_node = lr_node1.

    CALL METHOD cl_wd_dynamic_tool=>create_table_from_node

      EXPORTING

        ui_parent = lr_container

        table_id  = 'TAB1'

        node      = lr_node1

      RECEIVING

        table     = lr_table.

  ENDIF.

ENDMETHOD.

-----------------------------------------------------------------------------------------------------------------------

For the button the action is given as DISP_RECORD' . So create an action and change the event handler method.

 Put the code to read the attribute value and bind the table.

 --------------------------------------------------------------------------------------------------------------------
METHOD onactiondisp_record .
  DATA : 
        lv_carrid  TYPE          s_carr_id,
         lt_sflight TYPE TABLE OF sflight,
         lr_node1   TYPE REF TO   if_wd_context_node.
  CALL METHOD wd_context->get_attribute
    EXPORTING
      name  = 'CARRID'
    IMPORTING
      value = lv_carrid.
  SELECT * FROM sflight INTO CORRESPONDING FIELDS OF TABLE lt_sflight
                      WHERE carrid = lv_carrid.
  CALL METHOD wd_context->get_child_node
    EXPORTING
      name       = 'SFLIGHT'
    RECEIVING
      child_node = lr_node1.

  CALL METHOD lr_node1->bind_table
    EXPORTING
      new_items = lt_sflight.

ENDMETHOD.


---------------------------------------------------------------------------------------------------------------------

Create an application and test.

--------------------------------------------------------------------------------------------------------------

Dynamic creation of UI element and Context attribute in Web Dynpro ABAP-2

--------------------------------------------------------------------------------------------------------------

In this post UI elements like a Label and an input field is created dynamically and the input field is bound a context attribute created dynamically.


Create a web dynpro component.

 Layout set is flow layout.

 Go to the WDDOINIT method to create a context attribute dynamically.

Put the below code to create context attribute dynamically.

---------------------------------------------------------------

METHOD wddoinit .
  DATA :

     lr_node_info TYPE REF TO if_wd_context_node_info,
     ls_attr_info TYPE        wdr_context_attribute_info.

  CALL METHOD wd_context->get_node_info
    RECEIVING
      node_info = lr_node_info.

  ls_attr_info-name = 'CARRID'.
  ls_attr_info-type_name = 'S_CARR_ID'.
* CREATE A CONTEXT ATTRIBUTE
  CALL METHOD lr_node_info->add_attribute
    EXPORTING
      attribute_info = ls_attr_info.

ENDMETHOD.

----------------------------------------------------------------

To create dynamic UI element put the below code in WDDOMODIFYVIEW.

-----------------------------------------------------------------------------------------------------

METHOD wddomodifyview .

  DATA : lr_root_element TYPE REF TO if_wd_view_element,

         lr_container    TYPE REF TO cl_wd_uielement_container,

         lr_label        TYPE REF TO cl_wd_label,

         lr_input        TYPE REF TO cl_wd_input_field,

         lr_flow_data    TYPE REF TO cl_wd_flow_data.

  IF first_time = abap_true.

    CALL METHOD view->get_element

      EXPORTING

        id      = 'ROOTUIELEMENTCONTAINER'

      RECEIVING

        element = lr_root_element.

    lr_container ?= lr_root_element.

    CALL METHOD cl_wd_label=>new_label

      EXPORTING

        id        = 'L_FLIGHT_CODE'

        label_for = 'FLIGHT_CODE'

      RECEIVING

        control   = lr_label.

    CALL METHOD cl_wd_flow_data=>new_flow_data

      EXPORTING

        element = lr_label

      RECEIVING

        control = lr_flow_data.

    CALL METHOD lr_label->set_layout_data

      EXPORTING

        the_layout_data = lr_flow_data.

    CALL METHOD lr_container->add_child

      EXPORTING

       " index     = 1

        the_child = lr_label.

    CALL METHOD cl_wd_input_field=>new_input_field

      EXPORTING

        bind_value = 'CARRID'

        id         = 'FLIGHT_CODE'

      RECEIVING

        control    = lr_input.

    CALL METHOD cl_wd_flow_data=>new_flow_data

      EXPORTING

        element = lr_input

      RECEIVING

        control = lr_flow_data.

    CALL METHOD lr_input->set_layout_data

      EXPORTING

        the_layout_data = lr_flow_data.

    CALL METHOD lr_container->add_child

      EXPORTING

     "   index     = 2

        the_child = lr_input.

  ENDIF.

ENDMETHOD.

------------------------------------------------------------------------------------------------------

Create an application and test.

---------------------------------------------------------------------------------------------------------------

Dynamic creation of UI element in Web Dynpro ABAP-1

---------------------------------------------------------------------------------------------------------------
In this post UI elements like a Label and an input field is created dynamically and the input field is bound a context attribute designed statically.

Create a component and a context attribute.

The layout is FLOW Layout.

 To dynamically add UI elements the method WDDOMODIFYVIEW can be used.

 Put the below code to create a label and an input element.

---------------------------------------------------------------------------------------------------------------------

METHOD wddomodifyview .
  DATA : 

        lr_root_element TYPE REF TO if_wd_view_element,
        lr_container TYPE REF TO cl_wd_uielement_container,
        lr_label        TYPE REF TO cl_wd_label,
        lr_input        TYPE REF TO cl_wd_input_field,
        lr_flow_data    TYPE REF TO cl_wd_flow_data.

  IF first_time = abap_true.

    CALL METHOD view->get_element
      EXPORTING
        id      = 'ROOTUIELEMENTCONTAINER'
      RECEIVING
        element = lr_root_element.

    lr_container ?= lr_root_element.
* Creating a Label
    CALL METHOD cl_wd_label=>new_label
      EXPORTING
        id        = 'L_FLIGHT_CODE'
        label_for = 'FLIGHT_CODE'
      RECEIVING
        control   = lr_label.

    CALL METHOD cl_wd_flow_data=>new_flow_data
      EXPORTING
        element = lr_label
      RECEIVING
        control = lr_flow_data.

    CALL METHOD lr_label->set_layout_data
      EXPORTING
        the_layout_data = lr_flow_data.

    CALL METHOD lr_container->add_child
      EXPORTING
       " index     = 1
        the_child = lr_label.
* Creating an Input field
    CALL METHOD cl_wd_input_field=>new_input_field
      EXPORTING
        bind_value = 'CARRID'
        id         = 'FLIGHT_CODE'
      RECEIVING
        control    = lr_input.

    CALL METHOD cl_wd_flow_data=>new_flow_data
      EXPORTING
        element = lr_input
      RECEIVING
        control = lr_flow_data.

    CALL METHOD lr_input->set_layout_data
      EXPORTING
        the_layout_data = lr_flow_data.

    CALL METHOD lr_container->add_child
      EXPORTING
     "   index     = 2
        the_child = lr_input.

  ENDIF.
ENDMETHOD.

-----------------------------------------------------------------------------------------------------------

Create an application and test.

---------------------------------------------------------------------------------------------------------------

Enhancement of Web Dynpro Component

-----------------------------------------------------------------------------------------------
We can do enhancement of standard web dynpro component of the component controller or window controller or View Controller. This allows us to create the pre-exit, post-exit or overwrite-exit of the standard hooks methods.

For the demo we have taken a Z component but the same process can be followed for a standard web dynpro component.

Open the component in display mode and go to the component controller and select the Spiral button.

 The enhancement maintenance screen comes up.

 Provide an enhc. impl name and text and continue.

 We can observe, exits methods appeared for each methods. any logic can be maintained in any of the exit methods as per needed.

 Now we created enhancement for component controller. This also can be maintained for the view controller. Go to the VIEW and select the spiral button.

 Select the already created ehnc. impl or else we can create a new one.

 So the exit methods appeared in the view controller hooks methods. 

-----------------------------------------------------------------------------------------------

Use of Assistance Class in Web Dynpro ABAP

----------------------------------------------------------------------------------------------

We have a component that displays an ALV of the flight records.

 This is the component controller context design.

Component controller attributes.

 WDDOINIT method contains code to select the flight records.

We have the application test result as below.

Now we would like to use an assistance class in the web dynpro component. Before that let's create a class in Tx- SE24. Provide the class name.

 Create a method.

 Provide the exporting parameter.

 Provide the code.

Go to the web dynpro component. We can provide the assistance class here.

Maintain the class name here which is now treated as Assistance class.

In the component controller, attribute tab we find an object WD_ASSIST is created which points to the assistance class.

 Go to the WDDOINIT method and call the assistance class method to get the flight records.

 a check in debugging mode.

 And here we have the application test.

-----------------------------------------------------------------------------------------------