Creating editable ALV using webdynpro for ABAP

Step1:Create a webdynpro component ZWDT_DEMO_ALV in SE80 Important Top^

Create a webdynpro component ZSAPN_EDITABLE_ALV in SE80.

A pop-up will open, provide description, window and view name.

Step2:Add ALV table and define context Medium Top^

Add standard ALV component SALV_WD_TABLE at the root level of webdynpro component.

We need to map our context with interface component so we need to add our context nodes in component controller only, go to component controller and add a node with name MARA with four attributes (MATNE, MTART, MBRSH, MEINS, MATKL).

Go to Component controller, right click on context and click on create->node .

Create a node MARA  with 0-n cardinality because we need to store multiple records to display on ALV.

Click on add attributes from structure and select MATNR, MTART, MBRSH, MATKL, MEINS and enter, save.

Step3:Add View Container UI element in main view Medium Top^

Now go to main view of component and add a view container UI element, we need to embed interface view of ALV to display ALV in our component.

A popup will open provide some id and select ViewContainerUIelement , enter.

Step4:Embedd interface view into view container Important Top^

After adding view container UI element, go to window, right click on view container UI element, click on embed.

a popup will open. Click F4 on View to Be Embedded, Select TABLE interface view and click on continue (Enter).

Enter and Save

Step5:Create external context mapping for ALV Important Top^

Data in the ALV will be displayed using interface controller, by mapping our node to interface node data of interface controller, we can display data on ALV table, follow the below steps for external context mapping.

Expand Component Usages->ALV->INTERFACECONTROLLER_USAGE .

Click on Controller Usage a popup will open, select Component controller and enter.

It will create a controller usage and we can do external context mapping.

Now drag and drop  MARA  node exactly onto  DATA  node, you can see a double arrow mark on node DATA (see below figure), it indicates mapping is done.

Save Component.

Step6:Add Business logic to fill ALV table Important Top^

External context mapping to ALV component is completed, now we need to add logic to fill node to display data on ALV.

Now go to WDDOINIT and add the below code.

**This method will trigger first so we add some data here for test purpose
  DATA LO_ND_MARA TYPE REF TO IF_WD_CONTEXT_NODE.

  DATA LT_MARA TYPE WD_THIS->ELEMENTS_MARA.

*  navigate from  to  via lead selection
  LO_ND_MARA = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_MARA ).

*get data from MARA
  SELECT MATNR MTART MEINS MBRSH MATKL FROM MARA
    INTO TABLE LT_MARA UP TO 50 ROWS.

  LO_ND_MARA->BIND_TABLE( NEW_ITEMS = LT_MARA SET_INITIAL_ELEMENTS = ABAP_TRUE ).

Save and Double click on component name, activate the component.

Create application and test, right click on component name Create->Web Dynpro Application.

Provide name and description, save and test .

The out put will be like below, our next step is to make ALV as editable .

Step7:Make Webdynpro ALV as editable Important Top^

Webdynpro ALV is completed, now we need to make all columns in ALV editable.

To make ALV as editable follow below steps in WDDOINIT method

Step1--Instantiate used component ALV.

DATA LO_CMP_USAGE TYPE REF TO IF_WD_COMPONENT_USAGE. 
LO_CMP_USAGE = WD_THIS->WD_CPUSE_ALV( ). 
IF LO_CMP_USAGE->HAS_ACTIVE_COMPONENT( ) IS INITIAL. 
LO_CMP_USAGE->CREATE_COMPONENT( ). ENDIF.

Step2--Get ALV configuration settings using used controller method GET_MODEL.

DATA LO_INTERFACECONTROLLER TYPE REF TO IWCI_SALV_WD_TABLE . 
LO_INTERFACECONTROLLER = WD_THIS->WD_CPIFC_ALV( ).
DATA LV_VALUE TYPE REF TO CL_SALV_WD_CONFIG_TABLE. 
LV_VALUE = LO_INTERFACECONTROLLER->GET_MODEL( ) .

Step3--Get All the Columns of ALV table.

**Get alv columns uisng ALV config class 
DATA : LR_COLUMNS TYPE SALV_WD_T_COLUMN_REF . "this is table type 
DATA : LS_COLUMNS TYPE SALV_WD_S_COLUMN_REF . "declare line type of columns 
CALL METHOD LV_VALUE->IF_SALV_WD_COLUMN_SETTINGS~GET_COLUMNS 
                      RECEIVING VALUE = LR_COLUMNS. "get columns into a columns table

Step4-- Loop through all columns and Insert input field into ALV columns.

**Now insert input field into each column**Create object for input field 
DATA : LR_INPUT TYPE REF TO CL_SALV_WD_UIE_INPUT_FIELD .
LOOP AT LR_COLUMNS INTO LS_COLUMNS.**Create object for input 
CREATE OBJECT LR_INPUT 
          EXPORTING VALUE_FIELDNAME = LS_COLUMNS-ID. "Column name*ls_columns-r_column is the column instance, we can use it to insert input field CALL METHOD LS_COLUMNS-R_COLUMN->SET_CELL_EDITOR EXPORTING VALUE = LR_INPUT. " we are inserting input field instance ENDLOOP.

Step5-- Set SET_READ_ONLY false .

**By default ALV will be set to read only, we have to make this false to make editable 
CALL METHOD LV_VALUE->IF_SALV_WD_TABLE_SETTINGS~SET_READ_ONLY 
                               EXPORTING VALUE = ABAP_FALSE .

The Full Code for Making Web Dynpro ALV as editable (Add in WDDOINIT method)

**This method will trigger first so we add soem data here for test purpose

  DATA LO_ND_MARA TYPE REF TO IF_WD_CONTEXT_NODE.

  DATA LT_MARA TYPE WD_THIS->ELEMENTS_MARA.

*  navigate from  to  via lead selection
  LO_ND_MARA = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_MARA ).

  SELECT MATNR MTART MEINS MBRSH MATKL FROM MARA
    INTO TABLE LT_MARA UP TO 50 ROWS.
** MARA table has huge data so we get first 50 records for test

  LO_ND_MARA->BIND_TABLE( NEW_ITEMS = LT_MARA SET_INITIAL_ELEMENTS = ABAP_TRUE ).

  DATA LO_CMP_USAGE TYPE REF TO IF_WD_COMPONENT_USAGE.

  LO_CMP_USAGE =   WD_THIS->WD_CPUSE_ALV( ).
  IF LO_CMP_USAGE->HAS_ACTIVE_COMPONENT( ) IS INITIAL.
    LO_CMP_USAGE->CREATE_COMPONENT( ).
  ENDIF.
  DATA LO_INTERFACECONTROLLER TYPE REF TO IWCI_SALV_WD_TABLE .
  LO_INTERFACECONTROLLER =   WD_THIS->WD_CPIFC_ALV( ).

  DATA LV_VALUE TYPE REF TO CL_SALV_WD_CONFIG_TABLE.
  LV_VALUE = LO_INTERFACECONTROLLER->GET_MODEL(
  ). "ALV configurations
**Get alv columns uisng ALV config class
  DATA : LR_COLUMNS TYPE SALV_WD_T_COLUMN_REF . "this is table type
  DATA : LS_COLUMNS TYPE SALV_WD_S_COLUMN_REF . "declare line type of columns
  CALL METHOD LV_VALUE->IF_SALV_WD_COLUMN_SETTINGS~GET_COLUMNS
    RECEIVING
      VALUE = LR_COLUMNS. "get columns into a columns table
**Now insert input field into each column
**Create object for input field
  DATA : LR_INPUT TYPE REF TO CL_SALV_WD_UIE_INPUT_FIELD .

  LOOP AT LR_COLUMNS INTO LS_COLUMNS.
**Create object for input
    CREATE OBJECT LR_INPUT
      EXPORTING
        VALUE_FIELDNAME = LS_COLUMNS-ID. "Column name
*ls_columns-r_column is the column instance, we can use it to insert input field
    CALL METHOD LS_COLUMNS-R_COLUMN->SET_CELL_EDITOR
      EXPORTING
        VALUE = LR_INPUT. " we are inserting input field instance


  ENDLOOP.
**By default ALV will be set to read only, we have to make this false to make editable
  CALL METHOD LV_VALUE->IF_SALV_WD_TABLE_SETTINGS~SET_READ_ONLY
    EXPORTING
      VALUE = ABAP_FALSE.

The final result will be.