Registration

Dear SAP Community Member,
In order to fully benefit from what the SAP Community has to offer, please register at:
http://scn.sap.com
Thank you,
The SAP Community team.
Skip to end of metadata
Go to start of metadata


Link to Content's target Space :

 http://wiki.sdn.sap.com/wiki/display/CRM/CRM+Web+Client+UI+Framework

Applies to:

CRM 6.0/7.0

Summary

Uploading documents as attachments using cl_crm_documents class and displaying images in web ui screen.

Author(s):  

   
Company:     
Created on:   May'15 2010
Author(s) Bio
Arun Kumar is a CRM developer working with Accenture.

General description:

This wiki explains how to upload documents & images  using cl_crm_documents class and display images in web ui screen. The standard attachments tab lists the uploaded documents & images as individual links and the images are opened in a new window. This wiki also covers how to populate images in the standard web ui screen.

Implementation:

Create a component in transaction BSP_WD_CMPWB and add a view with view type 'Form View' or 'Empty View'. In this wiki its just an empty view without any context nodes.

The view  layout is enhanced with a fileupload tag to upload images and an image tag to display images.

<thtmlb:fileUpload id = "imgUpl"
             onUpload = "upload" />
<thtmlb:image src    = "<%= controller->gv_url %>"
              width  = "175"
              height = "175" />

The upload event triggers the server event EH_ONUPLOAD in controller class.

Event EH_ONUPLOAD:

The method gets triggered when user selects the file path and clicks Upload button.

The importing parameter htmlb_event_ex has reference to thtmlb:fileUpload tag. Assign htmlb_event_ex to reference variable lr_file of type ref to cl_htmlb_fileupload.

Extract filename and file extension from file path using function module 'CRM_KW_SPLIT_FILENAME'

lv_filepath  = lr_file->file_name.
lv_file_size = lr_file->file_length.

CALL FUNCTION 'CRM_KW_SPLIT_FILENAME'
EXPORTING
     iv_path           = lv_filepath
IMPORTING
     ev_filename       = lv_filename
     ev_extension      = lv_fileext
     ev_mimetype       = lv_content_type.

Assign business object so that the file can be accessed from the specified business object location. Since the business object type is USER and instance identifier is sy-uname, the uploaded document can be accessed via transaction crm_kw.

ls_business_object-instid = sy-uname.
ls_business_object-typeid = 'USER'.
ls_business_object-catid  = 'BO'.

The entire file content is stored as an xstring in lr_file->file_content. Since we use method create_with_table of cl_crm_documents class, the content is split into 1022 characters and inserted into an internal table.

* Move content to file_content to xstring lv_str
lv_str = lr_file->file_content.

lv_strlen   = XSTRLEN( lv_str ).
lv_offset   = 1022.
lv_bytes_rd = 0.
lv_bytes_rm = lv_strlen.

ASSIGN lv_str TO <fs>.
* Split file content to internal table lt_content of type SDOKCNTBINS.
WHILE lv_bytes_rd LT lv_strlen.
  IF  lv_bytes_rm LT lv_offset.
    ls_content-line = <fs>+lv_bytes_rd(lv_bytes_rm).
  ELSE.
    ls_content-line = <fs>+lv_bytes_rd(lv_offset).
  ENDIF.
  APPEND ls_content TO lt_content.
  lv_bytes_rd = lv_bytes_rd + lv_offset.
  lv_bytes_rm = lv_strlen - lv_bytes_rd.
  CLEAR ls_content.
ENDWHILE.

Now, is the final step. Upload the document to the system using CREATE_WITH_TABLE method from class CL_CRM_DOCUMENTS.The method returns the logical and physical id's of the document location.

CALL METHOD cl_crm_documents=>create_with_table
  EXPORTING
    business_object     = ls_business_object
    properties          = lt_properties
    file_access_info    = lt_file_access_info
    file_content_binary = lt_content
    raw_mode            = 'X'
  IMPORTING
    loio                = ls_loio
    phio                = ls_phio
    error               = ls_error.

Now, the image is uploaded to the system. But in order to display the image we need to get the document location as a URL. It can be done by passing the logical and physical id's of the document to method GET_WITH_URL of class CL_CRM_DOCUMENTS.

CALL METHOD cl_crm_documents=>get_with_url
  EXPORTING
    loio     = ls_loio
    phio     = ls_phio
    url_type = '2'
  IMPORTING
    error    = ls_error
    url      = gv_url.

The URL is assigned to public static variable gv_url.

In the layout the image location is passed through this variable <%= controller->gv_url. %>.

Screenshot:

Coding:

Layout Coding:

<%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>
<%@extension name="xhtmlb" prefix="xhtmlb" %>
<%@extension name="crm_bsp_ic" prefix="crmic" %>
<%@extension name="thtmlb" prefix="thtmlb" %>
<%@extension name="chtmlb" prefix="chtmlb" %>
<%@extension name="bsp" prefix="bsp" %>
<thtmlb:tray design = "PLAIN"
             height = "100%"
             id     = "de"
             title  = "Image Upload" >
  <thtmlb:trayBody>
    <thtmlb:grid cellSpacing = "1"
                 columnSize  = "8"
                 height      = "100%"
                 rowSize     = "2"
                 width       = "100%" >
      <thtmlb:gridCell colSpan             = "8"
                       columnIndex         = "1"
                       horizontalAlignment = "LEFT"
                       rowIndex            = "1" >
        <thtmlb:fileUpload id       = "imgUpl"
                           onUpload = "upload" />
      </thtmlb:gridCell>
    </thtmlb:grid>
  </thtmlb:trayBody>
</thtmlb:tray>
<br>
&nbsp;&nbsp;<thtmlb:image src    = "<%= URL %>"
              width  = "175"
              height = "175" />

Method EH_ONUPLOAD:


METHOD eh_onupload.

* Object declaration
  DATA:  lr_file                 TYPE REF TO cl_thtmlb_fileupload,
         lr_msg                  TYPE REF TO cl_bsp_wd_message_service.
* Workarea declaration
  DATA:  ls_business_object      TYPE sibflporb,
         ls_properties           TYPE sdokpropty,
         ls_file_access_info     TYPE sdokfilaci,
         ls_content              TYPE sdokcntbin,
         ls_loio                 TYPE skwf_io,
         ls_phio                 TYPE skwf_io,
         ls_error                TYPE skwf_error.
* Internal table declaration
  DATA:  lt_properties           TYPE sdokproptys,
         lt_file_access_info     TYPE sdokfilacis,
         lt_content              TYPE sdokcntbins.
* Local variable declaration
  DATA:  lv_file                 TYPE fileextern,
         lv_str                  TYPE xstring,
         lv_offset               TYPE i,
         lv_strlen               TYPE i,
         lv_bytes_rd             TYPE i,
         lv_content_type         TYPE w3conttype,
         lv_file_name            TYPE string,
         lv_fileext              TYPE string,
         lv_url                  TYPE saeuri,
         lv_file_size            TYPE sdok_fsize,
         lv_bytes_rm             TYPE i,
         lv_filepath             TYPE string,
         lv_filename             TYPE string.
* Field-symbols declaration
  FIELD-SYMBOLS: <fs> TYPE ANY.

* Get instance of message service
  lr_msg = cl_bsp_wd_message_service=>get_instance( ).

* Type cast server event to cl_htmlb_fileupload
  lr_file ?= htmlb_event_ex.

* Assign filepath and filesize to local variables
  lv_filepath             = lr_file->file_name.
  lv_file_size            = lr_file->file_length.

* Assign business object
* Since the object type is mentioned as 'USER', the uploaded file
* can be accessed via tcode CRM_KW

  ls_business_object-instid  = sy-uname.
  ls_business_object-typeid  = 'USER'.
  ls_business_object-catid   = 'BO'.

* Split the file path
  CALL FUNCTION 'CRM_KW_SPLIT_FILENAME'
    EXPORTING
      iv_path      = lv_filepath
    IMPORTING
      ev_filename  = lv_filename
      ev_extension = lv_fileext
      ev_mimetype  = lv_content_type.

  CONCATENATE   lv_filename lv_fileext
                INTO lv_file
                SEPARATED BY '.'.

  ls_properties-name         = 'KW_RELATIVE_URL'.
  ls_properties-value        = lv_file.
  APPEND ls_properties TO lt_properties.

  ls_properties-name         = 'LANGUAGE'.
  ls_properties-value        = sy-langu.
  APPEND ls_properties TO lt_properties.

* Assign file properties
  ls_file_access_info-file_size  = lv_file_size.
  ls_file_access_info-binary_flg = 'X'.
  ls_file_access_info-file_name  = lv_file.
  ls_file_access_info-mimetype   = lv_content_type.
  ls_file_access_info-property   = lv_fileext.
  APPEND ls_file_access_info TO lt_file_access_info.

* Move content to file_content
  lv_str = lr_file->file_content.

* The entire file content is stored in variable lv_str as a single string
* Split the string into 1022 chars and append to internal table lt_content.

  lv_strlen   = XSTRLEN( lv_str ).
  lv_offset   = 1022.
  lv_bytes_rd = 0.
  lv_bytes_rm = lv_strlen.

  ASSIGN lv_str TO <fs>.

  WHILE lv_bytes_rd LT lv_strlen.
    IF  lv_bytes_rm LT lv_offset.
      ls_content-line = <fs>+lv_bytes_rd(lv_bytes_rm).
    ELSE.
      ls_content-line = <fs>+lv_bytes_rd(lv_offset).
    ENDIF.
    APPEND ls_content TO lt_content.
    lv_bytes_rd = lv_bytes_rd + lv_offset.
    lv_bytes_rm = lv_strlen - lv_bytes_rd.
    CLEAR ls_content.
  ENDWHILE.

* Create a Document using class CL_CRM_DOCUMENTS
  CALL METHOD cl_crm_documents=>create_with_table
    EXPORTING
      business_object     = ls_business_object
      properties          = lt_properties
      file_access_info    = lt_file_access_info
      file_content_binary = lt_content
      raw_mode            = 'X'
    IMPORTING
      loio                = ls_loio
      phio                = ls_phio
      error               = ls_error.

* Populate status message
  IF ls_error IS INITIAL.
    CALL METHOD lr_msg->add_message
      EXPORTING
        iv_msg_type   = 'S'
        iv_msg_id     = 'ZMSG'                         "#EC NOTEXT
        iv_msg_number = '030'
        iv_msg_v1     = 'Picture uploaded successfully'.

* Using the logical and physical id's, get the file location as an URL

    CALL METHOD cl_crm_documents=>get_with_url
      EXPORTING
        loio     = ls_loio
        phio     = ls_phio
        url_type = '2'
      IMPORTING
        error    = ls_error
        url      = lv_url.

* Assign the URL to a global variable
        gv_url = lv_url.

  ELSE.

    CALL METHOD lr_msg->add_message
      EXPORTING
        iv_msg_type   = ls_error-type
        iv_msg_id     = ls_error-id
        iv_msg_number = ls_error-no
        iv_msg_v1     = ls_error-v1
        iv_msg_v2     = ls_error-v2
        iv_msg_v3     = ls_error-v3
        iv_msg_v4     = ls_error-v4.
  ENDIF.

ENDMETHOD.

Useful Information

Uploading documents and displaying images in web ui using CL_CRM_DOCUMENTS class.

 



Thanks & Regards,  Arun Kumar

8 Comments

  1. Guest

    Thank you very much for this posting, it's very helpful.

    I need to display a number of images (almost like very large buttons) that I can click on and have code executed accordingly. Can I ask what method I could use to achieve ths kind of functionality?. I can't use ordinary buttons as the images are square in shape, and I don't think you can add an image to standard buttons in this way.

    Jason

  2. Hi Jason,

    If you are adding buttons in prepare_toolbar method, then you can only use the images available in path 

    /SAP/BC/BSP/SAP/thtmlb_styles/sap_skins/default/images/.

    In case are creating the buttons directly in the layout page using thtmlb tags, then you can upload the images to the MIME repository of the same component & pass it to <thtmlb:button> tag parameter iconSrc,

    <thtmlb:button iconSrc="competitor.gif" tooltip="Competitor"  />

    Regards,

    Arun

  3. Guest

    Hello Arun,

    I have followed the above explained procedure to upload an image to the Web UI. But the image is not getting displayed. It is just showing the portion as coded in .htm page.

    Regards

    DNR Varma

  4. Hello Arun,

    The way you provided the procedure was nice. I have followed the steps provided here and I am not getting the image in the view, but I am getting the success message as image was uploaded successfully. Is there any thing missed to display the image, please let me know.

    Thanks in advance.

    Regards,

    Darwin.

  5. Hi Darwin,

    Check whether the correct URL passed to the image tag in layout page,

    <thtmlb:image src = "<%= URL %>"
            width&nbsp; = "175"
            height = "175" />
    

    Regards,

    Arun

  6. Hi Darwin,

    Check whether the correct URL passed to the image tag in layout page,

    <thtmlb:image src = "<%= URL %>"
            width  = "175"
            height = "175" />
    

    Regards,

    Arun

  7. Hi Arun,

    Thanks for your response. The URL passed by me is

    <thtmlb:image src    = "<%= CONTROLLER->GV_URL %>"
                      width  = "175"
                      height = "175" />

    In debugging I found that, In event handler method eh_onupload, we are using a class

    CALL METHOD cl_crm_documents=>get_with_url
          EXPORTING
            loio     = ls_loio
            phio     = ls_phio
            url_type = '2'
          IMPORTING
            error    = ls_error
            url      = lv_url.

    from this class we should get

    lv_url value na, but it is not getting. could u can say me why it is not getting.

    Thanks and Regards,

    Darwin

  8. Hi Darwin,

     

    Plz declare the GV_URL as an global attribute in your View(IMPL class). Then only U can call that in .htm page.

     

    Regards,

    MOHAMED