Let's explore an efficient way to create a user-friendly interface for uploading, downloading, and deleting attachments using Object Store in SAP Build Apps. Prepare the back end Clone the application in the sample project below and deploy it to your cloud foundry space of your BTP Subaccount. https://github.com/SAP-samples/cloud-objectstore-java-sample (follow the instructions in the README document). Tip: Ensure that your Cloud Foundry Space has at least 1 GB Org Quota free for the deployment to succeed. Create a Destination in the BTP Subaccount as below. Tip 1: As this Destination is referenced in the sample SAP Build apps application (refer section Prepare the Frontend), ensure that the destination Name is exactly the same verbatim ie: ObjectStore. Tip 2: Add all the Additional Properties as only then this Destination would be discoverable in the SAP Build Apps. Refer to SAP Systems | SAP Help Portal - ‘Adding Data points’ section. Tip 3: You can find the URL, Client ID, Client Secret and Token Service URL in the ‘Overview’ & ‘Service bindings’ sections in the Cloud Foundry Space corresponding to your deployed application. (NOTE: To access the Cloud Foundry section of your BTP Subaccount, your user must be a member of the Cloud Foundry organization). Mapping Parameters Destination Application Routes URL “clientid” Client ID “clientsecret” Client Secret “url” plus append in the end /oauth/token Token service url Prepare the frontend How could an implementation with SAP Build Apps look like? For inspiration, please check out the ObjectStoreBuildAppsPOC project on github. You can also upload this project directly to your lobby. Note: this project is a proof of concept created by the author of this GitHub project and is not an official recommendation from SAP; it is provided as-is. Build and deploy the SAP Build Apps application to the Cloud Foundry space in the same BTP sub account. Tip: You may also refer to the SAP Build Apps help portal content to learn about Building a SAP Build Apps application and deploying it. How to use the application end to end? Click on the button ‘New Attachment’. Select the file that must be attached. You may repeat attaching several files by clicking on the button ‘New Attachment’ again. You would be able to see the list of all the uploaded files. Click on the ‘Open File’ option next to each file to download the file and view it. Click on the x option next to each file to delete the file with one click. You can also click on the Overview page of this application to view the meta data such as file size and file type for all the file(s) uploaded (by all the users) to the Object Store of this application. NOTE: The file Name would not be displayed as it is internally stored as a UUID. How to customize this app to fit to your needs? To customize the app to fit to your needs we need to understand the Logic in all the button events (New Attachment, Open File, and x) to some extent. While most of the Flow functions used in the Logic Canvas are self-explanatory, it's worth noting that we utilize the JavaScript component in the Logic to submit files as formData. For each button event, I'll provide a brief explanation of the JavaScript component, particularly highlighting areas where customizations can be made. New Attachment url Select the destination (path where the files are uploaded). const url = "destinations/ObjectStore/objectstorage.svc/api/v1/storage/"; sizeLimit Currently supports upload of files up to 5 MB. const sizeLimit = 5*1024*1024; If this must be changed then adjust the code to your preference. For example, to support upload of files up to 10 MB, adjust the code as below: const sizeLimit = 10*1024*1024; Tip: Probably this is the only thing you need to customize in this app. csrf_token There is logic to fetch the csrf-token from the server and appending it to the POST message. This part is required, do not delete it. Open File url Select the destination (path where the files are uploaded). const url = "destinations/ObjectStore/objectstorage.svc/api/v1/storage/"; csrf_token There is logic to fetch the csrf-token from the server and appending it to the GET message. This part is required, do not delete it. X (Delete) url Select the destination (path where the files are uploaded). const url = "destinations/ObjectStore/objectstorage.svc/api/v1/storage/"; csrf_token There is logic to fetch the csrf-token from the server and appending it to the GET message. This part is required, do not delete it. Tip: For all the above button events, one can also think of customizing the Error handling logic in the JS component and overall, in the logic flow of the app if desired. With this, I hope that you would also be able upload, download and delete attachments in the Object Store using SAP Build Apps. Happy Building! For any queries here, please reach out to buildapps@sap.com. Additional reading Understand CSRF handling in SAP Build Apps - SAP Community
... View more