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.

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.

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.

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.

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.

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.