ALV column editable, Colour.

[Former Member]

Summary:

This article helps a developer to use ALV Report in WDA . It includes

• ALV Column editable.
• ALV Column Color.

Execute SE80 transaction. Select Web Dynpro Component from list box, enter component name and Press   Enter.

Create Nodes as Shown in Component Controller  CONTEXT tab.

SFLIGHT based on dictionary structure type SFLIGHT for ALV and Click on button Add Attribute from Structure and choose fields CARRID and CONNID SFLIGHT_HEAD for screen.

An ALV table always displays all fields that are available in the dictionary, if the context

node has a dictionary reference.

Exactly follow the same for SFLIGHT , you can select how many fields you need.

After this your screen will look like below.

Copy and map context node SFLIGHT and SFLIGHT_HEAD   from the component controller’s context to the context of view as shown below.

Create the layout of the main view. Create a group called GP.

Bind the data for the selection screen as shown below. Create Container Form out

of the context menu of GP.

Create button DISPLAY inside group GP. Enter “Display” as text. Create

Action DISPLAY and in the corresponding method ONACTIONDATAFETCH.

Create new element, VIEW_CONTAINER_UIEELEMENT Name them alv.

Click on the wizard button. Read the node SFLIGHT_HEAD as shown below.

Again click on wizard button and set the table as shown below.

Define component usage.

If you want to see the data within a Web Dynpro ALV, you have to define the Web Dynpro

component for ALV SALV_WD_TABLE as a usage component of your Web Dynpro

1. component. 

Double-click on your component and define the component usage of SALV_WD_TABLE

as follows:

Set data to ALV for display (via reverse context mapping).

The selected flights are inside context node SFLIGHT. To display them in the

ALV it is necessary to map the context node SFLIGHT to the context node

DATA of the ALV interface controller. 

Open your Web Dynpro component’s node Component Usages -> ALV ->

INTERFACECONTROLLER_USAGE. 

Click on the Controller Usage button. The component controller of your Web Dynpro

component appears on the right side of the screen.

Map context node SFLIGHT of your Web Dynpro component to context DATA

of the interface controller of the ALV component.

Embed view TABLE of component SALV_WD_TABLE into

1. MAINVIEW.

To embed the ALV table into the MAINVIEW, go to the window MAIN and switch to

tab page window. Embed the ALV view TABLE to view container TABLE by choosing the

context menu entry embed view. A popup appears. Use the F4 help and select the

following entry.

Your code looks like this.

  DATA lo_nd_sflight_head TYPE REF TO if_wd_context_node.
DATA lo_el_sflight_head TYPE REF TO if_wd_context_element.
DATA ls_sflight_head TYPE wd_this->element_sflight_head.
DATA lo_nd_sflight TYPE REF TO if_wd_context_node.
DATA lt_sflight TYPE wd_this->elements_sflight.
lo_nd_sflight_head = wd_context->get_child_node( name = wd_this->wdctx_sflight_head ).
lo_el_sflight_head = lo_nd_sflight_head->get_element( ).

IF lo_el_sflight_head IS INITIAL.
ENDIF.
lo_el_sflight_head->get_static_attributes(
IMPORTING
static_attributes = ls_sflight_head ).


lo_nd_sflight = wd_context->get_child_node( name = wd_this->wdctx_sflight ).


IF ls_sflight_head IS NOT INITIAL.
SELECT * FROM sflight INTO CORRESPONDING FIELDS OF TABLE lt_sflight
WHERE carrid = ls_sflight_head-carrid AND connid = ls_sflight_head-connid.
*
ELSE.
SELECT * FROM sflight INTO CORRESPONDING FIELDS OF TABLE lt_sflight.
ENDIF.

lo_nd_sflight->bind_table( new_items = lt_sflight set_initial_elements = abap_true ).

Create and Test Web Dynpro Application

Each Web Dynpro component needs a Web Dynpro application to be executed.

Create a Web Dynpro application for your Web Dynpro component:

After all the input credentials your output looks like below.

Configure ALV in MAIN View to make ALV editable. Set table editable.

Therefore we need to enhance method ONACTIONDATAFETCH of view MAIN View:

Instantiate ALV component.

The first step – You need to create an instance of the ALV component to modify ALV. This can be achieved through Web Dynpro code

Call interface method GET_MODEL( ).

This can be achieved through webdynpro wizard:

By this your code will look like below.

* Create component usage for alv component
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.
** Get config 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(
).

First it is necessary to use an input field as cell editor for the column “price,” which should be editable.

** set cell editor for input fields (~make colum PRICE editable)
DATA: lr_column TYPE REF TO cl_salv_wd_column.
data: lr_column1 type ref to cl_salv_wd_column.
DATA: lr_column_settings TYPE REF TO if_salv_wd_column_settings.
DATA : lr_input_field TYPE REF TO cl_salv_wd_uie_input_field.

lr_column_settings ?= lv_value.
lr_column = lr_column_settings->get_column( 'PRICE' ).
CREATE OBJECT lr_input_field
EXPORTING
value_fieldname = 'PRICE'.
it is necessary to use an input field for the column “CARRID,” which should be in colour

* TO DISPLAY CARRID field in colour mode.
lr_column1 = lr_column_settings->get_column( 'CARRID' ).
lr_column->set_cell_editor( lr_input_field ).
lr_column1->set_cell_design( EXPORTING value  = CL_WD_TABLE_COLUMN=>E_CELL_DESIGN-CALENDAR_STANDARD ).

* set read only mode to false (and display edit toolbar)

DATA: lr_table_settings TYPE REF TO if_salv_wd_table_settings.

lr_table_settings ?= lv_value.
lr_table_settings->set_read_only( abap_false ).

Now we can start with configuring the ALV table. To change the visible row count to 10.

* set visible row count
lv_value->if_salv_wd_table_settings~set_visible_row_count( '10' ).

Test Your Web Dynpro Application

The result will look like the following: