Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
ramakrishnappa
Active Contributor

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

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

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

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

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

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

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


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

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

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

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

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

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

19 Comments
Labels in this area