Having trouble in routing with parameters in SAPUI5

Question

I am trying to show the data of a particular item in a list when ,clicked upon , on the next page (view) Here Overview.view.xml is the default view with a clickable list connected to an oData model. Next is the controller for Overview navigating to the next page i.e. Overview.controller.js. The next page is Detail.view.xml I want to show details of clicked item in this page.

    #Overview.view.xml
    <mvc:View controllerName="root.demo.controller.Overview" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true" xmlns="sap.m">
    <App >
        <pages>
            <Page title="{i18n>title}">
                <content>
                    <List headerText="list" class="sapUiResponsiveMargin" width="auto" items="{HANA>/person}">
                        <items>
                            <ObjectListItem title="{HANA>ID} x {HANA>FIRSTNAME}" type="Navigation" press="onPress"/>
                        </items>
                    </List>
                </content>
            </Page>
        </pages>
    </App>
</mvc:View>



    #Overview.controller.js
        sap.ui.define([
    "sap/ui/core/mvc/Controller"
    ], function (Controller) {
    "use strict";

    return Controller.extend("root.demo.controller.App", {
        onPress: function (oEvent) {


            var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
            oRouter.navTo("detail");



        }
    });
     });


    #Detail.view.xml
    <mvc:View xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <Page title="{i18n>detailPageTitle}">
        <ObjectStatus  title="PAGE 1"

        />
    </Page>
</mvc:View>

GellertPeterSiskovits GellertPeterSiskovits · Accepted Answer · 2019-02-15T09:57:37

If you have different Entity Sets with association you need to send the key of the association to the second view and there create the binding towards the assocaited entity set

If not you need to send the object to the second view

Either way you need to navigate with parameters

In the manifest file you need to specify the routing

"routes": [
                {
                    "name": "TargetMaster",
                    "pattern": "RouteMaster",
                    "target": [
                        "TargetMaster"
                    ]
                },
                {
                    "pattern": "Detail/{storePath}",
                    "name": "Detail",
                    "target": "Detail"
                }
            ],
            "targets": {
                "TargetMaster": {
                    "viewType": "XML",
                    "transition": "slide",
                    "clearControlAggregation": false,
                    "viewName": "Master"
                },
                "Detail": {
                    "viewType": "XML",
                    "viewName": "Detail"
                }
            }

In the Overview Controller you need to create the navigation similarly to

onListItemPress: function(oEvent){
            var oItem = oEvent.getSource();
            var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
            oRouter.navTo("Detail",{
                storePath: oItem.getBindingContext().getProperty("Store")   
            });
        }

you can find more information on the official documentation here

Having trouble in routing with parameters in SAPUI5

1 Answers