SQL Server administration and T-SQL development, Web Programming with ASP.NET, HTML5 and Javascript, Windows Phone 8 app development, SAP Smartforms and ABAP Programming, Windows 7, Visual Studio and MS Office software
Development resources, articles, tutorials, code samples, tools and downloads for SAP HANA and ABAP, HANA Database, SQLScript, SAP UI5, Screen Personas, Web Dynpro, Workflow

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.

Web Dynpro Main View attributes for SIBFLPORB for ABAP class cl_fitv_gos class

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.

SAP web dynpro Main view

The Context of Main view is worth to talk about. I create following context node and attributes.

Web Dynpro Main view context

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

Web Dynpro context node ATTA to store attachments

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

content in xstring type

Another important context object is the FileName attribute which has the STRING data type as seen in below screenshot.

filename as string

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.

SAP web dynpro table element to display attachment 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.

SAP Web Dynpro FileUpload element context attributes

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.

button to call upload action on web dynpro

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.

SAP Web Dynpro table element data source as context ATTA

Other important configuration change on Table element is to create new event for onSelect event property. I named the new onSelect event as SELECTROW.

Web Dynpro onSelect event for SAP Table event

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.


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

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( ).

  name = `CONTENT`
  value = lv_content ).

  name = `FILENAME`
  value = lv_filename ).

*** check if a valid file is selected for upload

*** 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.
 wdevent = lv_event2

DATA lt_return TYPE bapirettab.

CALL METHOD cl_fitv_gos=>save
  iv_name = lv_filename
  iv_content_hex = lv_content
  is_lporb = wd_this->ms_lporb
  iv_objtp = 'EXT'
  rt_messages = lt_return.


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
  is_lporb = wd_this->ms_lporb " business object
  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 ).


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
  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
  iv_atta_id = lv_atta_id
  iv_objtp = lv_objtp
  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)
  extension = ls_atta-file_ext " stru_attachments
  mimetype = lv_mimetype.
MOVE lv_mimetype TO lv_str_mimetype.

CALL METHOD cl_wd_runtime_services=>attach_file_to_response
  i_filename = lv_filename
  i_content = lv_content
  i_mime_type = lv_str_mimetype
  i_in_new_window = abap_true
  i_inplace = abap_true.


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:

test file upload on SAP Web Dynpro application

Click on Browse button to select the file to upload as an attachment for the business object.
Using file explorer dialog, select the file.

browse and upload file on SAP Web Dynpro using GOS Business Object

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.

upload file on Web Dynpro and list attachments on table

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.

display attached file on seperate web browser tab

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.


Install SAP Free
CRM Companies List
Web Based CRM Software

Copyright © 2004 - 2021 Eralper YILMAZ. All rights reserved.