Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
Webdynpro ABAP

Table with Image UI element

This tutorial explains how to display the image within the Table UI element.

 

Step1: Go to the Tcode SE80 and create a Webdynpro component as below.

clip_image002

Assign the component to the package or save it in the local object.

Step 2: In the view tab of the view controller, create a context node as below.

clip_image003

 

Step 3: In the layout tab of the view controller, create a Table UI element and bind it to the context node created as shown below.

Provide the ID and Type for the UI element.

clip_image005

 

Right click on the table UI element and click on create binding. Choose the context node and change the cell editor of the column as image UI element.

clip_image007

 

Step 4: Code in the DOINIT Method:

 

* Getting the images from the table. 
  
 
DATA : it_image TYPE STANDARD TABLE OF zzcsk_image,
         wa_image
TYPE
zzcsk_image.
 

* Declaration for context node Image

    
 
DATA : lo_nd_image TYPE REF TO if_wd_context_node,
         lt_image   
TYPE       
wd_this->elements_image,
         ls_image   
TYPE       
wd_this->element_image.
 

* Declaration for holding the image in the browser cache



 
DATA :   lo_cache            TYPE REF TO if_http_response,
           lv_guid            
TYPE       
guid_32,
           lv_host            
TYPE       
string,
           lv_port            
TYPE       
string,
           lv_protocol        
TYPE       
string,
           lv_url             
TYPE       
string.

* Creating a cache handler


 
CREATE OBJECT lo_cache
   
TYPE

    cl_http_response
   
EXPORTING
      add_c_msg =
1.

* Getting the images from the table

 
SELECT * FROM zzcsk_image
        
INTO TABLE
it_image.



  lo_nd_image = wd_context->get_child_node( name = wd_this->wdctx_image ).


* Generating the URL for the image.


 
LOOP AT it_image INTO wa_image.

    ls_image-file_no = wa_image-file_no.
    ls_image-file_name = wa_image-file_name.


* Setting the XString format of image content in the cache.


    lo_cache->set_data( wa_image-content ).

    lo_cache->set_header_field( name  = if_http_header_fields=>content_type
                                     
value = 'image/jpeg' ).

* Create a unique URL for the object


 
CALL FUNCTION 'GUID_CREATE'
   
IMPORTING
      ev_guid_32 = lv_guid.

* Set the Response Status

     lo_cache->set_status(
code = 200 reason = 'OK' ).

* Set the timeout for the cache


      lo_cache->server_cache_expire_rel( expires_rel =
360 ).

* Getting the host , port and Protocol of the server


     
CALL METHOD cl_http_server=>get_location
        
EXPORTING

           server       = cl_wdr_task=>server
        
IMPORTING
           host         = lv_host
           port         = lv_port
           out_protocol = lv_protocol.


* Generating the URL

     
CONCATENATE
         lv_protocol
'://' lv_host ':' lv_port '/sap/bc/webdynpro/sap/'
         lv_guid
'.JPG'
        
INTO lv_url.

* Upload the generated URL in the cache


        cl_http_server=>server_cache_upload( url      = lv_url
                                            response = lo_cache ).


    ls_image-image = lv_url.
   
APPEND ls_image TO lt_image.
   
CLEAR
: wa_image, ls_image.

  ENDLOOP.

  lo_nd_image->bind_table( new_items = lt_image set_initial_elements = abap_true ).

 

Step 5: Create an application for the component and test the component.

Output:

 

clip_image009

 

 

 

 

 

 

 

 

 

 

 

 

 

About Arun

0 Comments:

Post a Comment

Powered by Blogger.