Skip to end of metadata
Go to start of metadata

Introduction

A step by step guide on displaying pictures in the screen and catching  the click event on the picture. Through the transaction SE78 we upload a picture to SAP. The picture uploaded is displayed in a screen and an information message is displayed on clicking that picture. All the steps and the coding required are demonstrated in a very simple way.  A basic knowledge on Classes and Objects is preferable.

Step 1: Uploading picture using SE78

Run transaction SE78 and point to menu > Graphics > Import.
Select the file and type a name as shown below. Here I have given the name CLICK_IMG for the picture.

Step 2: Creating a custom control in screen

Create a custom control in the screen. Here it is named as CLICK_IMG_CONTAINER.
 

Step 3: Coding for displaying the picture in screen.

In the PBO module of the screen, attach the following code. Please note that the picture name is CLICK_IMG and container name is CLICK_IMG_CONTAINER. Please pass your own object names to the method.
MODULE STATUS_1000 OUTPUT.
  DATA: W_LINES TYPE I.
  TYPES PICT_LINE(256) TYPE C.
  DATA : CONTAINER TYPE REF TO CL_GUI_CUSTOM_CONTAINER,
         PICTURE TYPE REF TO CL_GUI_PICTURE,
         PICT_TAB TYPE TABLE OF PICT_LINE,
         URL(255) TYPE C.
  DATA: GRAPHIC_URL(255).
  DATA: BEGIN OF GRAPHIC_TABLE OCCURS 0,
          LINE(255) TYPE X,
        END OF GRAPHIC_TABLE.
  DATA: L_GRAPHIC_CONV TYPE I.
  DATA: L_GRAPHIC_OFFS TYPE I.
  DATA: GRAPHIC_SIZE TYPE I.
  DATA: L_GRAPHIC_XSTR TYPE XSTRING.
  CALL METHOD cl_gui_cfw=>flush
      EXCEPTIONS
      cntl_system_error = 1
        cntl_error        = 2
        others            = 3
                         .
   IF sy-subrc <> 0.
*   MESSAGE ID SY-MSGID TYPE SY-MSGTY NUMBER SY-MSGNO
*       WITH SY-MSGV1 SY-MSGV2 SY-MSGV3 SY-MSGV4.
   ENDIF.


  CREATE OBJECT: CONTAINER EXPORTING CONTAINER_NAME = 'CLICK_IMG_CONTAINER’,
                               PICTURE EXPORTING PARENT = CONTAINER.
CALL METHOD CL_SSF_XSF_UTILITIES=>GET_BDS_GRAPHIC_AS_BMP
    EXPORTING
      P_OBJECT       = 'GRAPHICS'
      P_NAME         = 'CLICK_IMG'
      P_ID           = 'BMAP'
      P_BTYPE        = 'BCOL'
    RECEIVING
      P_BMP          = L_GRAPHIC_XSTR
*  EXCEPTIONS
*    NOT_FOUND      = 1
*    INTERNAL_ERROR = 2
*    others         = 3
          .
  IF SY-SUBRC <> 0.
* MESSAGE ID SY-MSGID TYPE SY-MSGTY NUMBER SY-MSGNO
*            WITH SY-MSGV1 SY-MSGV2 SY-MSGV3 SY-MSGV4.
  ENDIF.
  GRAPHIC_SIZE = XSTRLEN( L_GRAPHIC_XSTR ).
  L_GRAPHIC_CONV = GRAPHIC_SIZE.
  L_GRAPHIC_OFFS = 0.
  WHILE L_GRAPHIC_CONV > 255.
    GRAPHIC_TABLE-LINE = L_GRAPHIC_XSTR+L_GRAPHIC_OFFS(255).
    APPEND GRAPHIC_TABLE.
    L_GRAPHIC_OFFS = L_GRAPHIC_OFFS + 255.
    L_GRAPHIC_CONV = L_GRAPHIC_CONV - 255.
  ENDWHILE.
  GRAPHIC_TABLE-LINE = L_GRAPHIC_XSTR+L_GRAPHIC_OFFS(L_GRAPHIC_CONV).
  APPEND GRAPHIC_TABLE.
  CALL FUNCTION 'DP_CREATE_URL'
    EXPORTING
      TYPE     = 'IMAGE'
      SUBTYPE  = 'X-UNKNOWN'
      SIZE     = GRAPHIC_SIZE
      LIFETIME = 'T'
    TABLES
      DATA     = GRAPHIC_TABLE
    CHANGING
      URL      = URL.
  CALL METHOD PICTURE->LOAD_PICTURE_FROM_URL
    EXPORTING
      URL = URL.
  CALL METHOD PICTURE->SET_DISPLAY_MODE
    EXPORTING
      DISPLAY_MODE = PICTURE->DISPLAY_MODE_FIT_CENTER.
ENDMODULE.                 


Do the syntax check, activate and execute. The screen will be displayed with the picture.

Step 4:  Class definition and implementation for capturing click event.

Now we are going to add the coding for click event of picture. In the global part of the report program add the following code.

REPORT  zaby_image_click.

CALL SCREEN 1000.

CLASS cl_picture_click DEFINITION.

PUBLIC SECTION.

METHODS: picture_yclick FOR EVENT picture_click of cl_gui_picture IMPORTING mouse_pos_x mouse_pos_y.ENDCLASS.CLASS cl_picture_click IMPLEMENTATION.

METHOD: picture_yclick.PERFORM onclick. "write the action of click in this form.ENDMETHOD. DATA: obj_cl_picture_class TYPE REF TO cl_picture_click.DATA: it_event_picture TYPE TABLE OF cntl_simple_event,            wa_event_picture TYPE cntl_simple_event.

Step 5: Coding for action on click event

Now Double click on ‘PERFORM click’ that we just added in the class implementation and add the following code.

form ONCLICK.MESSAGE 'You have clicked on the image' TYPE 'I'.endform. 


Step 6: Coding for capturing click event

Add another module in the screen PBO and add the following code to that module.
module CLICK_IMAGE_1000 output.
wa_event_picture-eventid = cl_gui_picture=>eventid_picture_click.
wa_event_picture-appl_event = 'X'.
APPEND wa_event_picture to it_event_picture.
CALL METHOD picture->set_registered_events
Exporting
events = it_event_picture
Exceptions
cntl_error = 1
cntl_system_error = 2
illegal_event_combination = 3
OTHERS = 4.
CREATE OBJECT obj_cl_picture_class.
SET HANDLER obj_cl_picture_class->picture_yclick FOR picture. 
endmodule.
 

Now check, activate and execute. Click on the picture in the screen. A message will be displayed.


  • No labels