SAP Community Network Wiki - CRM - Upload and display images in...

http://wiki.sdn.sap.com/wiki/display/CRM/Upload+and+display+imag...

Log In

Register

About Us

How to Contribute

Store

Welcome Guest

SDN Community
Home Forums Wiki Blogs

BPX Community
Articles eLearning

Business Analytics
Downloads

University Alliances
Career Center

SAP EcoHub
InnoCentive Idea Place SAP Help Portal

Code Exchange

Events

Upload and display images in web ui screen

Added by Arun Kumar, last edited by Arun Prakash Karuppanan on Nov 19, 2010

Link to Content's target Space :

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

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

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.

1 din 5

27.10.2011 17:11

SAP Community Network Wiki - CRM - Upload and display images in...

http://wiki.sdn.sap.com/wiki/display/CRM/Upload+and+display+imag...

lv_strlen lv_offset lv_bytes_rd lv_bytes_rm

= = = =

XSTRLEN( lv_str ). 1022. 0. 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:

2 din 5

27.10.2011 17:11

SAP Community Network Wiki - CRM - Upload and display images in...

http://wiki.sdn.sap.com/wiki/display/CRM/Upload+and+display+imag...

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 lr_msg * Workarea declaration DATA: ls_business_object ls_properties ls_file_access_info ls_content ls_loio ls_phio ls_error * Internal table declaration DATA: lt_properties lt_file_access_info lt_content * Local variable declaration DATA: lv_file lv_str lv_offset lv_strlen lv_bytes_rd lv_content_type lv_file_name lv_fileext lv_url lv_file_size lv_bytes_rm lv_filepath lv_filename * Field-symbols declaration FIELD-SYMBOLS: <fs> TYPE ANY.

TYPE REF TO cl_thtmlb_fileupload, TYPE REF TO cl_bsp_wd_message_service. TYPE TYPE TYPE TYPE TYPE TYPE TYPE sibflporb, sdokpropty, sdokfilaci, sdokcntbin, skwf_io, skwf_io, skwf_error.

TYPE sdokproptys, TYPE sdokfilacis, TYPE sdokcntbins. TYPE TYPE TYPE TYPE TYPE TYPE TYPE TYPE TYPE TYPE TYPE TYPE TYPE fileextern, xstring, i, i, i, w3conttype, string, string, saeuri, sdok_fsize, i, string, string.

* 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 ls_business_object-typeid ls_business_object-catid = sy-uname. = 'USER'. = '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 '.'. = 'KW_RELATIVE_URL'. = lv_file.

ls_properties-name ls_properties-value

3 din 5

27.10.2011 17:11

SAP Community Network Wiki - CRM - Upload and display images in...

http://wiki.sdn.sap.com/wiki/display/CRM/Upload+and+display+imag...

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 lv_offset lv_bytes_rd lv_bytes_rm = = = = XSTRLEN( lv_str ). 1022. 0. 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.

Thanks & Regards, Arun Kumar

Labels
attachments upload images documents cl_crm_documents webui

Comments (3)

4 din 5

27.10.2011 17:11

SAP Community Network Wiki - CRM - Upload and display images in...

http://wiki.sdn.sap.com/wiki/display/CRM/Upload+and+display+imag...

Contact Us Site Index Marketing Opportunities Powered by SAP NetWeaver

Legal Terms

Privacy

Impressum

5 din 5

27.10.2011 17:11