onCloseDialog event not working in my Controller

[former_member514516]

Hello,

I'm trying to learn SAPUI5 and following the walkthrough in SAPUI5 documentation. I'm currently in Step 17: Fragment Callbacks. I am not able to make the onCloseDialog event work. The code I double and triple checked and I could not find anything wrong. There is also no error in Chrome's console. Any insights?

Link to the guide I'm following:

https://sapui5.hana.ondemand.com/#/topic/354f98ed2b514ba9960556333428d35e

My code:

HelloDialog.fragment.xml

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
	<Dialog id="helloDialog" title="Hello {/recipient/name}">
		<content>
			<core:Icon src="sap-icon://hello-world" size="8rem" class="sapUiMediumMargin"/>
		</content>
		<beginButton>
			<Button text="{i18n>dialogCloseButtonText}" press="onCloseDialog"/>
		</beginButton>
	</Dialog>
</core:FragmentDefinition>

HelloPanel.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageToast"
], function(Controller, MessageToast) {
	"use strict";
	return Controller.extend("sap.ui.demo.wt.controller.HelloPanel", {
		onShowHello: function() {
			// read msg from i18n model
			var oBundle = this.getView().getModel("i18n").getResourceBundle();
			var sRecipient = this.getView().getModel().getProperty("/recipient/name");
			var sMsg = oBundle.getText("helloMsg", [sRecipient]);
			// show message
			MessageToast.show(sMsg);
		},
		onOpenDialog: function() {
			var oView = this.getView();
			var oDialog = oView.byId("helloDialog");
			// create dialog lazily
			if (!oDialog) {
				// create dialog via fragment factory
				oDialog = sap.ui.xmlfragment(oView.getId(), "sap.ui.demo.wt.view.HelloDialog");
				oView.addDependent(oDialog);
			}


			oDialog.open();
		},
		onCloseDialog: function() {
			this.getView().byId("helloDialog").close();
		}
	});
});

[junwu · Accepted solution]

oDialog = sap.ui.xmlfragment(oView.getId(),"sap.ui.demo.walkthrough.view.HelloDialog",this);

you miss the "this"

[former_member514516 · Accepted solution]

Thanks but what is not working is the onCloseDialog function.

The onOpenDialog function works just fine.

[junwu · Accepted solution]

onCloseDialog:function(){
			this.getView().byId("helloDialog").close();}

are you sure? that function get called if you debug?

[former_member514516 · Accepted solution]

It is not getting called.. Not passing thru that function I don't know why. I just copied the exact code from the SAP guide.

https://sapui5.hana.ondemand.com/#/topic/354f98ed2b514ba9960556333428d35e

[junwu · Accepted solution]

just put that missing "this" there, you will be fine.

[former_member514516 · Accepted solution]

Thanks! It solved it for me. 🙂

[ericci]

Hi @Michael,

you should always store the dialog reference in a global variable of your controller.

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageToast"
], function(Controller, MessageToast) {
	"use strict";
	return Controller.extend("sap.ui.demo.wt.controller.HelloPanel", {


		__dialog: null,


		onShowHello: function() {
			// read msg from i18n model
			var oBundle = this.getView().getModel("i18n").getResourceBundle();
			var sRecipient = this.getView().getModel().getProperty("/recipient/name");
			var sMsg = oBundle.getText("helloMsg", [sRecipient]);
			// show message
			MessageToast.show(sMsg);
		},
		onOpenDialog: function() {
			var oView = this.getView();
			// create dialog lazily
			if (!this.__dialog) {
				// create dialog via fragment factory
				this.__dialog = sap.ui.xmlfragment(oView.getId(), "sap.ui.demo.wt.view.HelloDialog");
				oView.addDependent(this.__dialog);
			}
			this.__dialog.open();
		},
		onCloseDialog: function() {
			if( this.__dialog ) {
				this.__dialog.close();
			}
			this.__dialog = null;
		}
	});
});

If you want to view the full code of my Controller.js extesion you can grab it here: https://github.com/StErMi/openui5-swissknife/blob/master/src/it/designfuture/swissknife/Controller.j...