cancel
Showing results for 
Search instead for 
Did you mean: 

Display Icon in WebDynpro ALV column

former_member450029
Participant
0 Kudos

Hi experts,

I am trying to display ICON in WebDynpro ALV column by using below code.

data:  lr_image           TYPE REF TO cl_salv_wd_uie_image,

         ls_column          TYPE salv_wd_s_column_ref.

         CREATE OBJECT lr_image.

         lr_image->set_source_fieldname( ls_column-id ).

         ls_column-r_column->set_cell_editor( lr_image ).


When the data is fetched this column field fills with the value 3(ICON_LED_GREEN) and 1(ICON_LED_RED).


But it is displayed in the below way.

What is the problem ?


BR,

Eshwar

Accepted Solutions (0)

Answers (6)

Answers (6)

Former Member
0 Kudos

Hi,


Please do not use 3rd party urls as an answer for discussions, because it can be deleted on the original location.

I have copyed the content out of the page below.

Thanks,

Gabor

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 showinghow 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.

Former Member
0 Kudos

Hi,

To display traffic lights in webdynpro ALV table, refer below link

Traffic Lights in SAP Web Dynpro ALV Table

Have you tried POPUP concept in Webdynpro ?. You can display popup window as per your requirement to display material details.

Thanks

KH

former_member211591
Contributor
0 Kudos

Hi Eshwar,

First of all you don't need to have to use cl_salv_wd_uie_image as a cell editor to display an icon. Because other cell-editors are also capable to display icons.

For instance, if you further want to trigger an action, when clicking the icon, you have to use a link_to_action cell editor, but instead to display a text as value you just add an image.

If you are using cl_salv_wd_uie_image use:

  • Method SET_SOURCE( path )
    • pass the MIME URL to your icon as value. e.g. '/sap/public/bc/icons/s_s_ledg.gif'
    • Using this method will display the same icon in all rows of your table
    • e.g. lr_...->SET_SOURCE( '/sap/public/bc/icons/s_s_ledg.gif' ).
  • or method SET_SOURCE_FIELDNAME( fieldname )
    • Use this method if you want to have different icon in each row
    • you have to add a new column to your table (e.g. name it ICON_PATH of type string) in which you add the MIME URL path for each row. (In field ICON_PATH you have to write the path of your icon for the specific row)
    • call lr_...->SET_SOURCE_FIELDNAME( 'ICON_PATH' )

Similar methods for other cell-editors like cl_salv_wd_uie_link_to_action are called:

SET_IMAGE_SOURCE( path) and SET_IMAGE_SOURCE_FIELDNAME( fieldname ).



Tip: Always check the classes you are using.


Regards

ismail

Former Member
0 Kudos

hi sir,

for me this requirement is urgent,

i am displaying material details using alv.

now i have to add window icon for the matnr (material no ) column when i click on window icon for this column the material details should be open in new window.

so please suggest me how to add the window icon to material no column.

Thanks,

former_member201275
Active Contributor
0 Kudos

There are standard demo programs which do this. Have a look for example at webdynpro program salv_wd_demo_extended.

Former Member
0 Kudos

It means that the value you are passing ist not correct! Try to set the string "ICON_LED_GREEN" into this field

former_member450029
Participant
0 Kudos

Hi,

This field is of type char1

Former Member
0 Kudos

Which field is of type char1?????

Programmatically you Need to set:

CL_SALV_WD_UIE_IMAGE->SET_SOURCE

If you use the context, you have to use a field of type char/string and insert values like "ICON_LED_GREEN"

jayanthi_jayaraman
Active Contributor
0 Kudos

Hi,

Can you check whether the specific field is set as read only?

former_member450029
Participant
0 Kudos

Hi,

No it is not set as read only.

Regards,

Eshwar