Skip to Content

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.

/wp-content/uploads/2012/12/img1_168298.png

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.

/wp-content/uploads/2012/12/img3_168393.png

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.

/wp-content/uploads/2012/12/img4_168394.png

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

/wp-content/uploads/2012/12/img5_168398.png

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

/wp-content/uploads/2012/12/img6_168399.png

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.

/wp-content/uploads/2012/12/img7_168400.png

Step 8: Goto Component Controller -> Properties tab -> Click on Create Controller Usage icon->  Select ‘Interface Controller’.

/wp-content/uploads/2012/12/img8_168401.png

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

data lo_nd_flights type ref to if_wd_context_node.
data lo_el_flights type ref to if_wd_context_element.
data ls_flights type wd_this->element_itab.
data 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:

/wp-content/uploads/2012/12/img9_168402.png

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply