SAPUI5 / Fiori Elements: Press for Button in a dialog box created using a fragment not getting triggered in the Controller File

Question

I am working on my first Fiori app by following Excel Upload using RAP: Part -3 | SAP Blogs.

Since the blog is a bit old now I have had to edit a few things from the blog to make it work.

Now, I am able to get the Upload dialog box, but the buttons on it do not work.

See the screenshots at the end.

While the upload button at the top works, none of the 3 at the bottom added from within the fragment work.

I tried changing in the fragment

<Button id="Template" text="Template" press="onTempDownload" icon="sap-icon://download-from-cloud" type="Emphasized"/><br>

to

<Button id="Template" text="Template" press=".onTempDownload" icon="sap-icon://download-from-cloud" type="Emphasized"/><br>

by adding a dot so it refers to the controller

as well as to

<Button id="Template" core:require="{ handler: '/home/user/projects/ypgms_building_v2/webapp/ext/controller/ListReportExt'}" text="Template" press="handler.onTempDownload" icon="sap-icon://download-from-cloud" type="Emphasized"/>

but this second correction gives me an error that this path is not under the Resources. I am not sure how to get the /ext folder to show under the Resources section in the F12 Developer Options.

Eventually the buttons should trigger their corresponding function in the controller as mentioned on the press event in the fragment, which is not happening.

What would be the right way to proceed?

Thanks

File structure:

Snippet from the manifest file:

Code snippet in the controller for one of the buttons:

Fragment used:

Output:

Answer 1

As mentioned before your code is a bit messy, however I've attached the generic function I usually use to open a dialog. The Dialog and functions called from within it then can be handled by the controller of the View.

  onOpenDialog(oEvent, sDialogId, oDialogPath) {
    return new Promise((resolve) => {
      if (!this.getView().byId(sDialogId)) {
        Fragment.load({
          id: this.getView().getId(),
          name: oDialogPath,
          controller: this,
        }).then(
          function (oDialog) {
            this.getView().addDependent(oDialog);
            oDialog.addStyleClass(this.getOwnerComponent().getContentDensityClass());
            oDialog.open();
            resolve();
          }.bind(this)
        );
      } else {
        this.getView().byId(sDialogId).open();
        resolve();
      }
    });
  },