Search code examples
routessapui5sap-fiori

SAPUI5 - Routing with parameter


I have 2 pages. On first page, user needs to select dropdown values & click submit, Where I call jQuery ajax. On success, I need to pass the response to page 2. Below is what I have tried. But it doesn't works.

firstPage.controller.js

jQuery.ajax({
url: requestUriOutput,
method: "GET",
async: false,
dataType: "json",
success: function(data) {
if(data.d.results.length > 0)
    {
        var detail = data.d.results.concat();
        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
        oRouter.navTo("second", {details : detail});
    }
} });

SecondPage.controller.js

    onInit: function () {
            var oRouters = sap.ui.core.UIComponent.getRouterFor(this);
            oRouters.getRoute("second").attachPatternMatched(this._onObjectMatched, this);
        },
        _onObjectMatched: function (oEvent) {
            var obj = oEvent.getParameter("arguments").details;
        },

manifest.json

    "routes": [{
            "pattern": "",
            "name": "app",
            "target": "app"
        }, {
            "pattern": "first",
            "name": "first",
            "target": "first"
        }, {
            "pattern": "second/{details}",
            "name": "second",
            "target": "second"
        }],

Solution

  • You want to navigate to route with name "table", but your manifest.json doesn't contain a route with this name. Align route names and try again.

    Check the URL of the webpage; it should change after the data is downloaded. If it doesn't change, make sure that router is initialized in your Component.js init() function: this.getRouter().initialize().

    Edit: Based on the provided code, you are trying to add an array as URL parameter. This is not supported, you should pass only string parameters or encode the whole array and decode in the second view. Routing definition is also incorrect; if you want to use targets, you should define a target object as you can see here. If you don't want to use targets, change the property name "target" to "view" in the Router constructor (note that it's now deprecated, so I'd recommend to use a Component and/or manifest.json to define routing with targets).