Displaying image from database table.

[Former Member]

Hi All,

I am very new to Web Dynpro ABAP.

I am developing an application to display an image in "Image" UI Element.

For this I have one table consisting of fields image id, image data and image name. here image id is primary key field.

Now i want to display an image from that table in "Image" UI Element. For this i am using "Filedown load" UI element.

But by using filedownload ui element i can diaplay image in another new page.

But my requirement is to display image in the same web page without creating a new one.

(I want to display the image in "Image" UI element without storing that image in MIME objects.)

Can anyone help me.

Thanks in Advance!

Regards,

Sreelakshmi.

[thomas_jung · Accepted solution]

What you describe is completely possible. Since you have the image data (XSTRING) in the context you have everything you need. You don't need to store the content into the MIME Repository, but you do need to get it somewhere where it has an externally accessible URL. Remember you need to supply image UI element with a URL. This URL is processed on the client side by the web browser. Therefore just giving it a path to the context won't work as that isn't externally accessible.

I would suggest instead that you place the image content into the ICM cache temporarily. This lets you basically generate a temporary URL for the image that can be used by the Image UI element.

Here is some example code that pushes images into the ICM Cache:

****Create the cached response object that we will insert our content into
  DATA: cached_response TYPE REF TO if_http_response.
  CREATE OBJECT cached_response
    TYPE
      cl_http_response
    EXPORTING
      add_c_msg        = 1.
   try. " ignore, if compression can not be switched on
      call method cached_response->set_compression
        exporting
          options = cached_response->co_compress_based_on_mime_type
        exceptions
          others  = 1.
    catch cx_root.
  endtry.
****set the data and the headers
  DATA: l_app_type TYPE string.
  DATA: l_xstring TYPE xstring.
      cached_response->set_data( me->gx_content ).
      l_app_type = me->gx_mimetype

  cached_response->set_header_field( name  = if_http_header_fields=>content_type
                                     value = l_app_type ).
****Set the Response Status
  cached_response->set_status( code = 200 reason = 'OK' ).

****Set the Cache Timeout - 60 seconds - we only need this in the cache
****long enough to build the page and allow the Image on the Client to request it.
  cached_response->server_cache_expire_rel( expires_rel = I_CACHE_TIMEOUT ).

****Create a unique URL for the object
  DATA: guid TYPE guid_32.
  CALL FUNCTION 'GUID_CREATE'
    IMPORTING
      ev_guid_32 = guid.
  CONCATENATE i_path '/' guid '.' i_format INTO r_url.

****Cache the URL
  cl_http_server=>server_cache_upload( url      = r_url
                                       response = cached_response ).

[Former Member · Accepted solution]

Hi Thomas,

Thanks for your reply.

I am understood some points from your replay but not full . I am very new to WEB DYNPRO ABAP.

I understood that to do my application, first i have to store my image data in ICM cache and from there i have to access that image in to "Image" UI Element's source property right!

But where i have to write this code? and how to export my image (stored in my own table) into ICM cache ? and how to map that image data to "Image" UI Element's source property?

Can you please explain me in detail....

Thanks for your reply.

Edited by: sreelakshmi.B on Jul 7, 2009 3:26 PM

[thomas_jung · Accepted solution]

>But where i have to write this code?

Wherever you are populating your context data. Probably right after you read your image data from the database.

>and how to export my image (stored in my own table) into ICM cache ?

Thats what the provided code sample was. If the image is in your own database table, you just use SQL statements to read the data like any other content. The resulting data field will be a binary string (XSTRING). This is where my code sample comes into play. It is all the steps necessary to put a binary string into the ICM cache and to generate a temporary URL for the cache entry.

>and how to map that image data to "Image" UI Element's source property?

Notice at the end of the code sample, I get a generated URL. You can place this URL back into a context attribute. Bind the Image Source property to this context attribute.

[Former Member · Accepted solution]

Hi Thomas,

Thanks for your fast replay.

I pasted entire code that you have provided . But I am getting compiletime errors.

I got errors like this...

" 'gx_content' is unkown".

Similarly for gx_mimetype, I_CACHE_TIMEOUT and R_URL.

here in my application I didn't use any MIME types...

Can you please explain me why am getting these errors....?

And give me any solutions to overcome these errors.

Thanks in Advance!

[thomas_jung · Accepted solution]

>Can you please explain me why am getting these errors....?

You have to adjust the code sample to your variables. You can't just cut and paste it into your system and expect it to work. gx_content is the binary string (XSTRING) with my image data. gx_mimetype is the MIME Type for image. You can determine this from the file extension. For instance Bitmaps (BMPs) have different Mimetypes than JPegs. I_CACHE_TIMEOUT is just a variable to hold the amount of seconds that I want to cache the content for. You can decide how long you need to cache your content for. R_URL is a returning parameter that sends the generated URL back to the calling program. This is the URL value that you need to store in your context for binding to the Image UI element.

[Former Member · Accepted solution]

Hi Thomas,

Now I changed all those things into my own contexts, now i am able to deploy my application.

But i didn't get image in image UI element.

I put a breakpoint at this statement, i didn't get any value in "guid"...

But i would like to know about " CONCATENATE i_path '/' guid '.' i_format INTO R_Url."

here what is " i_path" and " i_format" ?

I have to specify the i_path like " http://......."; or it is auto generated one?

similarly for i_format....

Can you please help me.

Thanks in advance!

Edited by: sreelakshmi.B on Jul 8, 2009 10:35 AM

[VijayReddy19 · Accepted solution]

Hi Thomoas,

My requirement is to disply the employee photo (passport photo from PA30/PA20) in the custom webdynopro employee search application baed on employee number. (Critial requirement)

I am facing problem while converting the image to xsting (am able to convert attachment to xstring, in resume display application), once I get the xstring I can use your logic to get the URL but i am able to generate the xstring for the employee photo.

Appreciate your early response.

also please let me know what is the best way to get display the photo in this case.

Regs,

Vijay

[thomas_jung · Accepted solution]

You've posted this same question at the end of couple of threads. It really would have been better if you simply posted one new thread to ask your question instead of duplicating the question and adding it to existing threads. You also emailed me the question directly. Perhaps you could have given the forum a little bit of time to respond before also email the question.

In general please describe exactly what kind of problem you are having converting the image into an XSTRING. How is the image stored now that it needs such a conversion?

[Former Member · Accepted solution]

My issue is bit similar to the issue which is posted in both the threads so to avoid the duplicate I raised in the same threads.

Now I will post new thread with more details and options what we have treid. Sorry for the inconvenience caused

Regs,

Vijay

[Former Member · Accepted solution]

It Works for me...Thanks..

[Former Member · Accepted solution]

Hi thomas,

         i am working on new functionality..there i am storing a image into content repository using

ARCHIV_CREATE_DIALOG_META Fm. In Gui to display this i am using cl_dv_viewer->show_document method. i am able to get URL for this link as SAPR3://SAPR3CMS/get/040/MA/005056BF4EB51EE2B7CCB9E8FA62619B//.JPG

But in BSP i am not able display image using this link. Is there any way to get hex data for this link so as to use above logic to generate new link for BSP.

Regards,

Praveen

[Former Member]

l_app_type = me->gx_mimetype
 
  cached_response->set_header_field( name  = if_http_header_fields=>content_type
                                     value = l_app_type ).

Can anyone tell me what's the value of l_app_type? I can't see the object in the server cache in SMICM. Thanks so much.

[Former Member]

Hi Chris Xu ,

Here, l_app_type is a variable of type STRING.

if contains the type of the image ( e.g MIME TYPE ) like...'image/jpeg' or 'gif' ....

  DATA: L_APP_TYPE TYPE STRING.
  L_APP_TYPE = 'image/jpeg'.
 
  CACHED_RESPONSE->SET_HEADER_FIELD( NAME  = IF_HTTP_HEADER_FIELDS=>CONTENT_TYPE
                                                                           VALUE = L_APP_TYPE ).

Thanks!

[former_member189690]

Hi guys,

I have employee photos stored in archive link under PREL HRICOLFOTO object.

The question is: how can I get the image and link it on an image UI element on WDA?

I'm trying use ARCHIV_GET_CONNECTIONS function module to obtain ARC_DOC_ID field, but I don't know which is the following step.

I've tried to implement Thomas source code assigning ARC_DOC_ID to l_image variable but nothing happens.

Is there any way to get bynary string of the archivelin image to show it correctly?

Thank you.

[former_member189690]

Hello,

Any idea to solve my issue.

thanks in advance...

[Former Member]

Thank you very much Thomas!

[Former Member]

Hi sreelakshmi.B .

Can you just let me know how you were able to create the temporary URL to the ICM server cache?

Regards,

Runal

[thomas_jung]

The code to generate the temporary URL is all there in my previous thread:

****Create a unique URL for the object
  DATA: guid TYPE guid_32.
  CALL FUNCTION 'GUID_CREATE'
    IMPORTING
      ev_guid_32 = guid.
  CONCATENATE i_path '/' guid '.' i_format INTO r_url.
 
****Cache the URL
  cl_http_server=>server_cache_upload( url      = r_url
                                       response = cached_response ).

For the i_path variable, you can use any valid ICM path. The usage of /sap/public/ is quite good, but you can also use your current WDA application path as well. The GUID is globally unique ID. I_FORMAT in this example is the file extension (JPG, BMP, GIF, etc).

[Former Member]

Hi Runal,

Here in previous mentioned code, we use "GUID_CREATE" function for creating temporary URL. Then it is assiged to your Image UI Element's source property. It'll create the URL as "/sap/public/431C72C4F231614C8F91B0462FD2BA1C.jpgl".

Please follow the Thomas Jung's replies.

It will help you.

Thanks!

[Former Member]

Hi Thomas,

I am trying exactly as said above but the image doesnt get displayed. Infact after debugging i found out , it exit outs raising an exception ICM_OP_FAILED. I tried calling the FM 'ICM_CACHE_UPLOAD' separately but that too exits with the same exception.

Just one more question along with this, will i find my URL in t-code SMICM when navigated through menu option Goto->HTTP Server Cache->Display. Correct me if this is the right place to find the URL ??

Regards,

Runal

[thomas_jung]

>

> Hi Thomas,
> 
> I am trying exactly as said above but the image doesnt get displayed. Infact after debugging i found out , it exit outs raising an exception ICM_OP_FAILED. I tried calling the FM 'ICM_CACHE_UPLOAD' separately but that too exits with the same exception.
> 
Check in debugging and make sure you have a valid ICM path specified. I'm not sure what else could cause an error. I've been using this same logic since the BSP days of 6.10 and there isn't really any variation to how it works. 
> Just one more question along with this, will i find my URL in t-code SMICM when navigated through menu option Goto->HTTP Server Cache->Display. Correct me if this is the right place to find the URL ??
> 
> Regards,
> Runal

Yes you should see it here, but hurry. Remember we are setting a timeout for the object as we set into the cache. In my example I set the timeout to 60 seconds as I only need it cached long enough to finish the page build and be requested form the client.

[Former Member]

Hi Thomas,

Thanks for the answers and helping me out, it works now. I was using relatively low value for the timeout. It works now when increased to 60 Seconds.

Regards,

Runal

[Former Member]

Hi Thomas,

still, i didn't get the image.

I am able to create temporary URL for image. ex- /sap/public/E09C6C9A9BEF8148A8D4AA008CA61896.html

But it does not display the image.

Can you please help me.

Thanks in Advance!

Edited by: sreelakshmi.B on Jul 8, 2009 3:03 PM

[thomas_jung]

Your Temporary URL ends in HTML. That doesn't seem correct for an image. I doubt the Image HTML tag within the browser will accept HTML. You need a JPG, GIF, or other image type.

[Former Member]

hi,

usually for the image ui elemnt to display the image, the source property should be specified as like you need to specify the path name in that case of you image..

so what you do is that create a context as you have already created.... but there should be an node element in your context which hold the path name of the image...

now bind this node element to your image ui element's source property....

hope this will surely help you!!!

Thanks & Regards,

Punit Raval.

[Former Member]

Hi,

Thanks for your replay.

According to your suggestion I created context node with dictionary structure ZIMAGE table. And I select the imagename field as attribute to this context node. Then I mapped this attribute to the "Image " UI Element.

But I got an error while deploying it!

The error is " The lead selection has not been set. IMG_VIEW "

Thanks in advance!

[Former Member]

Hi Sreelakhmi

Try to set the leadselectionproperty of the node(zimage which is binded to Image UI element to true.

or

Make the cardinalityof the node to 1..n

then it works.

Thanks

Tulasi Palnati

Edited by: Tulasi Palnati on Jul 6, 2009 12:01 PM

[Former Member]

Hi,

One thing you do. Create a context node for this images table and bind the table to it.

Inside a transparanet container, create a Image UI element and bind the source to this node.

Based on the condition, you can display whatever image you want.

Regards,

Lekha.