Question Re: Routing with nested components SAPUI5 in Technology Q&A

Routing with nested components SAPUI5

Former Member — Wed, 31 May 2017 09:34:51 GMT

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

Re: Routing with nested components SAPUI5

Former Member — Wed, 31 May 2017 13:33:25 GMT

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.

Re: Routing with nested components SAPUI5

maheshpalavalli — Wed, 31 May 2017 16:09:48 GMT

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

Re: Routing with nested components SAPUI5

Former Member — Thu, 01 Jun 2017 05:40:32 GMT

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

Re: Routing with nested components SAPUI5

Former Member — Thu, 01 Jun 2017 10:30:37 GMT

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

Re: Routing with nested components SAPUI5

maheshpalavalli — Fri, 02 Jun 2017 19:13:46 GMT

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

Best Regards,
Mahesh