Copyright 2020 - BV TallVision IT

As a business case to getting used to building a transaction, here's a nice challenge: create a popup with a traffic light (icon) and make it change colors...

This may be a bit unusual, but it could be a very handy tip. I tried to use the icon for a traffic light in a dynpro screen, which basically looked nice. You can display an icon in your dynpro as a picture, by not turning it into a button. Using the SCREEN table, you could change the attributes of that icon, thus you could make it visible or invisible. But, I wanted to actually change the icon, depending on a certain status.

Here's a solution: it is possible to display an output field as an icon, for which the actual contents of the field is used. Normally we would menu-paint an icon, now we menu-paint an output field that will contain the icon. The output field should be 50 characters long (or rather: 50 characters is long enough) but the visible length should be 4 characters only (Icon's are not that big). Here's a little example for the traffic light, it's a simple "status changer" which allows the end user to change the traffic light colors.

Example: Change an icon on a popup

REPORT ZTSTICON.

DATA: ICON_CONTAINER(50),
      LIGHT(6),
      OKCODE(4).

* Screen 100 should display only one field: ICON_CONTAINTER. 
* it's a scrollable field, only for output. It's length 
* is 50 and it's visible length is only 4.

CALL SCREEN 100 STARTING AT 5 5 ENDING AT 32 7.

*-------------------------------------------------------
*  MODULE D100_INIT OUTPUT
*-------------------------------------------------------
*  Initialization routine for the screen (PBO)
*-------------------------------------------------------
MODULE D100_INIT OUTPUT.

* The menu should contain the following functions: 
* - STOP - to cancel,
* - RED - for the red light, - YELL - for the yellow 
* light and - GREE - for the green light. It's a popup 
* dynpro.

  SET PF-STATUS 'MAIN'.

ENDMODULE.
*-------------------------------------------------------
*  MODULE D100_MENU_RESPONS INPUT
*-------------------------------------------------------
*  Menu handling for the screen (PAI)
*-------------------------------------------------------
MODULE D100_MENU_RESPONS INPUT.

  CASE OKCODE.
    WHEN 'STOP'.
      LEAVE TO SCREEN 0.
    WHEN 'RED'.
      CALL FUNCTION 'ICON_CREATE'
           EXPORTING
                NAME   = 'ICON_RED_LIGHT'
           IMPORTING
                RESULT = ICON_CONTAINER.
      LIGHT = 'RED'.
    WHEN 'YELL'.
      CALL FUNCTION 'ICON_CREATE'
           EXPORTING
                NAME   = 'ICON_YELLOW_LIGHT'
           IMPORTING
                RESULT = ICON_CONTAINER.
    WHEN 'GREE'.
      CALL FUNCTION 'ICON_CREATE'
           EXPORTING
                NAME   = 'ICON_GREEN_LIGHT'
           IMPORTING
                RESULT = ICON_CONTAINER.
  ENDCASE.

ENDMODULE.

To make things work, just make sure your screen field is not ready for input. The example above could thus be a lot shorter, but also less readable:

*-------------------------------------------------------
*  MODULE D100_MENU_RESPONS INPUT
*-------------------------------------------------------
*  Menu handling for the screen (PAI)
*-------------------------------------------------------
MODULE D100_MENU_RESPONS INPUT.

  CASE OKCODE.
    WHEN 'STOP'.
      LEAVE TO SCREEN 0.
    WHEN 'RED'.
      ICON_CONTAINER = '@0A@'.
    WHEN 'YELL'.
      ICON_CONTAINER = '@09@'.
    WHEN 'GREE'.
      ICON_CONTAINER = '@08@'.
  ENDCASE.

ENDMODULE.

A little more inside information: what the ICON_CREATE function does is fill in the field ICON_CONTAINER with the following values:

  • Green light: @08\QGreen light; positive@
  • Yellow light: @09\QYellow light; neutral@
  • Red light: @0A\QRed light; negative@

Yes, of course I tried to take the text out. And it works. The table above could be simplified to:

  • Green light: @08@
  • Yellow light: @09@
  • Red light: @0A@

Note however that the texts are used (for quick info) by the system !

To make things work, just make sure your screen field is not ready (available) for input.

And another thing, an icon usually has a "Quick info" text, that will be displayed every time the mouse is hovering above (on) the icon long enough.This text can normally be set in the screen painter, and the function module ICON_CREATE can be used to set it for "Changeable icons". The INFOparameter will take care of that.

You can use the topic above for step LOOPs as well. I like to use LOOP AT itab myself and adding the liquid icon as described above was a little tricky. Basically what you need to do is set the icon in the PBO of the loop processing. Then everything should be all right. If no icon appears on the screen, check whether the field that holds the icon actually contains a value like @09QYellow light; neutral@, in the PBO for the loop.