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

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 TYPE STXBITMAPS-TDNAME value 'ZLOGOTEST', i_id TYPE STXBITMAPS-TDID VALUE 'BMAP', i_btype TYPE STXBITMAPS-TDBTYPE VALUE 'BMON', l_bds_bytecnt TYPE i, l_bds_content TYPE TABLE OF bapiconten. *-- Get image contents CALL FUNCTION 'SAPSCRIPT_GET_GRAPHIC_BDS' EXPORTING i_object = 'GRAPHICS' i_name = i_name "Image name i_id = i_id i_btype = i_btype "Image type(color or gray) IMPORTING e_bytecount = l_bds_bytecnt TABLES content = l_bds_content[] EXCEPTIONS not_found = 1 OTHERS = 2. 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_length TYPE i, l_content TYPE tsf_xsf_ct, CALL FUNCTION 'SAPSCRIPT_CONVERT_BITMAP' EXPORTING old_format = 'BDS' new_format = 'BMP' bitmap_file_bytecount_in = l_bds_bytecnt IMPORTING bitmap_file_bytecount = l_length TABLES bds_bitmap_file = l_bds_content[] bitmap_file = l_content[] EXCEPTIONS OTHERS = 1. 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: w_file TYPE xstring, l_grline TYPE LINE OF tsf_xsf_ct, l_linelength TYPE i. DESCRIBE FIELD l_grline LENGTH l_linelength IN BYTE MODE. LOOP AT l_content INTO l_grline. IF l_length > l_linelength. CONCATENATE w_file l_grline-line INTO w_file IN BYTE MODE. ELSE. CONCATENATE w_file l_grline-line(l_length) INTO w_file IN BYTE MODE. ENDIF. l_length = l_length - l_linelength. ENDLOOP. 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 TYPE string, guid TYPE guid_32, cached_response TYPE REF TO if_http_response. CREATE OBJECT cached_response TYPE cl_http_response EXPORTING add_c_msg = 1. * set image to mime cached_response->set_data( w_file ). cached_response->set_header_field( name = if_http_header_fields=>content_type value = 'image/pjpeg' ). cached_response->set_status( code = 200 reason = 'OK' ). cached_response->server_cache_expire_rel( expires_rel = 180 ). CALL FUNCTION 'GUID_CREATE' IMPORTING ev_guid_32 = guid. cl_wd_utilities=>construct_wd_url( EXPORTING application_name = 'ZTEST1' "Webdynpro application name IMPORTING out_local_url = url ). CONCATENATE url '/' guid sy-uzeit INTO url. cl_http_server=>server_cache_upload( url = url response = cached_response ). 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 lo_el_context TYPE REF TO if_wd_context_element. DATA ls_context TYPE wd_this->element_context. DATA lv_image LIKE ls_context-image_url. * get element via lead selection lo_el_context = wd_context->get_element( ). * get single attribute lo_el_context->set_attribute( EXPORTING name = `IMAGE_URL` value = url ). Now activate the Web Dynpro component and test the application to see output.