This step-by-step guide applies exclusively to FAB version 3.3.2 and above. The client system is required to be on UI5 version 1.88 or higher.
1. Identify all stand-alone FAB Form Apps that uses the deprecated controls, Upload Collection or Upload Collection By Key, and ensure they are backed up.
Once the upgrade is complete, whether it's a FAB upgrade or a UI5 version upgrade, compile a list of FAB Form apps within the system that require updates to their attachment controls. Below is an example checklist table for the tasks to be accomplished and checked.
App UI Name | With Upload Collection Control? | With UploadSet.js? | Need to Regenerate BSP? | Need to update form controller? |
|---|---|---|---|---|
ZFAB_* | Yes/No | Yes/No | Yes/No | Yes/No |
Make sure to create backups of the FAB form app, its code implementation, and the workflow configuration by utilizing the Export features found in the Form App, Code Implementation, and Process Designer areas, respectively.
2. Check and regenerate the BSP to include UploadSet.js in the application files under WebContent > Controls.
If all relevant FAB form applications are part of the same package, for example, ZIQX*, you can conveniently view the BSP application files in SE80. Look for UploadSet.js in the application's WebContent >Controls folder. This file should be automatically included for FAB form applications with BSP applications created after the FAB 3.3.2 upgrade.
If UploadSet.js is missing, you will need to regenerate the BSP through the transaction /IQX/FAB by selecting Properties and then Generate BSP.
Once done, verify the UploadSet.js in the WebContent > Controls application files.
3. Replace all UploadCollection controls in the FAB Form Hierarchy.
Do not remove the uploadCollection controls. Instead, disable them and make them invisible in the layout. Additionally, try to replicate the layout used for the uploadCollection as much as possible.
To add the UploadSet control as per your requirement, follow these steps:
The UI5 Control sap.m.UploadCollection will be deprecated as of UI5 version 1.88 and replaced by sap.m.upload.UploadSet. FAB Front-End and the workbench have been updated to support both sap.m.UploadCollection (UI5 ver. < 1.88) and sap.m.upload.UploadSet (UI5 ver. >= 1.88). While the Upload Collection control will still function for attachments, it is not supported beyond UI5 version 1.88.
Properties of Upload Set
- Id - unique identifier of the control
- Items - assign {/Attachments}
- On Upload - by default, assign the FAB pre-delivered Javascript Function "fabHandleFileUpload2(evt)"
- On Upload Complete - by default, assign the FAB pre-delivered Javascript Function "fabOnFileUploadComplete2(evt)"
- On Delete - by default, assign the FAB pre-delivered Javascript Function "fabOnFileDeleted2(evt)"
Advanced - properties of the control not available in the above list can be added here.
Setting Additional Properties provides further information about the Advanced property
Properties of Upload Set Item
- File Name - filename structure and by default assign {Objdes}.{FileExt}
- URL - URL of the file and by default assign {UrlContent}
- Enable Edit - set a boolean value or a variable with type boolean from the Model to control if Edit File functionality will be allowed
- Visible Edit - set a boolean value or a variable with type boolean from the Model to control if the Edit File button will be visible
- Enable Delete - set a boolean value or a variable with type boolean from the Model to control if Delete File functionality will be allowed
- Visible Delete - set a boolean value or a variable with type boolean from the Model to control if Delete File button will be visible
Step-by-step guide
How to add an Upload Set
- Right click on a Page, Form Element or from any elements under Add Layout and select Add Upload Set
- An Upload Set control with corresponding Upload Set Item has been added
- Intial Javascript should be implemented during the load of the page
//init file uploader
var oUploadSet = getControl("uploadSet1"); //this is the Id of the upload set control
fabSetFileUploaderURL2(oUploadSet);
fabSetUploadSetItems(oUploadSet);
Related articles
The UI5 Control sap.m.UploadCollection will be deprecated as of UI5 version 1.88 and replaced by sap.m.upload.UploadSet. FAB Front-End and the workbench have been updated to support both sap.m.UploadCollection (UI5 ver. < 1.88) and sap.m.upload.UploadSet (UI5 ver. >= 1.88). While the Upload Collection control will still function for attachments, it is not supported beyond UI5 version 1.88.
When more than one Upload Set is required in an application, the need to categorize the attachments based on some key is needed. This is useful as you can then easily determine the purpose or intent of an attachment within the context of the application.
- To add an "Upload Set By Key" control to your app, right click in the Form Structure section and selection Add Other → Add Upload Set By Key.
- You can then set the Key property as shown below to something that will uniquely identify this particular collection of attachments.
4. Adjust Form Structure, Controller and GS_DATA model as needed
Custom scripts are sometimes used for events that involve uploading attachments. Below is a sample comparison:
In cases like these, it's necessary to update the form structure, controller and data model accordingly.
Here is quick reference for FAB built-in scripts conversion:
Upload Collection → Upload Set
Event On Upload → Event Before Upload Starts
fabHandleFileUploadByKey(evt) → fabHandleFileUploadByKey2(evt)
Event On Upload Complete
fabOnFileUploadByKeyComplete(evt) → fabOnFileUploadByKeyComplete2(evt)
Event On Delete
fabOnFileByKeyDeleted(evt) → fabOnFileByKeyDeleted2(evt)
Here are some sample script adjustments for Capital Expenditure Request:
Add Comment