Links to other blogs post in this series –

1. Excel Upload using RAP: Part – 1
2. Excel Upload using RAP: Part – 2
3. Excel Upload using RAP: Part – 3

Introduction

In continuous to the previous blog post (Excel Upload using RAP: Part -1 | SAP Blogs), where I have discussed about the creation of an basic OData service using RAP Model.

This is the second part of 3 blog post series, to develop a solution on uploading data to custom database table using SAP RAP Model using the Fiori Interface.

In this blog post, we will be creating a Fiori Elements application using the tools provided in SAP Business Application Studio (BAS).

Here I will be using the SAP BTP Trial Account for creating this Application

Prerequisites

• SAP Business Application Studio in your respective BTP Trial Account
• Basics of using the Fiori Element App Generator Extension
• Fragments in SAPUI5
• Using UploadSet Control

Note: You also can use the File Uploader control for uploading the file. I am using the UploadSet Controller for learning purpose only.

Lets first initialize the Fiori Application using the Fiori App Generator in SAP Business Application Studio –

The below video shows steps involved in generating the App –

Lets Start !!!

Once the basic app has been generated, then we will be using Fiori Guided Development tools to add an Custom Button “Excel Upload”. Step for adding a custom button to the app –

Step – 1: Right Click on Project Folder, and click on Open Guided Development.

Step – 2: Choose “Add Custom action to a page option”.

Step – 3: Click on Step 1, give an JS function name, this function will be called when you click on the Custom button. and then click on Insert Snippet followed by Next button

Step – 4: in the Step 2 to tab, select the button position, button id & button text and then click on
insert snippet and exit the guide.

Step – 5: After completing the above mentioned in steps, the below method codes will be inserted in the respective place.

Step – 6: Create a new fragment ExcelUpload.fragment.XML in the folder extfragment, add the SAPUI5 Control UploadSet, which will be used for uploading the file.

<core:FragmentDefinition xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core" xmlns:u="sap.ui.unified" xmlns:upload="sap.m.upload">
	<Dialog id="uploadDialogSet" title="Excel Upload">
        <content>
            <upload:UploadSet uploadEnabled="true" id="uploadSet" items="{path: '/', templateShareable: false}" fileTypes="xlsx, xls" maxFileNameLength="200" beforeUploadStarts="onBeforeUploadStart" uploadCompleted="onUploadSetComplete" afterItemRemoved="onItemRemoved"
            terminationEnabled="true">
                <upload:UploadSetItem visibleRemove="true" visibleEdit="false" fileName="{name}" url="/upload">
                    <upload:attributes>
                        <ObjectAttribute title="Uploaded by" text="{user}" active="false"/>
                    </upload:attributes>
                </upload:UploadSetItem>
            </upload:UploadSet>
        </content>
        <buttons>        
            <Button text="Template" press="onTempDownload" icon="sap-icon://download-from-cloud" type="Emphasized"/>
            <Button text="Upload" press="onUploadSet" icon="sap-icon://upload-to-cloud" type="Emphasized"/>
            <Button press="onCloseDialog" text="Cancel" icon="sap-icon://cancel"/>
        </buttons>
        <endButton>
            <Button press=".onCloseDialog" text="Ok"/>
        </endButton>    
	</Dialog>
</core:FragmentDefinition>

Step – 7: Adding button press event handler for the button present in the UploadSet control in the file ListReportExt.controller.js

sap.ui.define(["sap/ui/core/Fragment"],
function (Fragment){
    "use strict";
    return {
        openExcelUploadDialog: function(oEvent) {
            var oView = this.getView();
            if (!this.pDialog) {
                Fragment.load({
                    id: "excel_upload",
                    name: "v2.pgms.building.ext.fragment.ExcelUpload",
                    type: "XML",
                    controller: this
                }).then((oDialog) => {
                    var oFileUploader = Fragment.byId("excel_upload", "uploadSet");
                    oFileUploader.removeAllItems();
                    this.pDialog = oDialog;
                    this.pDialog.open();
                })
                    .catch(error => alert(error.message));
            } else {
                var oFileUploader = Fragment.byId("excel_upload", "uploadSet");
                oFileUploader.removeAllItems();
                this.pDialog.open();
            }
        },
        onUploadSet: function(oEvent) {
            console.log("Upload Button Clicked!!!")
            /* TODO:Call to OData */
        },
        onTempDownload: function (oEvent) {
            console.log("Template Download Button Clicked!!!")
            /* TODO: Excel file template download */
        },
        onCloseDialog: function (oEvent) {
            this.pDialog.close();
        },
        onBeforeUploadStart: function (oEvent) {
            console.log("File Before Upload Event Fired!!!")
            /* TODO: check for file upload count */
        },
        onUploadSetComplete: function (oEvent) {
            console.log("File Uploaded!!!")
            /* TODO: Read excel file data*/
        },
        onItemRemoved:function (oEvent) {
            console.log("File Remove/delete Event Fired!!!")  
            /* TODO: Clear the already read excel file data */          
        }
    };
});

Application Preview (after step 5)

Now right click on the project folder to preview the application –

On click of the button, the below popup is getting displayed.

Application Preview

Run the Application in preview mode –

On Click of the Excel Upload button you can see the opening of the ExcelUpload fragment

Conclusion

And there you have learned how to create a Fiori Application with a Custom Action Button on the list report and also opening the fragment in which the UploadSet Control has been implemented.

Thanks for reading this post, I would like to read your thoughts in the comments !!!

In the next blog post, we will be implementing the excel upload logic to the Custom Action Button (Upload).