SQL Server administration and T-SQL development, Web Programming with ASP.NET, HTML5 and Javascript, Windows Phone 8 app development, SAP Smartforms and ABAP Programming, Windows 7, Visual Studio and MS Office software Kodyaz SAP and ABAP Programming Tutorials
Development resources, articles, tutorials, samples, codes and tools for .Net, SQL Server, Windows, Windows Phone, SAP and ABAP, like SAP UI5, Screen Personas, etc.




CRM Companies List
Web Based CRM Software


Traffic Lights in SAP Web Dynpro ALV Table

This SAP Web Dynpro tutorial shows how to use traffic lights on ABAP ALV table in a Web Dynpro component. ABAP developers will find source codes to display traffic lights (images of red, green, yellow signals) on Web Dynpro ALV table.

Below is a sample Web Dynpro application where traffic lights (green, yellow and red lights) are displayed per row according to custom criteria on an SAP ALV table.

display traffic lights on ALV table in Web Dynpro component

Following are the three different traffic light images and corresponding image names: ICON_YELLOW_LIGHT, ICON_RED_LIGHT, ICON_GREEN_LIGHT

traffic lights for ALV table display on SAP Web Dynpro application

Add a table field or a field to your data structure with data type STRING and field name "TRAFFICLIGHTS".
Below screenshot is showing that the field name is exactly used as TRAFFICLIGHTS. I created a custom data element with data type STRING

use traffic lights in SAP Web Dynpro ALV table

Then in an ABAP program, ABAP programmers can update TRAFFICLIGHTS field to one of the valid traffic light colors (red, green, yellow) according to their custom requirements. Programmers can use a LOOP statement to run the custom function for each for for returning the traffic light field value which represents the web image name.

Following ABAP code is showing how to configure ALV table display for showing TrafficLights field as a traffic lights image on a SAP Web Dynpro page.

* Instantiate used component ALV
data LO_CMP_USAGE type ref to IF_WD_COMPONENT_USAGE.
LO_CMP_USAGE = WD_THIS->WD_CPUSE_ALV_OPENITEMS( ).
if LO_CMP_USAGE->HAS_ACTIVE_COMPONENT( ) is initial.
 LO_CMP_USAGE->CREATE_COMPONENT( ).
endif.

* 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_OPENITEMS( ).

data LV_VALUE type ref to CL_SALV_WD_CONFIG_TABLE.
LV_VALUE = LO_INTERFACECONTROLLER->GET_MODEL( ).


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


* Loop through all columns and Insert input field into ALV columns.
loop at LR_COLUMNS into LS_COLUMNS
 where ID = 'PROFORMA_ITEM_STATUS'.


* Display traffic lights icon for item status
data LR_IMAGE type ref to CL_SALV_WD_UIE_IMAGE.
create object LR_IMAGE.
LR_IMAGE->SET_SOURCE_FIELDNAME( 'TRAFFICLIGHTS' ).
call method LS_COLUMNS-R_COLUMN->SET_CELL_EDITOR
 exporting
  VALUE = LR_IMAGE. "Display traffic light images

endloop.

According to your criterias, ABAP developer should set the TrafficLights field value to one of the following predefined values. ICON_GREEN_LIGHT ,
ICON_YELLOW_LIGHT or
ICON_RED_LIGHT

LR_PROFORMA_ITEM->TRAFFICLIGHTS = 'ICON_GREEN_LIGHT'.
LR_PROFORMA_ITEM->TRAFFICLIGHTS = 'ICON_YELLOW_LIGHT'.
LR_PROFORMA_ITEM->TRAFFICLIGHTS = 'ICON_RED_LIGHT'.

To summarize, if you have a field named TRAFFICLIGHTS in your data structure with one of the following constant values ICON_GREEN_LIGHT, ICON_YELLOW_LIGHT or ICON_RED_LIGHT it is possible to display red, green or yellow traffic lights on your ALV table display on SAP Web Dynpro component. The ABAP ALV display should be configured with cell editor set to image for the TRAFFICLIGHTS field. ABAP developers can use the above given sample ABAP codes in their Web Dynpro applications.






SAP Tutorials

SAP Tutorial

SAP Forums

SAP Tools

SAP Transaction Codes Table






Related Articles and Tutorials(http://www.kodyaz.com/sap-abap/alv-table-traffic-lights-in-sap-webdynpro.aspx)
How to Clear Web Dynpro Cache
SAP Web Dynpro ALV Tutorial
Display Adobe Form in SAP Web Dynpro
Display Data on Web DynPro Table Element
Set Page Title in Web Dynpro Application
Web Dynpro Text Translation using Assistance Class
Trigger ALV Events in Web Dynpro Component
Add Value Help to Web Dynpro Select Options
SAP Web Dynpro Service Cannot be Reached Error
Create CL_GUI_ALV_GRID ALV Grid Column Header using ABAP Data Element
Multi Color ALV Grid Color Alternate using ALV Layout info_fname Property
ALV Grid Color - Table Row Background Color in ALV List
SAP ABAP Tutorial - ALV Grid Example with cl_gui_alv_grid and Screen Painter
Add Button to ALV Table Header on SAP Web Dynpro
Add Web Dynpro Applications to SAP Favorites Menu
Traffic Lights in SAP Web Dynpro ALV Table
Component Usage ALV Does Not Have an Active Component
Create Search Help in ABAP for Web Dynpro Component
Create Transaction Code for Web Dynpro Application
Display and Download Adobe Form as PDF File in SAP Web Dynpro
Find Web Dynpro Class Name to Search in ABAP Code
Web DynPro Tutorial - How to create Web Dynpro Application (Web Dynpro Component)
Test Web Dynpro ABAP Component by Creating Web Dynpro Application
Remove ALV Buttons on SAP Web Dynpro Component
Read Checkbox Value in Web Dynpro Editable ALV
SAP Web Dynpro File Upload using GOS cl_fitv_gos Class
Web Dynpro Component Service Syntax Error in Program /1BCWDY/O3EC1AX6A3OVKK9L5FXO==CP
Translate Web Dynpro Header Title displayed on Web Browser
Web DynPro Tutorial - Display Spool Requests using Web DynPro Table
SAP - ABAP ALV Grid Sample Code using REUSE_ALV_GRID_DISPLAY


Copyright © 2004 - 2017 Eralper YILMAZ. All rights reserved.
Community Server by Telligent Systems