SAP Web Dynpro File Upload using GOS cl_fitv_gos Class
In this Web Dynpro tutorial, I'll be demonstrating the usage of cl_fitv_gos class (GOS Service) for file upload, or file attach to a business object as well as list attached files and downloading a selected attachment.
ABAP programmers can use SE80 Workbench tool to create Web Dynpro component which is talked about in this SAP tutorial. Creating a custom business object is not detailed in this SAP tutorial, I'll be adding a reference link showing how to create a custom business object in SAP system in following days.
Let's start our Web Dynpro tutorial immediately. After ABAP programmers create a new Web Dynpro component continue with below steps in order. After completing all the steps in this SAP tutorial, programmers will have a running Web Dynpro page where SAP users can upload, list or select an display file attachments related with a record referred as business object.
Create MS_LPORB SIBFLPORB Attribute for Business Object
Open Main View and switch to Attributes tab. Define the MS_LPORB attribute with associated type SIBFLPORB. In this Web Dynpro tutorial, we will use this attribute MS_LPORB in method calls of cl_fitv_gos class to point to the business object.
Later in this Web Dynpro tutorial, I'll give ABAP codes to set the business object key fields using ms_lporb-instid, ms_lporb-catid for defining the category as Business Object, and ms_lporb-typeid for the business object type. For this tutorial, I created a business object for custom campaign management solution named Z_CAMPMANG. I'll share how to create business object for file attachment process to simplify file upload tasks related with an SAP document later in an other tutorial.
Web Dynpro Main View Context
To display how to use cl_fitv_gos Gos Service class and its methods cl_fitv_gos=>save, cl_fitv_gos=>get_links or cl_fitv_gos=>get_content, I created following SAP Web Dynpro component. As ABAP programmers will see easily, the Web Dynpro component ZUPLOAD_DOWNLOAD is very simple and is only containing a Main view item.
The Context of Main view is worth to talk about. I create following context node and attributes.
ATTA node is used to store attachment list of target business object and bind list of attachments to Web Dynpro Table element for displaying to users on browser.
Node Name ATTA
Dictionary structure FITV_ATTA_STY
Cardinality 0..n
Selection 0..1
Initialization Lead Selection 1
Content attribute is being used to store the binary data of the file which is being selected to upload.
It is important to set the attribute type to XSTRING
Another important context object is the FileName attribute which has the STRING data type as seen in below screenshot.
Web Dynpro Main View Layout for File Upload, List and Display
The sample SAP Web Dynpro component has only one view which is the Main view. The Layout of the Main view is very basic, it does not have a complex structure of Web Dynpro elements.
As seen in below screenshot, the Main View Layout there is a FileUpload element.
Two Button controls, one for triggering Upload event and one for to list the attached files to the business object.
The last layout element is the Table element which is used to display the list of attached files.
Let's start with the FileUpload element.
Data property of the FileUpload control has a binding to context attribute Content "MAIN.CONTENT".
ABAP programmer will remember that Main.Content context attribute has the data type XSTRING to keep the binary data of the selected image, text file, etc.
An other property FileName is bound to MAIN.FILENAME context attribute which is in STRING data type.
This two property bindings is the all necessary configuration of FileUpload element for this sample Web Dynpro tutorial.
Let's now continue with the button elements.
The first button element is as I named TRANSFER button. ABAP developers will only define a new event for onAction property of this button. I created the UPLOAD event for the Transfer button onAction property. This UPLOAD event will be calling cl_fitv_gos=>save method to save the selected binary file as an attachment to the current business object.
The second button layout element which I named as LIST is also configured for its onAction property.
I created a new event named LIST (just like the button name) where ABAP programmers will be executing the cl_fitv_gos=>get_links method of the cl_fitv_gos class.
Then the returned items list will be bound to context node ATTA. This binding will automatically display the attachment items list on the layout table object.
The last layout control we will talk about as the visual part of this Web Dynpro tutorial is the Table control.
DataSource property has a binding to context node ATTA as seen in below screenshot.
Other important configuration change on Table element is to create new event for onSelect event property. I named the new onSelect event as SELECTROW.
ABAP programmers will add required code to show and download attachment file when selected on the table element. I'll share with developers all ABAP codes required in all events for this Web Dynpro tutorial in following sections.
Actions List
Let's check the Actions tab and be sure that following actions are automatically created when the Events are defined on Layout for the layout elements. Here is the actions list in order: LIST, SELECTROW and UPLOAD.
Web Dynpro Methods List
Now we can concentrate on the Web Dynpro methods and the ABAP codes to execute within these methods.
The methods we will focus on are namely;
ONACTIONUPLOAD (executed when Transfer button is clicked),
ONACTIONLIST (executed when List button is pressed),
ONACTIONSELECTROW (when an attachment item row is selected on the list table), and
SETBUSINESSOBJECT (see below note)
For the sake of simplicity I create and set key properties of the business object in a seperate method. I named this method as SETBUSINESSOBJECT. Within this method, I populate MS_LPORB attribute (of type SIBFLPORB) of the Main view. This attribute MS_LPORB shows the business object which all attached filed are uploaded for.
SETBUSINESSOBJECT Set Business Object for GOS Service
Within sample Workflow tutorial demonstrating file attachment and file upload for selected business objects, I use setbusinessobject method to set business object relation using MS_LPORB object reference with the GOS Service class cl_fitv_gos.
Following code is recalled within Web Dynpro ABAP codes as follows;
wd_this->setbusinessobject( ). " fetch Business Object data
Please note that my business object has two fields as the key field combination; campaign_id and revision_id.
I concatenate these two key fields and set as the ms_lporb-instid attribute ID property value.
My sample business object category is BO and has a Z-type which I defined previously.
method SETBUSINESSOBJECT .
DATA: lv_campaign_id TYPE /kodyaz/som_cmp_id VALUE '9000000202'.
DATA: lv_revision_id TYPE /kodyaz/som_rev_id VALUE '00'.
TYPES: BEGIN OF gty_id, " type containing key fields of the business object
campaign_id TYPE /kodyaz/som_cmp_id,
revision_id TYPE /kodyaz/som_rev_id,
END OF gty_id.
DATA ls_id TYPE gty_id. " structure with key fields of the business object
**********************************************************************
*** Populate business object data
ls_id-campaign_id = lv_campaign_id.
ls_id-revision_id = lv_revision_id.
MOVE ls_id TO wd_this->ms_lporb-instid.
wd_this->ms_lporb-instid = wd_this->ms_lporb-instid+0(38).
wd_this->ms_lporb-typeid = 'Z_CAMPMANG'.
wd_this->ms_lporb-catid = 'BO'. " Business Object
***
endmethod.
ONACTIONUPLOAD Upload File using FileUpload Element
OnActionUpload method is executed when the Upload button is pressed on the web page. ABAP programmers will remember, we have defined an action on the Main view layout for the upload button. Within this event, SAP Web Dynpro developers will read the file data (image or text file itself as XSTRING as well as file name, etc) which is selected using the FileUpload WebDynpro element. Since the file name and binary data are bind to context attributes namely CONTENT and FILENAME, to read this data into ABAP variables is not difficult.
METHOD onactionupload .
**********************************************************************
*** read CONTENT and FILENAME context values from FileUpload layout control
DATA lo_el_context TYPE REF TO if_wd_context_element.
DATA ls_context TYPE wd_this->element_context.
DATA lv_content TYPE wd_this->element_context-content.
DATA lv_filename TYPE wd_this->element_context-filename.
lo_el_context = wd_context->get_element( ).
lo_el_context->get_attribute(
EXPORTING
name = `CONTENT`
IMPORTING
value = lv_content ).
lo_el_context->get_attribute(
EXPORTING
name = `FILENAME`
IMPORTING
value = lv_filename ).
*** check if a valid file is selected for upload
CHECK lv_filename IS NOT INITIAL.
CHECK lv_content IS NOT INITIAL.
***
**********************************************************************
*** Populate Business Object and Save file using GOS
wd_this->setbusinessobject( ). " fetch Business Object data
* get list beforehand.
* this prevents save method call resulting with no uploads without error
DATA lv_event2 TYPE REF TO cl_wd_custom_event.
wd_this->onactionlist(
wdevent = lv_event2
).
*
DATA lt_return TYPE bapirettab.
CALL METHOD cl_fitv_gos=>save
EXPORTING
iv_name = lv_filename
iv_content_hex = lv_content
is_lporb = wd_this->ms_lporb
iv_objtp = 'EXT'
RECEIVING
rt_messages = lt_return.
***
ENDMETHOD.
The cl_fitv_gos class (GOS service) static method call cl_fitv_gos=>save is then used to store the selected file as an attachment to the defined business object. In my case this object is the campaign management system campaign header record.
Programmers can understand the reason behind CHECK command statements used above. These value controls will prevent the event code execute when no file is selected using FileUpload element on the front side.
ONACTIONLIST Get Attachment List and Display on Web Dynpro Table
When List button placed on Web Dynpro component layout is clicked on the web browser, this OnActionList event is triggered.
After business object is populated, get_links method of the cl_fitv_gos GOS class is called which returns the attachment list as an internal table using et_items parameter.
Right after lt_atta table is filled with attachment list details, it is set to the ATTA context node which is the data source of the layout Table element.
METHOD onactionlist .
**********************************************************************
*** fetch Business Object
wd_this->setbusinessobject( ).
***
**********************************************************************
*** Read attachments for the related business object
***
DATA lt_atta TYPE fitv_atta_tty.
DATA lt_messages TYPE bapirettab.
CALL METHOD cl_fitv_gos=>get_links
EXPORTING
is_lporb = wd_this->ms_lporb " business object
IMPORTING
et_items = lt_atta " attachment list
et_messages = lt_messages.
***
**********************************************************************
*** Bind internal table containing attachments list to table context
***
DATA lo_nd_atta TYPE REF TO if_wd_context_node.
lo_nd_atta = wd_context->get_child_node( name = wd_this->wdctx_atta ).
lo_nd_atta->bind_table( new_items = lt_atta
set_initial_elements = abap_true ).
***
ENDMETHOD.
ONACTIONSELECTROW Display Attachment for Download
When the SAP user clicks on a table row, WebDynpro Table onSelect event is triggered. This event enables Web Dynpro ABAP programmers to display the selected attachment file on a seperate web browser tab.
The selected row data is obtained from the OnSelect event new_lead_selection parameter.
After clicked attachment row data is fetched, the input parameters of the cl_fitv_gos=>get_content static method is set and executed.
cl_fitv_gos=>get_content method call returns the binary data of the attachment file.
When the binary content is obtained, this data is sent back to SAP user as a web response using the method call cl_wd_runtime_services=>attach_file_to_response.
METHOD onactionselectrow .
**********************************************************************
*** Read Selected Table Line Data
***
DATA lo_nd_atta TYPE REF TO if_wd_context_node.
DATA lo_el_atta TYPE REF TO if_wd_context_element.
DATA ls_atta TYPE wd_this->element_atta.
lo_nd_atta = wd_context->get_child_node( name = wd_this->wdctx_atta ).
lo_el_atta = new_lead_selection.
* get all declared attributes
lo_el_atta->get_static_attributes(
IMPORTING
static_attributes = ls_atta ).
***
**********************************************************************
*** Read attachment binary data into variable
***
DATA lv_atta_id TYPE so_entryid.
DATA lv_objtp TYPE so_obj_tp.
DATA lv_content_str TYPE string.
DATA lv_content TYPE xstring.
CONCATENATE ls_atta-folder_id ls_atta-object_id INTO lv_atta_id RESPECTING BLANKS.
lv_objtp = ls_atta-objtp.
CALL METHOD cl_fitv_gos=>get_content
EXPORTING
iv_atta_id = lv_atta_id
iv_objtp = lv_objtp
IMPORTING
ev_content = lv_content_str
ev_content_hex = lv_content.
***
**********************************************************************
* check web dynpro FITV_VC_TRIP_DOCUMENTS for sample
***
DATA lv_filename TYPE string.
DATA lv_mimetype TYPE mimetypes-type.
DATA lv_str_mimetype TYPE string.
DATA lv_file_name TYPE string.
DATA lv_file_ext TYPE c LENGTH 4.
*** set file name
CONCATENATE ls_atta-objdes '.' ls_atta-file_ext INTO lv_filename.
*** get mime type for extension (from png to image/png)
CALL FUNCTION 'SDOK_MIMETYPE_GET'
EXPORTING
extension = ls_atta-file_ext " stru_attachments
IMPORTING
mimetype = lv_mimetype.
MOVE lv_mimetype TO lv_str_mimetype.
CALL METHOD cl_wd_runtime_services=>attach_file_to_response
EXPORTING
i_filename = lv_filename
i_content = lv_content
i_mime_type = lv_str_mimetype
i_in_new_window = abap_true
i_inplace = abap_true.
ENDMETHOD.
I hope this Web Dynpro tutorial will be useful for ABAP programmers to use GOS service for file attach to a business object using cl_fitv_gos methods to upload, list, get attachment file data.
Test Web Dynpro on Web Browser
After completing Web Dynpro development and codings on SE80 ABAP WorkBench, now create Web Dynpro application for your component. Then you can test your development on a web browser. When the page is first displayed, SAP users will see as follows:
Click on Browse button to select the file to upload as an attachment for the business object.
Using file explorer dialog, select the file.
Then press the Upload button.
Upload button will trigger the file upload and cl_fitv_gos class save method automatically. After uploaded file is saved, it will be listed on the table element as seen below.
The last thing I'll demonstrate on this Web Dynpro tutorial will be displaying back the uploaded file. Press on the table line which you want to show its content.
The selected uploaded file from the Web Dynpro table will be displayed on a seperate web browser tab in the above screenshot.
This is all I will share with ABAP programmers in this SAP Web Dynpro tutorial. I found it easy to use and safe to save text files as well as images files using cl_fitv_gos class known as GOS Service. I believe ABAP developers can use cl_fitv_gos class methods save, get_links, get_content easily.
