read optional url parameters

Question

I want to catch an optional url parameter in my sapui5 application.

Manifest:

            "routes": [
            {
                "pattern": "page_1:query:",
                "name": "page_1",
                "target": [
                    "page_1"
                ]
            }]

Controller:

    handleRouteMatched: function(oEvent) {
        var oArgs, oView, oQuery;
        oArgs = oEvent.getParameter("arguments"); // undefined
        console.log(oEvent.mParameters);

Testcases

according to the Testcases PatternMatching

• URLPattern :query:

• manifest pattern:query:

• would match: {"query":"test=123123,bla=123213"}

URLs:

/webapp/index.html?test=123

has no value: oEvent.mParameters.data.hash: ""

/webapp/index.html?#/query=123

has value: oEvent.mParameters.data.hash: query="123"

• why do I have to add #/ ?
• And how can I avoid adding #/ ?

Answer 1

I think you are failing when understanding the UI5 Routing concept. You should not understand it as a GET request. The parameters you can pass in the hash route are not GET parameters.

So first, you should understand the parts of a URL, in this case we can say something like this:

<host>:<port>?myGetParam1=value1&myGetParam2=value2#/My/Navigation/Pattern/ParamValue1/ParamValue2`

From the ? to the # you have the parameters for the GET request. They go to the server side.
From the # to the end you have your hash route. Used in the client side.

if you define in the manifest the pattern as

 /My/Navigation/Pattern/{ParamValue1}/:ParamValue2:

then the following examples will work

#/My/Navigation/Pattern/3 --> It passes 3 as the mandatory paramValue1 and nothing for the optional paramValue2

#/My/Navigation/Pattern/3/2 --> It passes 3 as the mandatory paramValue1 and 2 as the optional paramValue2

However if you try

#/My/Navigation/Pattern/

it will fail, because you has set the paramValue1 as mandatory

To get those paramerters, define an event handler in your controller for the "RouteMatched" event. The parameters will be in the "arguments" of the event object. Clearly explained here.

I recomend you to go through this tutorial. It is one of the best tutorials in the UI5 demokit.