Tutorial Name

Creating editable ALV using webdynpro for ABAP

Tutorial Description

By the end of this tutorial you will be able to learn how to develop an ALV with editable columns using webdynpro for ABAP

Tutorial Area Webdynpro for ABAP
Prerequisites ABAP
Learning Level Intermediate
Estimated Time to learn 30
Save to Learning List Save to your Learning List
+ -

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

Create a webdynpro component ZSAPN_EDITABLE_ALV in SE80.

Editable ALV in webdynpro ABAP

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

Webdynpro ALV

Step2:Add ALV table and define context Medium Top^

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

Editable ALV in Webdynpro ABAP

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 .

Webdynpro Editable ALV

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

Editable webdynpro ALV

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

Webdynpro Editable ALV

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.

Editable ALV in webdynpro for ABAP

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

Making ALV Editable in webdynpro

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.

Webdynpro ALV

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

Webdynpro

Editabla ALV

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.

Webdynpro ALV

**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.

eitable ALV

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

Webdynpro editable ALV

Provide name and description, save and test .

Webdynpro editable ALV

Webdynpro editable ALV

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

Webdynpro editable ALV

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.

Editable ALV in web dynpro ABAP

Author | Last Updated| | 5 Comments | F Share

Tutorial Comments

Total Comments: Add your Comment
20 Apr 2014

when i was running this application ,error is (The following error text was processed in the system EC6 : Die URL enthält keine vollständige Domainangabe (visuinfoec6 statt visuinfoec6..))

11 Jul 2014

supererb thalaiva........................

07 Aug 2015

Web Dynpro Comp. / Intf. ZHR_TIPS1,Web Dynpro View ZHR_TIPS_VIEW 12 @0A\QError@ LO_INTERFACECONTROLLER = WD_THIS->WD_CPIFC_ALV( ). Geting this error message. Please guide

18 Mar 2016

I getting this error : "ERROR: Syntax error in program /1BCWDY/06EJCD7GC3KWX3N4NEUS==CP . (termination: RABAX_STATE)".

19 May 2016

All application is fine. but the coding part is i am not getting. means the declarations by using code wizard was i m not getting. it's better to that explains briefly.

Leave a Comment

Enter Comment Text