I highly recommend reading this excellent blog that explains how to implement an SAP Fiori elements application with CAP Node.js and upload an Excel file to create entries in the backend. The blog uses pure UI5 coding for the upload functionality. At the time of writing, the SAP Fiori elements field building block was not yet released. In this blog, I will guide you through the process of implementing an SAP Fiori elements application by leveraging the newly released SAP Fiori elements field building block, which simplifies the implementation compared to the previous method.
Implementation steps with the field building block
With the release of the SAP Fiori elements field building block, we can now implement the upload functionality more efficiently. This new approach allows us to use the SAP Fiori elements field building block with a metapath to a stream property, making the implementation cleaner and more maintainable.
In the referenced blog, you already learned how to add a custom action to your table. But instead of using the UI5 FileUploader, we use the SAP Fiori elements field building block to simplify the process:
<mvc:View
xmlns:mvc=”sap.ui.core.mvc”
xmlns=”sap.m”
xmlns:macros=”sap.fe.macros”
controllerName=”your.namespace.UploadDialog”>
<Dialog
id=”uploadDialog”
title=”Upload Excel File”
contentWidth=”500px”
contentHeight=”300px”>
<content>
<macros:Field id=”excelFile” metaPath=”/ExcelUpload/excel” />
</content>
<beginButton>
<Button text=”Close” press=”closeDialog” />
</beginButton>
</Dialog>
</mvc:View>
And here’s the controller so the user can close the dialog after upload:
import Controller from “sap/ui/core/mvc/Controller”;
import Dialog from “sap/m/Dialog”;
export default class UploadDialog extends Controller {
closeDialog(): void {
const dialog = this.getView().byId(“uploadDialog”) as Dialog;
dialog.close();
}
}
SAP Fiori elements field building block streamlines the upload process
As you can see in the XML we simply use the SAP Fiori elements field building block with the metapath to a stream property. This allows us to handle the upload functionality in a more streamlined manner.
As the referenced blog uses a singleton to upload the file, we point to a singleton property by using an absolute path (see https://sapui5.hana.ondemand.com/test-resources/sap/fe/core/fpmExplorer/index.html#/buildingBlocks/guidance/singletonDefault to get more information on singleton usage).
<macros:Field id=”excelUpload” metaPath=”/ExcelUpload/excel”/>
Using the SAP Fiori elements field building block simplifies implementation of upload functionality
By using the SAP Fiori elements field building block, we can simplify the implementation of the upload functionality in an SAP Fiori elements application with CAP Node.js. This new approach is more efficient and maintainable compared to the previous method using pure UI5 coding.
I highly recommend reading this excellent blog that explains how to implement an SAP Fiori elements application with CAP Node.js and upload an Excel file to create entries in the backend. The blog uses pure UI5 coding for the upload functionality. At the time of writing, the SAP Fiori elements field building block was not yet released. In this blog, I will guide you through the process of implementing an SAP Fiori elements application by leveraging the newly released SAP Fiori elements field building block, which simplifies the implementation compared to the previous method. Implementation steps with the field building block With the release of the SAP Fiori elements field building block, we can now implement the upload functionality more efficiently. This new approach allows us to use the SAP Fiori elements field building block with a metapath to a stream property, making the implementation cleaner and more maintainable. In the referenced blog, you already learned how to add a custom action to your table. But instead of using the UI5 FileUploader, we use the SAP Fiori elements field building block to simplify the process: <mvc:View
xmlns:mvc=”sap.ui.core.mvc”
xmlns=”sap.m”
xmlns:macros=”sap.fe.macros”
controllerName=”your.namespace.UploadDialog”>
<Dialog
id=”uploadDialog”
title=”Upload Excel File”
contentWidth=”500px”
contentHeight=”300px”>
<content>
<macros:Field id=”excelFile” metaPath=”/ExcelUpload/excel” />
</content>
<beginButton>
<Button text=”Close” press=”closeDialog” />
</beginButton>
</Dialog>
</mvc:View> And here’s the controller so the user can close the dialog after upload: import Controller from “sap/ui/core/mvc/Controller”;
import Dialog from “sap/m/Dialog”;
export default class UploadDialog extends Controller {
closeDialog(): void {
const dialog = this.getView().byId(“uploadDialog”) as Dialog;
dialog.close();
}
} SAP Fiori elements field building block streamlines the upload process As you can see in the XML we simply use the SAP Fiori elements field building block with the metapath to a stream property. This allows us to handle the upload functionality in a more streamlined manner. As the referenced blog uses a singleton to upload the file, we point to a singleton property by using an absolute path (see https://sapui5.hana.ondemand.com/test-resources/sap/fe/core/fpmExplorer/index.html#/buildingBlocks/guidance/singletonDefault to get more information on singleton usage). <macros:Field id=”excelUpload” metaPath=”/ExcelUpload/excel”/> Using the SAP Fiori elements field building block simplifies implementation of upload functionality By using the SAP Fiori elements field building block, we can simplify the implementation of the upload functionality in an SAP Fiori elements application with CAP Node.js. This new approach is more efficient and maintainable compared to the previous method using pure UI5 coding. Read More Technology Blogs by SAP articles
#SAP
#SAPTechnologyblog
