Routing with nested components SAPUI5

[#1]

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" doesn't really help me. Thanks for ever help. Best wishes

[maheshpalavalli · Accepted solution]

Hi Benjimin,

First the Question "Nested Component Routing" is a bit misleading one :). It implies that you are using more than one sap ui5 components and using the routing between them and I hope you meant nested routing as i couldnt find anything about multiple components in your question.

Assuming you are talking about master-detail page navigation, the SAP documentation, "working with nested components" you are referring is about something else completely which will not help you for your current requirement.

In the above configuration, you do not need to mention the parent, the routing should be like below:

You need to call the routing as mentioned in your code by passing the required keys..

  "routes": [
            {
            "pattern": "",
            "name": "master1",
            "target": "master1"
            },

            {
            "pattern": "master2/{key1}",
            "name": "master2",
            "target": "master2"
            }

            {
            "pattern": "master2/{key1}/detail1/{key2}",
            "name": "detail1",
            "target": ["detail1", "master2"]
            }
        ],
        "targets": {

            "master1": {
                "viewName": "master1",
                "viewLevel": 1
            },
            "master2": {
                "viewName": "master2"
                "viewLevel": 2
            },

            "detail1": {
                "viewName": "detail1",
                "viewLevel": 3,
                "controlAggregation": "detailPages"
            }
        }

Thanks & Best Regards,
Mahesh

[Former Member · Accepted solution]

Hi Mahesh,

thanks for your answer! I get the point.

But now i have the problem of how to pass the keys correctly. I am only able to catch {key2] with

equiPath: oItem.getBindingContext("equi").getPath().substr(25)

The Value with .substr(0) is: /Equipments/0/Messpunkte/0

[Former Member · Accepted solution]

Finally found a way to pass the parameters with regular expressions.

Here the code for the onNavToDetail function with a bit of console output for testing:

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]
			}); 
		}

[maheshpalavalli · Accepted solution]

you can also use split("/") to access the required data...

Best Regards,
Mahesh

[Former Member]

I changed the "routes" and the "targets" section of the routing configuration. It now looks like:

 "routes": [...
            {
            "pattern": "detail/{impttPath}",
            "name": "detail",
            "target": "detail",
            "parent": "master"

            }
        ],
        "targets": {
            ...
            "detail": {
                "viewName": "DetailPage",
                "controlAggregation": "detailPages"
            }
        }

When calling the app via URL with the Pattern /master/0/detail/0 the routing mechanism works. (the pattern of the "master" route is "pattern": "master/{equiPath}" and is the parent of the "detail" route). The mistake must be in the onNavToDetail function. But by now i didn't figure out where.