Skip to Content

Purpose:

Application to demonstrate the scenario of making table cells as editable or non-editable dynamically

Scenario:

I would like to explain the steps involved in making table cells as editable / non-editable dynamically with a simple example.

I would like to have a simple table for collecting employee data with the functionalility of locking / unlocking individual cells based on values .

i.e. lock / unlock only the cells which contains any value

Pre-requisite:

Basic knowledge of Webdynpro ABAP & OO ABAP

Step by step Process

Step 1:

Go to t-code SE80 and create a Web Dynpro component as below

1.PNG

Step 2:

Go to context tab of the view V_MAIN and create a node “DATA” as below

Attributes:

FIRST_NAME, SECOND_NAME, EMAIL, COUNTRY of type STRING

CONTACT of type NUMC10

2.PNG

Step 3:

Go to the layout tab of view V_MAIN and add an ui element table ‘TBL_EMP_DATA’ and create binding to the context node “DATA” as below

3.PNG

Step4:

Create a button “BTN_LOCK” for locking or setting cells as non-editable and create and action “LOCK” and bind it to the event ONCLICK as below

4.PNG

Step 5:

Create a button “BTN_UNLOCK” for unlocking or setting cells as editable and create and  bind it to the event ONCLICK as below

5.PNG

Now, add the below code to make table cells as editable / non editable based on cell value

i.e., lock/unlcok only if cell contains any value

ONACTIONLOCK

METHOD onactionlock .
  DATA lv_btn_name    TYPE string.
  DATA lv_lock        TYPE wdy_boolean.
  DATA lo_node        TYPE REF TO if_wd_context_node.
  DATA lt_elements    TYPE wdr_context_element_set.
  DATA ls_elements    LIKE LINE OF lt_elements.
  DATA lt_attr_names  TYPE string_table.
  DATA lv_attr_name   LIKE LINE OF lt_attr_names.
  DATA ls_data        TYPE wd_this->element_data.

  “get button name
  wdevent->get_data(
      EXPORTING name = ‘ID’
      IMPORTING value = lv_btn_name ).

  ” Prepare the locking/unlocking value based on button
  CASE lv_btn_name.
    WHEN ‘BTN_LOCK’.
      lv_lock = abap_true.
    WHEN ‘BTN_UNLOCK’.
      lv_lock = abap_false.
    WHEN OTHERS.
      lv_lock = abap_false.
  ENDCASE.

  “=================================
  ” Read node data and set the read only properties of cells
  “=================================

  FIELD-SYMBOLS: <fs_value> TYPE any.

  lo_node = wd_context->get_child_node( name = wd_this->wdctx_data ).

  lt_elements = lo_node->get_elements(
  ).

  “get the attributes list

  lt_attr_names =
  lo_node->get_node_info( )->get_attribute_names( ).

LOOP AT lt_elements INTO ls_elements.

    ls_elements->get_static_attributes(
      IMPORTING
        static_attributes = ls_data
    ).

    LOOP AT lt_attr_names INTO lv_attr_name.

      UNASSIGN <fs_value>.
      ASSIGN COMPONENT lv_attr_name OF STRUCTURE ls_data TO <fs_value>.

      IF <fs_value> IS NOT INITIAL.

        ls_elements->set_attribute_property(
          EXPORTING
            attribute_name = lv_attr_name
            property       = if_wd_context_element=>e_property-read_only
            value          = lv_lock
        ).

      ENDIF.
    ENDLOOP.
  ENDLOOP.

ENDMETHOD.

To set the property READ_ONLY of cells to its context attribute property “read_only”  dynamically, add the below code in WDDOMODIFYVIEW( ) method of view V_MAIN

WDDOMODIFYVIEW

METHOD wddomodifyview .
  IF first_time EQ abap_true.
    DATA lo_table         TYPE REF TO cl_wd_table.
    DATA lt_grp_cols      TYPE cl_wd_abstr_table_column=>tt_abstr_table_column.
    DATA ls_grp_cols      LIKE LINE OF lt_grp_cols.

    DATA lt_cols          TYPE cl_wd_table_column=>tt_table_column.
    DATA ls_cols          LIKE LINE OF lt_cols.

    DATA lo_inp           TYPE REF TO cl_wd_input_field.
    DATA lv_path          TYPE string.

    “Get table reference
    lo_table ?= view->get_element(‘TBL_EMP_DATA’).

    “Get Columns of table

    lt_cols = lo_table->get_columns( ).

    “Check if no columns found
    IF lt_cols[] IS INITIAL.

      “get grouped columns list
      lt_grp_cols = lo_table->get_grouped_columns( ).

      “collect into columns table
      LOOP AT lt_grp_cols INTO ls_grp_cols.
        ls_cols ?= ls_grp_cols.
        APPEND ls_cols TO lt_cols.
      ENDLOOP.
    ENDIF.

    “For each column and its editor, set the read only property
    LOOP AT lt_cols INTO ls_cols.

      ” get the cell editor,
      lo_inp ?= ls_cols->get_table_cell_editor( ).

      IF lo_inp IS BOUND.
        lv_path =  lo_inp->bound__primary_property( ).

        CONCATENATE lv_path ‘READ_ONLY’ INTO lv_path SEPARATED BY ‘:’.

     

      “bind the read_only property to the attributes property

        lo_inp->bind_read_only( path = lv_path ).
      ENDIF.

    ENDLOOP.
  ENDIF.

ENDMETHOD.

Step 6:

Now, for adding rows, create a tool bar button “BTN_ADD” and create an action “ADD_ROW” , bind it to the event “OnClick” as below

5_1.PNG

Add the below code in event handler “ONACTIONADD_ROW”

ONACTIONADD_ROW

METHOD onactionadd_row .
  DATA lo_nd_data TYPE REF TO if_wd_context_node.
  DATA lt_data TYPE wd_this->elements_data.

*   navigate from <CONTEXT> to <DATA> via lead selection
  lo_nd_data = wd_context->get_child_node( name = wd_this->wdctx_data ).

  “add a row
  CLEAR lt_data.
  APPEND INITIAL LINE TO lt_data.

  lo_nd_data->bind_table(
    EXPORTING
      new_items            =  lt_data
      set_initial_elements = abap_false
  ).
ENDMETHOD.

Step 7:

For deleting rows, create a tool bar button “BTN_REMOVE” create an action “REMOVE_ROW” , bind it to the event “OnClick” as below

5_2.PNG

Add the below code in event handler “ONACTIONREMOVE_ROW”

ONACTIONREMOVE_ROW

method ONACTIONREMOVE_ROW .

  data lo_node      TYPE REF TO if_wd_context_node.
  data lt_elements  TYPE wdr_context_element_set.
  data ls_elements  like LINE OF lt_elements.

  lo_node = wd_context->get_child_node( name = wd_this->wdctx_data  ).

  “get selected row(s) data
  lt_elements = lo_node->get_selected_elements( ).

  LOOP AT lt_elements into ls_elements.
    lo_node->remove_element( element = ls_elements ).
  ENDLOOP.
endmethod.

Save the component and activate.

Step 8:

Create an webdynpro applicaiton as below

6.PNG

Output:

Initially, table is empty and add no. of rows by using “Add Rows” tool bar button and enter the employee data and click on LOCK ENTRIES button as below

o1.PNG

Now, the table cells with values  are marked as non-editable,

o2.PNG

Now, click on “Unlock Entries” button to make the table cells as editable again

o3.PNG

Now, the 3rd row data is changed and again click on “Lock Entries” button to make table cells as non-editable again

o4.PNG

Hope this helps for those who are looking for how to make table cells as editable / non-editable dynamically.

I appreciate your comments/feedback/suggestions  


Rating / Likes motivate me to post more such documents

To report this post you need to login first.

18 Comments

You must be Logged on to comment or reply to a post.

    1. Ramakrishnappa Gangappa Post author

      Hi Sandeep,

      I am glad that its helpful for you.

      Please check your sdn query for the answer. You can make use of core ui classes instead of abstract class.

      I am updating document with the same.

      Regards,

      Rama

      (0) 
  1. Sarath Babu

    Hi Ramakrishnappa,

                            Thanks very much. Was looking for an appropriate method in the IF_WD_CONTEXT_NODE to set the ‘read_only’ property of elements. Fortunately I came across this document which contained everything I needed. Please keep posting such essential tips in Webdynpro.  

    (0) 
  2. Balajisha T V

    Hi Ramakrishnappa,

    Really a wonderfull document, thanks for sharing it.

    Currently i am also facing an issue with regard to dis-abling of a check-box in the Table UI. Could you please help us in this regard or you can also update a additional part in the above document.

    Thanks

    (0) 
        1. Balajisha T V

          Hi Rama,

          we have a requirement like “A predefined word doc template should always be available to download from a webdynpro component”.

          We were able to upload/download the documents, but how to keep a predefined format once for all in the webdynpro component.

          Please let me know your thoughts, so that i can create thread for this

          (0) 

Leave a Reply