Skip to Content

onCloseDialog event not working in my Controller

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();
		}
	});
});
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Best Answer
    Feb 03 at 03:21 PM
    oDialog = sap.ui.xmlfragment(oView.getId(),"sap.ui.demo.walkthrough.view.HelloDialog",this);

    you miss the "this"

    Add comment
    10|10000 characters needed characters exceeded

  • Feb 05 at 10:52 AM

    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.js#L368

    Add comment
    10|10000 characters needed characters exceeded