Cómo añadir imágenes en dynpros ABAP

Esta semana vamos con un ejemplo de programación de dynpros en ABAP. Crearemos una pantalla dinámica y explicaremos cómo mostrar una imagen en ella. Ya sabemos que la usabilidad en SAP ERP no está muy conseguida y que las pantallas de las transacciones SAP son más texto que imagen. Por eso, siempre se agradece ver un poco de color.

Imagen propiedad de Public Domain Pictures en Pixabay

1. Crear un nuevo programa

Herramientas / Workbench ABAP / Resumen / SE80 - Object Navigator

Para empezar con el ejemplo crearemos nuestro programa para la dynpro. Deberemos crear un programa de tipo modulpool donde insertaremos cuatro includes, cada uno para declarar variables, módulos PBO, módulos PAI y rutinas.

2. Crear un custom container

Mediante el botón layout navegamos al diseño de pantallas ABAP. Pulsamos el botón 'Custom container' y creamos un contenedor para la imagen.

3. Introducir el código ABAP

Escribiremos el código correspondiente en cada uno de los includes y en el PBO de la dynpro.

PBO

PROCESS BEFORE OUTPUT
* MODULE STATUS_0100.
  MODULE LOAD_PIC. * PROCESS AFTER INPUT

PROCESS AFTER INPUT.
* MODULE USER_COMMAND_0100.

Include ZPRUEBA_DYNPRO_TOP
*&---------------------------------------------------------*
*& Include ZPRUEBA_DYNPRO_TOP
*&
*&---------------------------------------------------------*
* Custom container data
DATA:
  container TYPE REF TO cl_gui_custom_container,
  picture TYPE REF TO cl_gui_picture,
  url(132),
  init.
CLASS cl_gui_cfw DEFINITION LOAD.

Include ZPRUEBA_DYNPRO_O01
*&---------------------------------------------------------*
*& Include ZPRUEBA_DYNPRO_TOP
*&
*&---------------------------------------------------------*

*&---------------------------------------------------------*
*&      Module  LOAD_PIC  OUTPUT
*&---------------------------------------------------------*
*       Carga la imagen en el custom container
*----------------------------------------------------------*
MODULE LOAD_PIC OUTPUT.
*
  IF init is initial.
*   create the custom container
    CREATE OBJECT container
                  EXPORTING container_name = 'CUSTOM'.

*   create the picture control
    CREATE OBJECT picture
                  EXPORTING parent = container.

*   Request an URL from the data provider.
    CLEAR URL.
    PERFORM LOAD_PIC_FROM_DB CHANGING URL.

*   load picture
    CALL METHOD picture->load_picture_from_url
        EXPORTING url = url.

    init = 'X'.
    CALL METHOD cl_gui_cfw=>flush
         EXCEPTIONS cntl_system_error = 1
                    cntl_error = 2.
    IF sy-subrc <> 0.
    ENDIF.
  ENDIF.
*
ENDMODULE.                 " LOAD_PIC  OUTPUT

Include ZPRUEBA_DYNPRO_F01
*&---------------------------------------------------------*
*& Include ZPRUEBA_DYNPRO_TOP 
*&
*&---------------------------------------------------------*

*&---------------------------------------------------------*
*&      Form  LOAD_PIC_FROM_DB
*&---------------------------------------------------------*
*       
*----------------------------------------------------------*
*      <--P_URL  text
*----------------------------------------------------------*
FORM load_pic_from_db  CHANGING url.
*
  DATA query_table    LIKE w3query OCCURS 1 WITH HEADER LINE.
  DATA html_table     LIKE w3html OCCURS 1.
  DATA return_code    LIKE w3param-ret_code.
  DATA content_type   LIKE w3param-cont_type.
  DATA content_length LIKE w3param-cont_len.
  DATA pic_data       LIKE w3mime OCCURS 0.
  DATA pic_size       TYPE i.

  REFRESH query_table.
  query_table-name  = '_OBJECT_ID'.
  query_table-value = 'Z_PRUEBA_DYNPRO'.   "Nuestra imagen
  APPEND query_table.

  CALL FUNCTION 'WWW_GET_MIME_OBJECT'
    TABLES
      query_string        = query_table
      html                = html_table
      mime                = pic_data
    CHANGING
      return_code         = return_code
      content_type        = content_type
      content_length      = content_length
    EXCEPTIONS
      object_not_found    = 1
      parameter_not_found = 2
      OTHERS              = 3.
  IF sy-subrc = 0.
    pic_size = content_length.
  ENDIF.

  CALL FUNCTION 'DP_CREATE_URL'
    EXPORTING
      type     = 'image'
      subtype  = cndp_sap_tab_unknown
      size     = pic_size
      lifetime = cndp_lifetime_transaction
    TABLES
      data     = pic_data
    CHANGING
      url      = url
    EXCEPTIONS
      OTHERS   = 1.
*
ENDFORM.                    " LOAD_PIC_FROM_DB

4. Subimos la imagen

Herramientas / Desarrollo web / SMW0 - Repository SAP Web

Seleccionamos la opción 'Datos binarios p.aplicaciones Web'. Desde aquí, en primer lugar, comprobamos los formatos de imagen disponibles en el menú Opciones / Actualizar tipos MIME. En mi caso sólo está disponible el formato html. Así que buscaré una imagen que incrustar en mi dynpro de tipo .jpg y le cambiaré la extensión por el tipo .html.

En segundo lugar, creamos un nuevo objeto web en el menú Objeto web / Crear. Pulsamos el botón Import y buscamos en nuestro ordenador la imagen a subir. Guardamos.