Nested routing SAPUI5

Question

I have a question regarding routing in SAPUI5. I have a SplitApp container with two master views. The first master view displays a list of equipments. The second master view displays a list of measuringpoints of the chosen equipment. The data is (by now) located in a clientside JSON model wich looks like this:

{
"Equipments": [
    {
        "EquipmentNr": "Equipment 0000000001",
        "Messpunkte": [
                {
                    "MesspunktNr": "Messpunkt 01"
                },
                {
                    "MesspunktNr": "Messpunkt 02"
                },
                {
                    "MesspunktNr": "Messpunkt 03"
                }
            ]
    },

The detail page now should be able to access the "Messpunkt" chosen in the second masterview but I am not able to pass the parameters via routing. The routing configuration for routing to the detail view:

            "routes": [...
            {
            "pattern": "master/{equiPath}/detail/{impttPath}",
            "name": "detail",
            "target": "detail"
            }
        ],
        "targets": {
            ...
            "detail": {
                "viewName": "DetailPage",
                "controlAggregation": "detailPages",
                "parent": "master"
            }
        }

I am not sure how to call the navTo method in the controller of masterpage2 because when i try to it always gives me an error saying "The segment {equiPath} is required."

when calling the onNavToDetail method in this form:

onNavToDetail : function(oEvent) {
			var oItem = oEvent.getSource();
			var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
			oRouter.navTo("detail", {
				equiPath: oItem.getBindingContext("equi").getPath().substr(0)
			});

i get the whole path e.g. "/Equipments/0/Messpunkte/0" for segment "{equiPath}

the information in the documentation "working with nested components" don't really help me. Thanks for ever help. Best wishes

I changed the "routes" and the "target" section of the routing configuration. The "routes" section now contains the "pattern": "detail/{impttPath}" and the "parent": "master". The "targets" section now only contains the viewName and the controlAggregation for the pattern. after doing this i am able to call the app via URL with the pattern e.g. /master/0/detail/0 and it works. The mistake has to be in the onNavToDetail function but i i do not know how to solve the problem. — Bendit

Bendit Bendit · Accepted Answer · 2017-06-01T10:36:11

I now have figured out where the problem was. With a bit help at scn it was possible to solve it. First of all my routing configuration was wrong. It had to look like:

"routes": [
            {
            "pattern": "",
            "name": "home",
            "target": "home"
            },
            {
            "pattern": "master/{equiPath}",
            "name": "master",
            "target": "master"
            },
            {
            "pattern": "/master/{equiPath}/detail/{impttPath}",
            "name": "detail",
            "target": ["detail", "master"]
            }
        ],
        "targets": {
            "home": {
                "viewName": "MasterPage",
                "viewLevel": 1,
                "controlAggregation": "masterPages"
            },
            "master": {
                "viewName": "MasterPage2",
                "viewLevel": 2,
                "controlAggregation": "masterPages"
            },
            "detail": {
                "viewName": "DetailPage",
                "viewLevel": 3,
                "controlAggregation": "detailPages"
            }
        }

Then i called the router with the onNavToDetail function and passed the parameters with the help of regular expressions. This is the code i used:

onNavToDetail : function(oEvent) {
        var oItem = oEvent.getSource();
        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);

        var sPath = oItem.getBindingContext("equi").getPath();
        console.log(sPath);
        var regExpSpath = /([0-999])/g;
        var result = sPath.match(regExpSpath);
        console.log(result[0]);
        console.log(result[1]);

        oRouter.navTo("detail", {
            equiPath: result[0],
            impttPath: result[1]
        }); 
    }

Nested routing SAPUI5

1 Answers