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
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 . "get button name
"================================= 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
LOOP AT lt_elements INTO ls_elements.
LOOP AT lt_attr_names INTO lv_attr_name. UNASSIGN <fs_value>. IF <fs_value> IS NOT INITIAL. ls_elements->set_attribute_property( ENDIF. 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 . DATA lt_cols TYPE cl_wd_table_column=>tt_table_column. DATA lo_inp TYPE REF TO cl_wd_input_field. "Get table reference "Get Columns of table
"Check if no columns found
"For each column and its editor, set the read only property
IF lo_inp IS BOUND. CONCATENATE lv_path 'READ_ONLY' INTO lv_path SEPARATED BY ':'.
"bind the read_only property to the attributes property
ENDLOOP.
|
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 . * navigate from <CONTEXT> to <DATA> via lead selection "add a row lo_nd_data->bind_table( |
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 .
lo_node = wd_context->get_child_node( name = wd_this->wdctx_data ). "get selected row(s) data LOOP AT lt_elements into ls_elements. |
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.
Rating / Likes motivate me to post more such documents
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
36 | |
8 | |
7 | |
5 | |
5 | |
4 | |
4 | |
4 | |
3 | |
3 |