Skip to Content
avatar image
Former Member

Routing with nested components SAPUI5

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Best Answer
    May 31, 2017 at 04:09 PM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    May 31, 2017 at 01:33 PM

    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.

    Add comment
    10|10000 characters needed characters exceeded