onExit not called in openui5 controller

Question

I am using tab controller in openui5 where I want to perform some action periodically so I used below code :

sap.ui.jsview("oui5mvc.tabs", {
    getControllerName: function() {
        return "oui5mvc.tabs";
    },

    // defines the UI of this View
    createContent: function(oController) {

        var defaultTab = window.sessionStorage.getItem("startDialogue");
        if (null === defaultTab || undefined === defaultTab)
            defaultTab = "home";
        selectedTab = defaultTab.toLowerCase();
        var oTabStrip = new sap.ui.commons.TabStrip("tabStrip", {
            height: ($(window).height() - 40) + "px",
            width: "100%",
            tabs: [
                new sap.ui.commons.Tab(defaultTab.toLowerCase() + "Tab" + tabCount, {
                    text: defaultTab.toUpperCase(),
                    closable: true,
                    selected: true,
                    content: [ // Creating a new tab (e.g.: tab1)
                        new sap.ui.view(defaultTab.toLowerCase() + "view" + tabCount, {
                            viewName: "oui5mvc." + defaultTab.toLowerCase(),
                            type: sap.ui.core.mvc.ViewType.JS
                        })
                    ]
                })
            ],
            close: function(event) {
                var tabidx = event.getParameter("index");
                var tab = oTabStrip.getTabs()[tabidx];
                if (null != tab) {
                    (tab.getContent())[0].destroyContent();
                }
                this.closeTab(tabidx);
                this.removeTab(tabidx);

            },
            select: function(event) {
                var tabidx = event.getParameter("index");
                var tab = oTabStrip.getTabs()[tabidx];
                selectedTab = tab.getText().toLowerCase();
            }
        }).addStyleClass("customTabStrip");
    }
});

Below is the code for tab1:

var myVar;

sap.ui.controller("oui5mvc.tab1", {

    onInit: function() {
        alert("init");
        //  alert(this.getView());
        //this.getView().setBusy(true); 
    },

    onAfterRendering: function() {

        myVar = setInterval(function() {
            alert("Hello");
        }, 5000);
    },

    onExit: function() {
        clearInterval(myVar);
    },

});

But the problem is I am clearing myVar in onExit section openui5 in the tab controller but my problem is my code flow never reaches onExit I wonder why and I want to clear setInterval once tab is closed but the pop still comes even if I close the openui5 tab inside the application. Any tips on how to call onExit while closing tab or any other way to stop the alert after tab is closed.

Answer 1

You have to use setInterval in your onInit method and clearInterval in the onExit method. onInit is called only once to initialize the view. onAfterRendering could be called multiple times resulting in multiple intervals registered.

In your TabStrip.close event, you have to call closeTab() before you destroy the tab and its content (the view), otherwise the TabStrip has a strange behaviour (probably a bug). I would recommend to call destroy() on the closed tab itself which will also dispose its content (the view).

close: function(event){
  var tabidx = event.getParameter("index");
  var tab = this.getTabs()[tabidx];
  this.closeTab(tabidx);
  if (tab!==null){
    tab.destroy();
  }
}

For a full example see here .

Edit: To show a busy indicator i prefer to call Control.setBusy(true) in the Model.requestSent event and Control.setBusy(false) in the Model.requestCompleted and Model.requestFailed events. If you start loading your data in the onInit() method of your View, it will then show up busy.