Links to other blogs post in this series -
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 - 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).
- SAP Managed Tags:
14 Comments
