Routing with Parameter SAP Web IDE

[yoppie_ariesthio]

Hello guys i have been following tutorial at SAPUI5 SDK - Demo Kit . I got stuck at Routing with parameter. That should be navigate to detail after i press list item. Debug tools F12  from chrome says

Uncaught Error: Invalid value "Invoices/0" for segment "{invoicePath}".

What should i do to get it right?

Best Regards

[susumususu · Accepted solution]

Hi Yoppie,

I have encountered same issue and following is the solution.

・controller Detail

_onObjectMatched: function (oEvent) {

     this.getView().bindElement({

          path: decodeURIComponent("/" + oEvent.getParameter("arguments").invoicePath),

          model: "invoice"

       });

  }

・controller InvoiceList

oRouter.navTo("detail", {

  invoicePath: encodeURIComponent(oItem.getBindingContext("invoice").getPath().substr(1))

});

Best regards,

Susumu

[Former Member · Accepted solution]

Hi Susumu,

best answer so far. Little improvment: You dont have to cut off and readd the first slash. because decoding and encoding will work on every slash in the path:

・controller Detail

_onObjectMatched: function (oEvent) {

     this.getView().bindElement({

          path: decodeURIComponent(oEvent.getParameter("arguments").invoicePath),

          model: "invoice"

       });

  }

・controller InvoiceList

oRouter.navTo("detail", {

  invoicePath: encodeURIComponent(oItem.getBindingContext("invoice").getPath())

});

[vijay_kumar49]

You cannot pass Forward slash '/' in your parameters. Since, it is reserved and will not be encoded.

Check the below link for more Info about special characters which are not allowed in parameters of .navTo

JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.ui.core.routing.Router

[yoppie_ariesthio]

Should i change the pattern : Detail / {invoicePath} ?

[vijay_kumar49]

yes

[yoppie_ariesthio]

i have changed to pattern : Detail  {invoicePath} at manifest.json file

controller InvoiceList

--------------------------------

oRouter.navTo("Detail", {

                      invoicePath: oItem.getBindingContext("invoice").getPath().substr(1)

                 } );

still got same error.... 

[Former Member]

I resolved removing "/" in the invoicePath and adding again in Detail controller:

controller InvoiceList

oRouter.navTo("detail", {

     invoicePath: oItem.getBindingContext("invoice").getPath().substr(1).replace(/\//,".")

});

-------------------------------------------

controller Detail

_onObjectMatched: function(oEvent) {

    this.getView().bindElement({

        path: "/" + oEvent.getParameter("arguments").invoicePath.replace(/\./,"/"),

        model: "invoice"

    });

},

[vijay_kumar49]

If your issue is resolved or got the right information. Please close the task. It’s may be useful for another persons who is having same issue

[karthikarjun]

Hi Yoppie,

Route:

{

  pattern: "Product/{productId}",

  name: "ProductDetails",

  target: "productDetails"

  }

Follow this pattern in component.js

For Navigation:

this._oRouter.navTo("ProductDetails", {

  productId: encodeURIComponent(oEvent.getSource().getBindingContext().getProperty("Id"))

  }, false);

Try this method

Regards,

Karthik A