SAPUI5 App and OData Service for Uploading Attachments / Posting Comments in SAP ( Open Source )
April 17, 2021
ABAP | OData | SAP | UI-SAPUI5-Fiori

This application allows to upload, download & delete the attachments and post & delete the comments in SAP. The user interface is build using SAPUI5 which integrates with the backend using the OData Service. The core idea is to deliver a re-usable OData service that allows management of the attachments and comments using Generic Object Services of SAP.

Design

The design is based on the instant upload of the attachments & comments to the linked GOS Object. If this is reused in other Apps then we have to delete attachments in case if user exit the screen without saving or submitting, same is explained in the features section

OData Service and related objects

  • Entity Set
    • AttachKeySet (For GOS Object Key) – The method Get Entity Set is not implemented for this as it is not needed. Only Get Entity is implemented to facilitate navigation to the associated child nodes AttachmentSet and CommentSet
    • AttachmentSet – List of Attachments
    • CommentSet – List of Comments
  • Important Classes
    • ZCL_CA_GOS_ATTACHMENTS – CRUD operations on Generic Object Service
    • ZCL_CA_ATTACHMENT_SERVICE – Wrapper class that mimics the interface of Data Provider Class, so that it becomes easy to reuse and consume if needed in different OData Service

User Interface

  • Upload Collection is used for Attachmnets Upload ( API Reference: sap.m.UploadCollection )
  • Feed List Item is used for displaying comment ( API Reference: sap.m.FeedListItem ) and Feed Input ( API Reference: sap.m.FeedInput ) is used for posting a comment
  • Binding approach for both collections
    • Binding is done in the XML Views to the relevant entity set, e.g. /AttachmentSet and aggregation for the items is maintained in the view itself. To fetch the data, to pass the key values, filters are applied in the controller because of the limitation to pass the dynamic values to filter in XML view.
    • Another possibility is to just mention the collections with ID in view and later create the template and bind the items aggregation with path e.g. /AttachKeySet(<<Keys>>)/AttachmentSet in the Controller associated with the view

<< Top

Features

  1. GOS Settings
    • GOS Settings allows, to set the key attributes of the Generic Objects. This is done for demo purpose. If OData service is reused for different Fiori App then this can be set directly in the “onInit” method of the view using the relevant hard-coded values such as Object Type ID and Category ID
  2. Attachment Settings
    • To set allowed file types, item action button visibility, list selection and separators
  3. Delete New (Attachments)
    • It allows, to delete all the attachments uploaded in the current session. It can be used if there is a Reset feature needed or the user exit the screen without saving/submitting
  4. Delete All (Attachments)
    • It allows, to delete all the associated attachments. This is provided for just demo purpose.
  5. Delete Attachment
    • Delete single and relevant attachment
  6. Post Comment
    • Allows to Post Comment
  7. Delete Comment
    • Allows to Delete Comment

<< Top

Installation

Pre-requisite

  • OData Service is exported to GitHub using abapGit. It is recommended to use abapGit to import the project in offline mode or online mode.

Import and Activate OData Service

  • Install abapGit if it does not already exist in the development landscape
  • Link to OData Service Repository https://github.com/aditheos/AttachmentCommentODataService
  • Install GitHub Repository to SAP using online mode
  • If SSL gives a headache then you can use offline mode
    • Export the repo from GitHub and follow the steps in the offline install
  • Activate all the objects in the package ‘ZATCH_DEMO‘ using SE80
  • Register the OData Service using ‘SEGW’ or ‘/IWFND/MAINT_SERVICE‘, verify the corresponding ICF Node is active

SAPUI5 Application

    {
      "path": "/sap/opu/odata",
      "target": {
        "type": "destination",
        "name": "<<YOUR DESTINATION NAME>>",
        "entryPath": "/sap/opu/odata"
      },
      "description": "Gateway Dev System"
    }
  • If you have changed the name of backend artefacts and OData service then please also update the Data Source in manifest.json
"dataSources": {
			"mainService": {
				"uri": "/sap/opu/odata/sap/<< YOUR SERVICE NAME >>/",
				"type": "OData",
				"settings": {
					"odataVersion": "2.0",
					"localUri": "localService/metadata.xml"
				}
			}
		}
  • Test the application and deploy to the relevant platform or environment as needed.

<< Top

Demo

Coming Soon!!!

<< Top

Subscribe to Our Blog