7/27/2019 Conditional Coloring in ALV

1/6

Conditional coloring in ALV table of

Webdynpro

created byKeshav Saxenaon Dec 21, 2012 11:48 AM, last modified byKeshav Saxenaon Dec21, 2012 12:08 PM

Version 1

inShare

Scenario: The flight data will be displayed in ALV and on the Price field data will be colored onthe basis of amount. In our case if the price is greater than 200 we will color it to red else it willbe colored as green.

Prerequisite: Developer should be well aware with the development in webdynpro and should

be able to follow the mentioned simple steps.

Step1: Create a Webdynpro component with a window and a view.

Step 2: In the Component Usages of the component, add SALV_WD_TABLE.

Step 3: Goto Component Controller, Create a node with name ITAB and dictionary structure

SFLIGHT. Keep the cardinality as 0:n. Add fields from the dictionary structure which we needto display in the table.

http://scn.sap.com/people/keshav.saxenahttp://scn.sap.com/people/keshav.saxenahttp://scn.sap.com/people/keshav.saxenahttp://scn.sap.com/people/keshav.saxenahttp://scn.sap.com/people/keshav.saxenahttp://scn.sap.com/people/keshav.saxenahttp://scn.sap.com/servlet/JiveServlet/showImage/102-34563-1-168298/img1.pnghttp://scn.sap.com/people/keshav.saxenahttp://scn.sap.com/people/keshav.saxena

7/27/2019 Conditional Coloring in ALV

2/6

Step 4: Add one extra attribute to the above declared node (itab) with name CELL_DESIGN

and of type WDUI_TABLE_CELL_DESIGN.

Note: For this we need to delete the Dictionary Structure from the node properties first and

then only we can add the extra attribute.

http://scn.sap.com/servlet/JiveServlet/showImage/102-34563-1-168393/img3.png

7/27/2019 Conditional Coloring in ALV

3/6

Step 5: Goto Component Usages->ALV->Interface Controller. Click on Controller Usages and

select component controller.

Perform the mapping in between ITAB node of component controller and DATA node of

interface controller.

http://scn.sap.com/servlet/JiveServlet/showImage/102-34563-1-168398/img5.pnghttp://scn.sap.com/servlet/JiveServlet/showImage/102-34563-1-168394/img4.pnghttp://scn.sap.com/servlet/JiveServlet/showImage/102-34563-1-168398/img5.pnghttp://scn.sap.com/servlet/JiveServlet/showImage/102-34563-1-168394/img4.png

7/27/2019 Conditional Coloring in ALV

4/6

Step 6: Goto View and add View container UI Element to its layout.

Step 7: Goto windows and embed the Table view to the ViewContainer.

Step 8: Goto Component Controller -> Properties tab -> Click on Create Controller Usage icon-

> Select Interface Controller.

http://scn.sap.com/servlet/JiveServlet/showImage/102-34563-1-168400/img7.pnghttp://scn.sap.com/servlet/JiveServlet/showImage/102-34563-1-168399/img6.pnghttp://scn.sap.com/servlet/JiveServlet/showImage/102-34563-1-168400/img7.pnghttp://scn.sap.com/servlet/JiveServlet/showImage/102-34563-1-168399/img6.png

7/27/2019 Conditional Coloring in ALV

5/6

Step 9: Goto the WDDOINIT method of Component Controller and write the following code:

data lo_nd_flights typerefto if_wd_context_node.data lo_el_flights typerefto if_wd_context_element.data ls_flights type wd_this->element_itab.

data it_flights type wd_this->elements_itab.

* navigate from to via lead selectionlo_nd_flights = wd_context->get_child_node( name = wd_this->wdctx_itab ).

select * from sflight into corresponding fieldsoftable it_flights upto70rows.lo_nd_flights->bind_table( it_flights ).

data:

it_final type wd_this->elements_itab,

ls_final type if_componentcontroller=>element_itab.

* Code specific to color in table

loopat it_flights into ls_flights.

move-corresponding ls_flights to ls_final.if ls_final-price gt200.ls_final-cell_design = cl_wd_table_column=>e_cell_design-badvalue_light. " Red

color

else.

ls_final-cell_design = cl_wd_table_column=>e_cell_design-goodvalue_light. "

Green color

endif.

append ls_final to it_final.

endloop.

lo_nd_flights->bind_table(new_items = it_final

set_initial_elements = abap_true ).

* Part Third:

* Instantiate ALV

data: l_ref_cmp_usage typerefto if_wd_component_usage.l_ref_cmp_usage = wd_this->wd_cpuse_alv( ).

if l_ref_cmp_usage->has_active_component( ) isinitial.l_ref_cmp_usage->create_component( ).

http://scn.sap.com/servlet/JiveServlet/showImage/102-34563-1-168401/img8.png

7/27/2019 Conditional Coloring in ALV

6/6

endif.

data: l_ref_interfacecontroller typerefto iwci_salv_wd_table.l_ref_interfacecontroller = wd_this->wd_cpifc_alv( ).

data:

l_value typerefto cl_salv_wd_config_table.

* call the method get_model to get the reference of tablel_value = l_ref_interfacecontroller->get_model( ).

* Make CARRID column editable

data l_column1 typerefto cl_salv_wd_column.

*Set colors to cells

*Get column reference

l_column1 = l_value->if_salv_wd_column_settings~get_column( 'PRICE' ). " This line

mainly working to pass colour

" to the column of the table. Whatever the name is provided here that will be coloured in the table.

*Assign attribute Celldesign to the column

* Now the column shows 2 colorsl_column1->set_cell_design_fieldname( value = 'CELL_DESIGN' ).

l_value->if_salv_wd_column_settings~delete_column( id = 'CELL_DESIGN' ).

callmethod l_value->if_salv_wd_table_settings~set_visible_row_countEXPORTINGvalue = 70.

Step 10: Save and activate the component. Create application and test.

Output:

http://scn.sap.com/servlet/JiveServlet/showImage/102-34563-1-168402/img9.png