Skip to Content
Technical Articles
Author's profile photo Namasivayam Mani

Excel Upload using RAP: Part -2


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 ext\fragment, 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).

 

Assigned Tags

      8 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo 晓宇 刘
      晓宇 刘

      Looking forward to your update!!!

      Author's profile photo rajesh maripeddi
      rajesh maripeddi

      Hello @Namasivayam Mani,

       

      Any update on the Part-3 of this Excel upload blog. I have the same requirement.

       

      Regards,

      Rajesh Maripeddi

      Author's profile photo Imtiyaz Ahmed
      Imtiyaz Ahmed

      Hi @Namasivayam Mani,

       

      Please update the part 3 of this Excel upload blog..Exactly the same requirement I have in my project.

       

      Regards,

      Manish Gupta

      Author's profile photo Namasivayam Mani
      Namasivayam Mani
      Blog Post Author

      Hi rajesh maripeddi 晓宇 刘 Imtiyaz Ahmed,

       

      Apologies for the delay I have published the Part 3 of blog post series.

      Please have a look, let me know you thoughts on this.

       

      Regards,

      Namasivayam

      Author's profile photo rajesh maripeddi
      rajesh maripeddi

      Hello Namasivayam Mani

      Thanks for the update. Very nice blog.

      The challenge I can see in this, this will read the each line and then update to backend but if we upload the file with many record then then there will be chance of failure or time consuming. For small number of entries it will work fine.

      Secondly, you have used the third party library xlsx which in most of our client will not agree upon.

      What we did in our project, we have developed a backend transaction for file upload and then that transaction we have call on button click as a popup via assigning in target mapping.

      As the whole program runs in back ground, with our huge data seems there could not be much chances of failure or load on system due to to n from between UI and Backend.

      Yes we have face some challenges related to hiding some of the backend buttons.

      Please add some comments or thought on our approach.

      Appreciate your work.

      Thanks,

      Rajesh Maripeddi

       

       

       

       

       

       

      Author's profile photo Namasivayam Mani
      Namasivayam Mani
      Blog Post Author

      Hi rajesh maripeddi

      Thank you!!!

      I agree that for bulk data upload, there might be some chances of failure which I need to test.

      Also my thoughts on writing this blog post was to do the excel file reading in the browser and send the read data to the backend for processing.

      As I can see that in your implementation you are using background processing for excel processing which is also an another way of doing it(Yes) and which I did not thought of.

      Regards,
      Namasivayam

      Author's profile photo Shavneet Singh
      Shavneet Singh

      Hello Rajesh ,

      That's  a Nice Approach.

      We have kind of similar requirement. Uploading data in the master lost from the Excel.

      and we want to Do it completely from the backend Side.

      Can you please me with your code Snippets , how you were able to achieve this.

       

      Thanks and Best Regards ,

      Shavneet Singh

      Author's profile photo Shavneet Singh
      Shavneet Singh

      Hello Rajesh ,

       

      Could you please reply.

       

      Thanks and Regards ,

      Shavneet Singh