Displaying an image or logo in Web Dynpro application without using MIME object

By Rajneesh Balodi, Infosys Technologies

For displaying an image/logo in Web Dynpro application, usually a MIME object is created where a image
is uploaded from a legacy.
But what if an image or logo is stored in document server (Transaction SE78) or what if the image is
required to be fetched from R3??
In simple words this article will help in displaying an image from SE78 transaction to the Web Dynpro
application.
The 6 steps in the whole process are described below. Code mentioned in step 2-5 needs to be provided
in WDDOINIT method of view.
1. Create a Web dynpro component ZTEST1.
Create a view FIRST_VIEW for a Web Dynpro component. Insert a image element 'IMAGE' in view
layout.

Create an attribute IMAGE_URL of type STRING in view context.

Assign the above created attribute to the SOURCE property of IMAGE element

Create a window ZTEST1 for Web Dynpro component and drag the view inside the window.

Also create an application 'ZTEST1' for a Web Dynpro component.

2. Get the Binary contents of image/logo from BDS (Business document store).
Go to the WDDOINIT method of view and call the below Function module for getting the binary contents
of a image. I am calling this FM for a specific image. To make it a dynamic call, select query on table
STXBITMAPS is required. Thus it can help in deciding the image at run time.
For black & White images pass 'BMON' in parameter I_BTYPE (graphic type) and for color images pass
'BCOL' in parameter I_BTYPE.
Data:
i_name
i_id
TYPE
i_btype
TYPE
l_bds_bytecnt
l_bds_content

TYPE

TYPE

STXBITMAPS-TDNAME
STXBITMAPS-TDID
STXBITMAPS-TDBTYPE
TYPE
TABLE

value
VALUE
VALUE
OF

'ZLOGOTEST',
'BMAP',
'BMON',
i,
bapiconten.

*-CALL
EXPORTING
i_object
i_name
i_id
i_btype
IMPORTING
e_bytecount
TABLES
content
EXCEPTIONS
not_found
OTHERS = 2.

Get
FUNCTION
=
=

i_btype

image
contents
'SAPSCRIPT_GET_GRAPHIC_BDS'
=
i_name
=
"Image

'GRAPHICS'
name
i_id
gray)

"Image
type(color

or

l_bds_bytecnt

l_bds_content[]
=

3. Convert the binary contents into BITMAP format.

BITMAP format is file format for digital images. So a conversion from BDS to BMP is required. Call the
below FM after the code in step 2.
Data:
l_content

l_length

TYPE

i,
tsf_xsf_ct,

TYPE

CALL
EXPORTING
old_format
new_format
bitmap_file_bytecount_in
IMPORTING
bitmap_file_bytecount
TABLES
bds_bitmap_file
bitmap_file
EXCEPTIONS
OTHERS = 1.

FUNCTION

'SAPSCRIPT_CONVERT_BITMAP'
=
=

'BDS'
'BMP'
l_bds_bytecnt

=
=

l_length

=
=

l_bds_content[]
l_content[]

4. Convert BITMAP to Byte stream (XSTRING).

Now table L_CONTENT contains the required data of image. But to link it with the Image element, we
need to convert the Bitmap data into XSTRING format. Below source code can be used for it.
This custom logic is picked up from FM SCMS_BINARY_TO_XSTRING and is modified according to
needs.
Data:
l_grline
l_linelength

w_file
TYPE

TYPE
LINE
TYPE

DESCRIBE
FIELD
l_grline
LENGTH
l_linelength
LOOP
AT
l_content
IF
l_length
>
CONCATENATE
w_file
l_grline-line
INTO
w_file
ELSE.

xstring,
tsf_xsf_ct,
i.

OF
IN
INTO
IN

BYTE

MODE.
l_grline.
l_linelength.
BYTE
MODE.

CONCATENATE
ENDIF.
l_length
ENDLOOP.

w_file

l_grline-line(l_length)

INTO

w_file

l_length

IN

BYTE

MODE.
l_linelength.

5. Generate a URL which will be linked with Image UI element.

After step 4, we have image data (xstring) in W_FILE parameter. Now a URL needs to be generated
which image UI element will point to.
DATA:url
guid
cached_response

TYPE
TYPE
REF

TYPE

CREATE
TYPE
cl_http_response
EXPORTING
add_c_msg

string,
guid_32,
if_http_response.

TO

OBJECT

cached_response

*
set
cached_response->set_data(
cached_response->set_header_field(
name
=
value
=

image

to

mime
).

w_file

if_http_header_fields=>content_type
'image/pjpeg'
).

cached_response->set_status(
code
cached_response->server_cache_expire_rel(
180
CALL
IMPORTING
ev_guid_32

1.

200

reason
expires_rel

FUNCTION

'OK'

'GUID_CREATE'
=

cl_wd_utilities=>construct_wd_url(
application_name
=
'ZTEST1'
IMPORTING
out_local_url
CONCATENATE
url
'/'
cl_http_server=>server_cache_upload(
url
response = cached_response ).

).
=
).

guid.
"Webdynpro
=

guid

application
url

sy-uzeit

INTO

EXPORTING
name
).
url.
url

6. Set the above generated URL in Image UI element's source property.

In step1, we have created a Context attribute named IMAGE_URL which is linked to Image element's
Source property. In this step, we will set the value (url created in above step) in this attribute.
DATA
DATA
DATA
*
lo_el_context

lo_el_context
ls_context
lv_image
get

TYPE

element
=

REF
TYPE
LIKE

TO

if_wd_context_element.
wd_this->element_context.
ls_context-image_url.

via
lead
wd_context->get_element(

selection
).

*
get
lo_el_context->set_attribute(
EXPORTING
name
value = url ).

single
=

Now activate the Web Dynpro component and test the application to see output.

attribute
`IMAGE_URL`