I have an SAPUI5 application with multiple pages. I have the following code on one of my view controllers.

    onInit : function () {
        var router = sap.ui.core.UIComponent.getRouterFor(this);
        router.attachRouteMatched(this.initController, this);            
    },
    
    initController: function(evt){
        
        tableControls = ViewControls.tableViewControls.apply(this);

        //update data row first
        var updateRowFlag = ViewControls.getUpdateRowFlag();
        
        if(updateRowFlag){
             var rowData = ViewControls.getRowData();
             rowData = rowData[0];
             ViewControls.updateSummaryData(rowData);
        }

        data = ViewControls.getSummaryData();
        this.setPaginationData();            
    },

What the code above intends to do is that when I navigate to this page the router will trigger the event and call initController() to all the data binding and other stuff shown above. The problem I have is that I only want it to be trigger when I go into that page. But it's also being triggered when I navigate away from this view into other views. When I do this initController() gets called again before moving away which causes a delay.

Here is the routing in my ponent.js

metadata: {
        rootView: "myApp.view.App",
        routing: {
            config: {
                routerClass: "sap.m.routing.Router",
                viewPath: "myApp.view",
                controlId: "rootControl",
                controlAggregation: "pages",
                viewType: "XML"
            },
            routes: [
                {
                    name: "page1",
                    // empty hash - normally the start page
                    pattern: "",
                    target: "page1"
                },
                {
                    name: "page2",
                    pattern: "Page2",
                    target: "page2"
                },
                {
                    name: "page3",
                    pattern: "Page3",
                    target: "page3"
                }
            ],
            targets: {
                page1: {
                    viewName: "InputsView",
                    viewId:"InputsView",
                    viewLevel: 0
                },
                page2: {
                    viewName: "TableView",
                    viewId:"TableView",
                    viewLevel: 1
                },
                page3: {
                    viewName: "DetailsView",
                    viewId:"DetailsView",
                    viewLevel: 3
                }
            }
        }

I have an SAPUI5 application with multiple pages. I have the following code on one of my view controllers.

    onInit : function () {
        var router = sap.ui.core.UIComponent.getRouterFor(this);
        router.attachRouteMatched(this.initController, this);            
    },
    
    initController: function(evt){
        
        tableControls = ViewControls.tableViewControls.apply(this);

        //update data row first
        var updateRowFlag = ViewControls.getUpdateRowFlag();
        
        if(updateRowFlag){
             var rowData = ViewControls.getRowData();
             rowData = rowData[0];
             ViewControls.updateSummaryData(rowData);
        }

        data = ViewControls.getSummaryData();
        this.setPaginationData();            
    },

What the code above intends to do is that when I navigate to this page the router will trigger the event and call initController() to all the data binding and other stuff shown above. The problem I have is that I only want it to be trigger when I go into that page. But it's also being triggered when I navigate away from this view into other views. When I do this initController() gets called again before moving away which causes a delay.

Here is the routing in my ponent.js

metadata: {
        rootView: "myApp.view.App",
        routing: {
            config: {
                routerClass: "sap.m.routing.Router",
                viewPath: "myApp.view",
                controlId: "rootControl",
                controlAggregation: "pages",
                viewType: "XML"
            },
            routes: [
                {
                    name: "page1",
                    // empty hash - normally the start page
                    pattern: "",
                    target: "page1"
                },
                {
                    name: "page2",
                    pattern: "Page2",
                    target: "page2"
                },
                {
                    name: "page3",
                    pattern: "Page3",
                    target: "page3"
                }
            ],
            targets: {
                page1: {
                    viewName: "InputsView",
                    viewId:"InputsView",
                    viewLevel: 0
                },
                page2: {
                    viewName: "TableView",
                    viewId:"TableView",
                    viewLevel: 1
                },
                page3: {
                    viewName: "DetailsView",
                    viewId:"DetailsView",
                    viewLevel: 3
                }
            }
        }

• javascript
• routes
• sapui5

1 Answer 1

Replace

// UIComponent required from "sap/ui/core/UIComponent"
var router = UIComponent.getRouterFor(this); 
router.attachRouteMatched(this.initController, this);

with

// UIComponent required from "sap/ui/core/UIComponent"
const route = UIComponent.getRouterFor(this).getRoute(<yourRouteName>);
route.attachMatched(this.initController, this);

Then it is only matched when you reached the specified route