Conditional coloring in ALV table of Webdynpro

created by Keshav Saxena on Dec 21, 2012 11:48 AM, last modified by Keshav Saxena on Dec 21, 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 on the basis of amount. In our case if the price is greater than 200 we will color it to red else it will be 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 need to display in the table.

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.

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.

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.

Step 9: Goto the WDDOINIT method of Component Controller and write the following code:
data data data data lo_nd_flights type ref to if_wd_context_node. lo_el_flights type ref to if_wd_context_element. ls_flights type wd_this->element_itab. it_flights type wd_this->elements_itab.

* navigate from <CONTEXT> to <ITAB> via lead selection lo_nd_flights = wd_context->get_child_node( name = wd_this->wdctx_itab ). select * from sflight into corresponding fields of table it_flights up to 70 rows. 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 loop at it_flights into ls_flights. move-corresponding ls_flights to ls_final. if ls_final-price gt 200. 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 type ref to if_wd_component_usage. l_ref_cmp_usage = wd_this->wd_cpuse_alv( ). if l_ref_cmp_usage->has_active_component( ) is initial. l_ref_cmp_usage->create_component( ).

endif. data: l_ref_interfacecontroller type ref to iwci_salv_wd_table. l_ref_interfacecontroller = wd_this->wd_cpifc_alv( ). data: l_value type ref to cl_salv_wd_config_table. * call the method get_model to get the reference of table l_value = l_ref_interfacecontroller->get_model( ). * Make CARRID column editable data l_column1 type ref to 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 colors l_column1->set_cell_design_fieldname( value = 'CELL_DESIGN' ). l_value->if_salv_wd_column_settings~delete_column( id = 'CELL_DESIGN' ). call method l_value->if_salv_wd_table_settings~set_visible_row_count EXPORTING value = 70.

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