No response when clicking close button on fragement in custom action of UI5 Element

[Jacky_Liu]

Hi, UI5 Expert ,

I added custom action in object page header .

The UI5 custom action can open a fragment, but when I click the close button close in the fragment, there is no reponse . It seems the fragment still search the function in standard controller of object page .Would you please help me on this ?

webapp/ext/fileHandle/FileHandle.js

// sap.ui.define(["sap/ui/core/mvc/ControllerExtension","sap/ui/core/Fragment"

sap.ui.define(["sap/ui/core/Fragment"

], function(Fragment) {

'use strict';

return {

pDialog : null,

uploadfiles: function(oEvent) {

if (!this.pDialog) {

Fragment.load({

id: "uploadDialogSet",

name: "freightorderattachmgt.custom.fragment.fileselector",

type: "XML",

controller: this

}).then((oDialog) => {

var oFileUploader = Fragment.byId("uploadDialogSet", "uploadSet");

oFileUploader.removeAllItems();

this.pDialog = oDialog;

this.pDialog.open();

}).catch(error=>alert(error.message));

}else{

var oFileUploader = Fragment.byId("uploadDialogSet", "uploadSet");

oFileUploader.removeAllItems();

this.pDialog.open();

}

},

onUploadSet: function(oEvent) {

console.log("Upload Button Clicked!!!")

alert("upload set triggered");

/* TODO:Call to OData */

},

onCloseDialog: function (oEvent) {

console.log("Close clicked") ;

alert("upload set triggered");

this.pDialog.close();

this.byId("uploadDialogSet--uploadDialogSet").close();

},

onItemRemoved:function (oEvent) {

console.log("File Remove/delete Event Fired!!!")

/* TODO: Clear the already read excel file data */

},

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 */

}

} });

 webapp/manifest.json

{

"_version": "1.59.0",

"sap.app": {

"id": "freightorderattachmgt",

"type": "application",

"i18n": "i18n/i18n.properties",

"applicationVersion": {

"version": "0.0.1"

},

"title": "{{appTitle}}",

"description": "{{appDescription}}",

"resources": "resources.json",

"sourceTemplate": {

"id": "@sap/generator-fiori:lrop",

"version": "1.12.5",

"toolsId": "608a61cb-cb63-43f7-963b-a8d0970324b7"

},

"dataSources": {

"mainService": {

"uri": "/sap/opu/odata4/sap/zfreightorder_srv_bind/srvd/sap/zfreightorder_service/0001/",

"type": "OData",

"settings": {

"annotations": [

"annotation"

],

"localUri": "localService/metadata.xml",

"odataVersion": "4.0"

}

},

"annotation": {

"type": "ODataAnnotation",

"uri": "annotations/annotation.xml",

"settings": {

"localUri": "annotations/annotation.xml"

}

}

},

"crossNavigation": {

"inbounds": {

"FreightOrder-display": {

"semanticObject": "FreightOrder",

"action": "display",

"title": "{{flpTitle}}",

"subTitle": "{{flpSubtitle}}",

"signature": {

"parameters": {},

"additionalParameters": "allowed"

}

}

}

}

},

"sap.ui": {

"technology": "UI5",

"icons": {

"icon": "",

"favIcon": "",

"phone": "",

"phone@2": "",

"tablet": "",

"tablet@2": ""

},

"deviceTypes": {

"desktop": true,

"tablet": true,

"phone": true

}

},

"sap.ui5": {

"flexEnabled": true,

"dependencies": {

"minUI5Version": "1.120.8",

"libs": {

"sap.m": {},

"sap.ui.core": {},

"sap.ushell": {},

"sap.fe.templates": {}

}

},

"contentDensities": {

"compact": true,

"cozy": true

},

"models": {

"i18n": {

"type": "sap.ui.model.resource.ResourceModel",

"settings": {

"bundleName": "freightorderattachmgt.i18n.i18n"

}

},

"": {

"dataSource": "mainService",

"preload": true,

"settings": {

"synchronizationMode": "None",

"operationMode": "Server",

"autoExpandSelect": true,

"earlyRequests": true

}

},

"@i18n": {

"type": "sap.ui.model.resource.ResourceModel",

"uri": "i18n/i18n.properties"

}

},

"resources": {

"css": []

},

"routing": {

"routes": [

{

"pattern": ":?query:",

"name": "ZC_FREIGHTORDERList",

"target": "ZC_FREIGHTORDERList"

},

{

"pattern": "ZC_FREIGHTORDER({key}):?query:",

"name": "ZC_FREIGHTORDERObjectPage",

"target": "ZC_FREIGHTORDERObjectPage"

}

],

"targets": {

"ZC_FREIGHTORDERList": {

"type": "Component",

"id": "ZC_FREIGHTORDERList",

"name": "sap.fe.templates.ListReport",

"options": {

"settings": {

"contextPath": "/ZC_FREIGHTORDER",

"variantManagement": "Page",

"navigation": {

"ZC_FREIGHTORDER": {

"detail": {

"route": "ZC_FREIGHTORDERObjectPage"

}

}

}

}

}

},

"ZC_FREIGHTORDERObjectPage": {

"type": "Component",

"id": "ZC_FREIGHTORDERObjectPage",

"name": "sap.fe.templates.ObjectPage",

"options": {

"settings": {

"editableHeaderContent": false,

"contextPath": "/ZC_FREIGHTORDER",

"content": {

"header": {

"actions": {

"FileHandle": {

"press": "freightorderattachmgt.ext.fileHandle.FileHandle.uploadfiles",

"visible": true,

"enabled": true,

"requiresSelection": false,

"text": "UploadFiles",

"position": {

"anchor": "DataFieldForAction::com.sap.gateway.srvd.zfreightorder_service.v0001.uploadfile::com.sap.gateway.srvd.zfreightorder_service.v0001.ZC_FREIGHTORDERType",

"placement": "Before"

}

}

}

}

},

"sectionLayout": "Tabs"

}

}

}

}

},

"extends": {

"extensions": {

"sap.ui.controllerExtensions": {

"sap.fe.templates.ObjectPage.ObjectPageController#freightorderattachmgt::ZC_FREIGHTORDERObjectPage": {

"controllerName": "freightorderattachmgt.custom.fragment.fileselector"

}

}

}

}

},

"sap.fiori": {

"registrationIds": [],

"archeType": "transactional"

}

}

[Jacky_Liu]

Hi, UI5 Expert, The previous error in screen shot is coursed by a controller extension. If I comment override the in controller extension, this error will disappear.

[Jacky_Liu]

Assign a controller to the fragement with the following code:sap.ui.define(["sap/fe/core/PageController"], function (PageController) { "use strict"; return PageController.extend("freightorderattachmgt.custom.fragment.fileselector", { onUploadSet: function () { console.log("Upload Button Clicked!!!") alert("upload set triggered"); /* TODO:Call to OData */ }, onCloseDialog: function () { console.log("Close clicked"); alert("upload set triggered"); this.pDialog.close(); this.byId("uploadDialogSet--uploadDialogSet").close(); }, onItemRemoved: function () { console.log("File Remove/delete Event Fired!!!") /* TODO: Clear the already read excel file data */ }, onUploadSetComplete: function () { console.log("File Uploaded!!!") /* TODO: Read excel file data*/ }, onBeforeUploadStart: function () { console.log("onBeforeUploadStart Event Fired!!!"); } }); }); Then a error shows

[Jacky_Liu]

The error is :Error found in Fragment (id: 'uploadDialogSet'). XML node: '<upload:UploadSet xmlns:upload="sap.m.upload" uploadEnabled="true" id="uploadSet" items="{path: '/', templateShareable: false}" fileTypes="png,pdf" maxFileNameLength="200" beforeUploadStarts="onBeforeUploadStart" uploadCompleted="onUploadSetComplete" afterItemRemoved="onItemRemoved" terminationEnabled="true"/>': TypeError: Cannot use 'in' operator to search for 'onBeforeUploadStart' in freightorderattachmgt.custom.fragment.fileselector -

[Jacky_Liu · Accepted solution]

Update the fragement with the following: 

<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="File Upload" core:require="{handler: 'freightorderattachmgt/ext/fileHandle/FileHandle'}">
        <content>
            <upload:UploadSet uploadEnabled="true" id="uploadSet" items="{path: '/', templateShareable: false}" fileTypes="png,pdf" maxFileNameLength="200" beforeUploadStarts="handler.onBeforeUploadStart" uploadCompleted="handler.onUploadSetComplete" afterItemRemoved="handler.onItemRemoved"
            terminationEnabled="true">
                <upload:UploadSetItem id="_IDGenUploadSetItem1" visibleRemove="true" visibleEdit="false" fileName="{name}" url="/upload">
                    <upload:attributes>
                        <ObjectAttribute id="_IDGenObjectAttribute1" title="Uploaded by" text="{user}" active="false"/>
                    </upload:attributes>
                </upload:UploadSetItem>
            </upload:UploadSet>
        </content>
        <buttons>        
            <Button id="_IDGenButton1" text="Upload" press="handler.onUploadSet" icon="sap-icon://upload-to-cloud" type="Emphasized"/>
            <Button id="cancel" press="handler.onCloseDialog" text="Cancel" icon="sap-icon://cancel"/>
        </buttons>
	</Dialog>
</core:FragmentDefinition>

Then the issue gone .

[Jacky_Liu]

Update the fragement with the following :