Skip to Content
Author's profile photo Ramakrishnappa Gangappa

How to make table cells as editable / non-editable dynamically in Web Dynpro ABAP

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

Assigned tags

      18 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Abhishek Sharma
      Abhishek Sharma

      Thanks a lot.. It helped me.

      Author's profile photo Ramakrishnappa Gangappa
      Ramakrishnappa Gangappa
      Blog Post Author

      HI Abhishek,

      Its good to know that this document is helpful.

      Regards,

      Rama

      Author's profile photo Former Member
      Former Member

      Thanks really I implemented this and it worked but I am stuck where I have a checkbox in my row and its not getting readonly as I am not getting the associated class .

      Please ref my sdn open question for the same and please try to provide the solution

      Looking for WD Abstract class for check box for table cell editor

      Author's profile photo Ramakrishnappa Gangappa
      Ramakrishnappa Gangappa
      Blog 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

      Author's profile photo Former Member
      Former Member

      Again need your assistance kindly check out the sdn

      Looking for WD Abstract class for check box for table cell editor

      Author's profile photo Sarath Babu
      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.  

      Author's profile photo Ramakrishnappa Gangappa
      Ramakrishnappa Gangappa
      Blog Post Author

      Thank you Sarath 🙂 I am glad that it helped you.

      Regards,

      Rama

      Author's profile photo Balajisha T V
      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

      Author's profile photo Ramakrishnappa Gangappa
      Ramakrishnappa Gangappa
      Blog Post Author

      Hi Balajisha,

      Thank you.

      Please create a ticket ( question ) with detailed explanation of your issue. Let us help.

      Regards,

      Rama

      Author's profile photo Balajisha T V
      Balajisha T V

      Hi Rama,

      Thank you for looking in to,...

      I have raised a detailed ticket... Please find the below link for your reference.

      Check-box --- Read only property in Table UI Element of Webdynpro

      Regards

      Author's profile photo Balajisha T V
      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

      Author's profile photo Rita Grace
      Rita Grace

      Its helpful 🙂 Thank you 🙂

      Author's profile photo Ramakrishnappa Gangappa
      Ramakrishnappa Gangappa
      Blog Post Author

      Thank you Rita 🙂

      Author's profile photo Former Member
      Former Member

      I am new in WebDynpro and this tutorial really helped me a lot..

      Cheers Ram.

      Author's profile photo Ramakrishnappa Gangappa
      Ramakrishnappa Gangappa
      Blog Post Author

      Thank you Sachin 🙂

      Author's profile photo Ruchi Dhiman
      Ruchi Dhiman

      Hi, the tutorial/blog is extremely good!

      Cheers Ruchi

      Author's profile photo Ramakrishnappa Gangappa
      Ramakrishnappa Gangappa
      Blog Post Author

      Thank you Ruchi for your kind words 🙂

      Regards,

      Rama

      Author's profile photo Balajisha T V
      Balajisha T V

      Hi Rama,

       

      We have used a similar approach, whenever a check-box in a table ui is checked then another cell should become read only and vise-versa. have raised a thread in the below .

      Request your suggestion.

      https://answers.sap.com/questions/175917/table-ui-with-check-box-toggle-option.html