Update step-30-routing-and-navigation-e5200ee.md

[satyadwivedi]

The details object of the routing parameters is not functioning correctly, but it should use "viewId" and "viewName" instead of "id" and "name".

[satyadwivedi]

Please review. I followed the documentation for implementing routing, but I am unable to navigate. I discovered that the properties of the Details object are different. is it due to the version ?

[arunkrishnamoorthy]

@satyadwivedi which version of SAP UI5 are you using. i just looked into my application. In the targets the properties name as follows.

in the fiori elements app,
"ObjectPage": {
"type": "Component",
"id": "ObjectPage",
"name": "sap.fe.templates.ObjectPage",
}

in the freestyle app,
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "namespace.view",
"controlAggregation": "pages",
"controlId": "app",
"clearControlAggregation": false
},
"routes": [
{
"name": "Routeroot",
"pattern": ":?query:",
"target": [
"Targetroot"
]
}
],
"targets": {
"Targetroot": {
"viewType": "XML",
"transition": "slide",
"clearControlAggregation": false,
"viewId": "root",
"viewName": "root"
}
}
},

Can you brief the issue?

[KvM2]

Hi @satyadwivedi , thanks for your contribution! We'll take a look and will get back to you.

[satyadwivedi]

@satyadwivedi which version of SAP UI5 are you using. i just looked into my application. In the targets the properties name as follows.

in the fiori elements app, "ObjectPage": { "type": "Component", "id": "ObjectPage", "name": "sap.fe.templates.ObjectPage", }

in the freestyle app, "routing": { "config": { "routerClass": "sap.m.routing.Router", "viewType": "XML", "async": true, "viewPath": "namespace.view", "controlAggregation": "pages", "controlId": "app", "clearControlAggregation": false }, "routes": [ { "name": "Routeroot", "pattern": ":?query:", "target": [ "Targetroot" ] } ], "targets": { "Targetroot": { "viewType": "XML", "transition": "slide", "clearControlAggregation": false, "viewId": "root", "viewName": "root" } } },

Can you brief the issue?

In my freestyle SAPUI5 app, I see id and name inside 'targets.details' instead of viewId and viewName. please refer to the doc https://sapui5.hana.ondemand.com/#/topic/e5200ee755f344c8aef8efcbab3308fb

below config is not working

"targets": {
"detail": {
"id": "detail",
"name": "Detail"
}
}

where as this is working -

"targets": {
"detail": {
"viewName": "detail",
"viewId": "Detail"
}
}

[boghyon]

@satyadwivedi your /sap.ui5/routing/config is probably missing "type": "View". Could you please add it and try again?

[stopcoder]

Hi @satyadwivedi,

The Developer Guide and Tutorial contain the most up-to-date version of the routing configuration.

With the introduction of the Component target, the options prefixed with "view"—such as viewId, viewName, and viewPath (except viewType)—have been generalized to id, name, and path. A target can now be either a View or a Component, making the "view" prefix obsolete. When using the new option set without the "view" prefix, you must explicitly specify the type as either View or Component to define the target type.

In the tutorial, the type option is set in the routing/config section and applies to all targets. However, instead of defining it globally, you can also specify the type individually for each target.

As pointed out by @boghyon, try to add the type and retest.

Best regards,
Jiawei

[KlattG]

The details object of the routing parameters is not functioning correctly, but it should use "viewId" and "viewName" instead of "id" and "name".

Hi @satyadwivedi , I think this way of naming the routing parameters might be deprecated since UI5 1.62 when component targets were enabled. See the comments by @stopcoder and @boghyon above.

[satyadwivedi]

Hi @boghyon @stopcoder , I am using sapui5 version 1.120.0 (stable version ), I tried the above setting by defining the type as View, but still not working. please have a look of my repo https://github.com/satyadwivedi/SampleRouting/blob/main/webapp/manifest.json

and I am adding my config below as well -

"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"type": "View",
"path": "com.satya.routingapp.view",
"controlId": "app",
"controlAggregation": "pages"
},
"routes": [
{
"name": "RouteView1",
"pattern": ":?query:",
"target": [
"TargetView1"
]
},
{
"name": "page2",
"pattern": "supplier/{pid}",
"target":"targetPage2"
}
],
"targets": {
"TargetView1": {
"id": "View1",
"name": "View1"
},
"targetPage2": {
"id": "idV2",
"name": "View2"
}
}
}

This is my SAPUI5 version configuration

"sap.ui5": {
"flexEnabled": true,
"dependencies": {
"minUI5Version": "1.120.24",

One strange I noticed that after adding "async": true in '/sap.ui5/routing/config' it is starts working as expected.

Thanks! for your patience and quick response.

[stopcoder]

Hi @satyadwivedi,

the new set of options without the "view" prefix only works with asynchronous routing. For compatibility reasons, the default value of the async option is set to false. This means that when using the new set of options, async: true must be explicitly set.

To simplify the configuration of different options related to asynchronous loading, we introduced the IAsyncContentCreation interface. When applied to a component, it automatically enables async loading for both the root view and routing, eliminating the need to set async: true manually. In all tutorials, IAsyncContentCreation has already been applied to the component, so there is no need to explicitly set async: true for sapui5/routing in manifest.json.

In your case, IAsyncContentCreation is not set for your component, and the new options will not work unless async: true is enabled. If you check the error log in your browser console, you will find messages like:

Sync Target 'TargetView1' uses the new options which are only supported by async Target. -
Sync Target 'targetPage2' uses the new options which are only supported by async Target. -

This strongly indicates that async routing must be enabled to support the new option set.

To resolve this, you have two options:

1. Add async: true to the routing/config.
2. Apply IAsyncContentCreation to your component, which is the recommended approach.

An example usage of IAsyncContentCreation can be found here, and the explanation of IAsyncContentCreation is as follows:

The sap.ui.core.IAsyncContentCreation interface implicitly sets both the component's rootView and its router configuration to "async": true". The latter is further explained in Step 30: Routing and Navigation.

Best regards,
Jiawei

[satyadwivedi]

thanks! for clarification.

[boghyon]

@ future readers: the answer https://stackoverflow.com/a/72617737/5846045 summarizes how to resolve the following errors:

Sync Target '[...]' uses the new options which are only supported by async Target.

The target '[...]' no viewName defined.

[KlattG]

@ future readers: the answer https://stackoverflow.com/a/72617737/5846045 summarizes how to resolve the following errors:

Sync Target '[...]' uses the new options which are only supported by async Target.

The target '[...]' no viewName defined.

Thanks for the link @boghyon - always a good idea to look at the console error log!