Display base64 encoded picture in SAPGUI

Today I stumbled upon an old test report where I tried to display a base64 encoded picture in a container.

This is how it looks

This is how it works

BASE64 encoding is a mehtod to store binary data with codepage undependend readable ASCII characters. Readable characters can be stored in an ABAP report which makes it possible to store a picture in a source code.

To encode a picture to BASE64 you will need to have a converter. There are many converters online avaible, e.g. this one:

For demonstration I used a very small picture. I found one in the 8-bit-retro-Excel-racing-simulation galoppsim by Marco Krapf in the last Galoppsim corona cup. If you do not know so far, I recommend to visit as soon as possible,

I chose Rennpony as suitable candiate for my demonstration. Even though the marvelous graphics are in 8bit-mode I still had to concert them to a very small size. The displayed picture has a size of 21×19 pixels.

So I uploaded the smal graphic to the base64-encoding website and got the following string:

R0lGODlhFQATADMAACH5BAAAAAAALAAAAAAVABMAg////19qcHaPjo6ij5XL/p3Mx6rR3 qTS+LPUksPessjcysvl+ufbrvrclPfv1Or0+wSMEMg5F1mY6g0eztzmNA3TKEu4LYaptI 2jShbBMIahlDNwXCwDYcdQeQ6HwEDxOyiKmyNhKhj8pobYBjkl6K5TokZRKBe+3enhRnE g3u/EbwH2aiWJfB6hfjzAa3d6ewYHDzRpWQ0SCoMJBoc0gCYOMo15hho1aiaLAAqgkRR/ aYE9iKVQPZtppwCsXREAOw==

This string has to be decoded into an xstring.

The xstring has to be converted to an xstring table.

This xstring table can be passed to function module DP_CREATE_URL which returns a pointer (url) to these bytes. It then can be used in CL_GUI_PICTURE control to display the data.

The code

REPORT. CLASS demo DEFINITION. PUBLIC SECTION. TYPES _url TYPE c LENGTH 200. TYPES: BEGIN OF _graphic_row, line(255) TYPE x, END OF _graphic_row, _graphic_tab TYPE STANDARD TABLE OF _graphic_row WITH DEFAULT KEY. METHODS show. PRIVATE SECTION. METHODS get_image_url RETURNING VALUE(url) TYPE url. METHODS convert_xstring_to_table IMPORTING xstr TYPE xstring RETURNING VALUE(tab) TYPE _graphic_tab. DATA picture TYPE REF TO cl_gui_picture. DATA container TYPE REF TO cl_gui_docking_container. ENDCLASS. CLASS demo IMPLEMENTATION. METHOD show. DATA: graphic_size TYPE i. CREATE OBJECT container EXPORTING extension = 300 no_autodef_progid_dynnr = 'X'. CREATE OBJECT picture EXPORTING parent = container. picture->load_picture_from_url( url = get_image_url( ) ). picture->set_display_mode( cl_gui_picture=>display_mode_fit ). ENDMETHOD. METHOD get_image_url. DEFINE a. CONCATENATE graphic_str &1 INTO graphic_str. END-OF-DEFINITION. DATA graphic_xstr TYPE xstring. DATA graphic_x TYPE x. DATA graphic_str TYPE string. DATA graphic_size TYPE i. DATA graphic_table TYPE _graphic_tab. TYPES ty_char160 TYPE c LENGTH 160. DATA local_pic TYPE STANDARD TABLE OF ty_char160. "GIF rennpony 16 colors a 'R0lGODlhFQATADMAACH5BAAAAAAALAAAAAAVABMAg////19qcHaP'. a 'jo6ij5XL/p3Mx6rR3qTS+LPUksPessjcysvl+ufbrvrclPfv1Or0'. a '+wSMEMg5F1mY6g0eztzmNA3TKEu4LYaptI2jShbBMIahlDNwXCwD'. a 'YcdQeQ6HwEDxOyiKmyNhKhj8pobYBjkl6K5TokZRKBe+3enhRnEg'. a '3u/EbwH2aiWJfB6hfjzAa3d6ewYHDzRpWQ0SCoMJBoc0gCYOMo15'. a 'hho1aiaLAAqgkRR/aYE9iKVQPZtppwCsXREAOw=='. CALL FUNCTION 'SSFC_BASE64_DECODE' EXPORTING b64data = graphic_str IMPORTING bindata = graphic_xstr EXCEPTIONS OTHERS = 8. graphic_table = convert_xstring_to_table( graphic_xstr ). CALL FUNCTION 'DP_CREATE_URL' EXPORTING type = 'image' "#EC NOTEXT subtype = 'gif' lifetime = cndp_lifetime_transaction "'T' TABLES data = graphic_table CHANGING url = url. ENDMETHOD. METHOD convert_xstring_to_table. DATA conv TYPE i. DATA offs TYPE i. DATA size TYPE i. DATA row TYPE _graphic_row. size = xstrlen( xstr ). CHECK size > 0. conv = size. offs = 0. WHILE conv > 255. row-line = xstr+offs(255). APPEND row TO tab. offs = offs + 255. conv = conv - 255. ENDWHILE. row-line = xstr+offs(conv). APPEND row TO tab. ENDMETHOD. ENDCLASS. PARAMETERS p_test. INITIALIZATION. NEW demo( )->show( ).