sapui5 incorrect route name is selected

Question

basically, I copied every thing from sap demo application, https://sapui5.hana.ondemand.com/sdk/test-resources/sap/m/demokit/tdg/index.html?responderOn=true

what i am trying to do is: in the master page, i added a button to trigger navigation. i added new page, when that button is pressed, the new view should be displayed in the detail page. enter image description here the problem is: when the button is pressed, my event handler is called,which will trigger the navigation. in the routepatternmatched event handler, i got route name "product" . but it is supposed to be "detail1". in my code it is like navTo("detail1"), what's wrong here? of course my detail1 view is not displayed in the detail page.

routing : {
        config : {
            routerClass : com.pdh.MyRouter,
            viewType : "XML",
            viewPath : "com.pdh.view",
            targetAggregation : "detailPages",
            clearTarget : false
        },
        routes : [
            {
                pattern : "",
                name : "main",
                view : "Master",
                targetAggregation : "masterPages",
                targetControl : "idAppControl",
                subroutes : [
                    {
                        pattern : "{product}/:tab:",
                        name : "product",
                        view : "Detail"
                    }
                ]
            },{
                pattern : "detail1",
                name : "detail1",
                view : "Detail1",
                targetAggregation : "detailPages",
                targetControl : "idAppControl"
                
            },
            {
                name : "catchallMaster",
                view : "Master",
                targetAggregation : "masterPages",
                targetControl : "idAppControl",
                subroutes : [
                    {
                        pattern : ":all*:",
                        name : "catchallDetail",
                        view : "NotFound",
                        transition : "show"
                    }
                ]
            }
        ]
    }

master view where the button is added

<mvc:View controllerName="com.pdh.view.Master"
displayBlock="true" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<Page id="page" title="{i18n>masterTitle}">

    <subHeader>
    
        <Bar id="searchBar">

            <contentMiddle>
                

                <!-- <SearchField id="searchField" showRefreshButton="{device>/isNoTouch}" 
                    search="onSearch" tooltip="{i18n>masterSearchTooltip}" width="100%"> </SearchField> -->

            </contentMiddle>
        </Bar>
    </subHeader>
    <content>
    <Button xmlns="sap.m" busy="false" busyIndicatorDelay="1000"
                    visible="true" text="Jun" type="Default" width="" enabled="true"
                    icon="" iconFirst="true" activeIcon="" iconDensityAware="true"
                    ariaDescribedBy="" ariaLabelledBy="" tap="" press="junNav">
                    <tooltip></tooltip> <!-- sap.ui.core.TooltipBase -->
                    <dependents></dependents> <!-- sap.ui.core.Control, since 1.19 -->
                </Button>
        <!-- <List id="list" items="{/}" mode="{device>/listMode}"
            noDataText="{i18n>masterListNoDataText}" select="onSelect" growing="true"
            growingScrollToLoad="true">
            <items>
                <ObjectListItem type="{device>/listItemType}" press="onSelect"
                    title="{product_cd}">
                </ObjectListItem>
            </items>
        </List> -->
    </content>
    <footer>
        <Bar>
            <contentRight>
                <Button icon="sap-icon://add" tooltip="{i18n>masterFooterAddButtonTooltip}"
                    press="onAddProduct" />
            </contentRight>
        </Bar>
    </footer>
</Page>
</mvc:View>

event handler in the controller:

junNav : function() {
    // This is only relevant when running on phone devices
    console.log("junNav");
    this.getRouter().navTo("detail1",null,true);
},

event handler for routepatternmatched event:

onRouteMatched : function(oEvent) {
    var sName = oEvent.getParameter("name");
    console.log("master controller onRouteMatched "+sName);
    if (sName !== "main") {
        return;
    }

    //Load the detail view in desktop
    this.getRouter().myNavToWithoutHash({ 
        currentView : this.getView(),
        targetViewName : "com.pdh.view.Detail",
        targetViewType : "XML"
    });

    //Wait for the list to be loaded once
    this.waitForInitialListLoading(function () {

        //On the empty hash select the first item
        this.selectFirstItem();

    });

},

TobiasOetzel TobiasOetzel · Accepted Answer · 2015-03-27T09:01:56

when you use routing, the order of the routes is important. Only the first route matching the pattern will fire an event. yout route product has a pattern that matches detail1 since {product}/:tab: will result in detail/(no tab)

if you change this pattern to Products/{product}:tab detail1 will not match anymore only Products/detail1 will match.

Best regards, Tobias

sapui5 incorrect route name is selected

1 Answers