SAPUI5 Dialog issue

Question

I have a dialog in my sapui5 application which when the "Yes" option is selected the user is taken to the home view, but it is saying my function is undefined. Am I calling the function from within the dialog in correctly?

Heres my code:

Load home view function:

loadHome : function() {
                    this.router = sap.ui.core.UIComponent
                            .getRouterFor(this);
                    this.router.navTo("HomePage");
                },

My dialog:

cancelDialog : function() {                     
                    var oDialog1 = new sap.ui.commons.Dialog();
                    oDialog1.setTitle("Cancel Case");
                    var oText = new sap.ui.commons.TextView(
                            {
                                text : "Are you sure you want to cancel? Case data will not be saved"
                            });
                    oDialog1.addContent(oText);
                    oDialog1.addButton(new sap.ui.commons.Button({
                        text : "Yes",
                        press : function(){
                            this.loadHome();
                        }                       
                    }));
                    oDialog1.addButton(new sap.ui.commons.Button({
                        text : "No",
                        press : function() {
                            oDialog1.close();
                        }
                    }));
                    oDialog1.open();
                },

both of these functions are withing the create controller. Thanks for any help

Nabi Nabi · Accepted Answer · 2015-11-14T10:41:14

The problem is in the event handler for the yes button. In this handler, "this" points to the button that was pressed and not to the controller. To get a reference to the controller you can simply call bind(this). Alternatively, you could also just store a reference to the controller outside the handler and access it later ("var that = this;" and so on...) ==> closures...

Here is a working example with bind(this):

//...
oDialog1.addButton(
  new sap.ui.commons.Button({
    text : "Yes",
    press : function(){
      this.loadHome();
    }.bind(this)                       
  })
);
//...

And this is the other approach (that=this...):

//...
var that = this;
oDialog1.addButton(
  new sap.ui.commons.Button({
    text : "Yes",
    press : function(){
      that.loadHome();
    }
  })
);
//...

Other than that you should consider using sap.m controls instead of sap.ui.commons. Then also think about using fragments for your dialog, this would make the code better to read + better reuse of the dialog... Here I have published a nice template that gives you and idea. Maybe you would like to check my other tutorials as well...

SAPUI5 Dialog issue

2 Answers