SAPUI5 Unified Shell Router Navigation Appends content

[former_member231229]

Hi all,
I am using sap.ui.unified.Shell as the root component of my application.
The goal is to load different Views - belonging to the same application - inside the "content" aggregation of the UnifiedShell itself.

I have defined a Router in the manifest.json file and this seems to be working, but I get a dirty effect that each view is being appended to the main content instead of replacing the old view.

I tried to set the "clearTarget" property in the manifest.json file but this seems not to have any effect.

Here is my router definition:

		"routing": {
			"config": {
				"routerClass": "sap.m.routing.Router",
				"viewType": "XML",
				"viewPath": "HrOfficerDashboard.view",
				"transition": "slide",
				"bypassed": {
					"target": "notFound"
				}
			},
			"routes": [
				{
					"pattern": "",
					"name": "home",
					"target": "home"
				},
				{
					"pattern": "clusters",
					"name": "toClusterView",
					"target": "clusterView"
				},
				{
					"pattern": "analysis",
					"name": "toNewAnalysisView",
					"target": "analysisView"
				}
			],
			"targets": {
				"home": {
					"viewName": "Home",
					"viewLevel": 1,
					"controlId": "mainShell",
					"controlAggregation": "content",
					"clearTarget": true
				},
				"clusterView": {
					"viewPath": "HrOfficerDashboard.view.clusters",
					"viewName": "Cluster",
					"viewLevel": 1,
					"controlId": "mainShell",
					"controlAggregation": "content",
					"clearTarget": true
				},
				"analysisView": {
					"viewPath": "HrOfficerDashboard.view.analysis",
					"viewName": "NewAnalysis",
					"viewLevel": 1,
					"controlId": "mainShell",
					"controlAggregation": "content",
					"clearTarget": true
				},
				"notFound": {
					"viewName": "NotFound",
					"transition": "show",
					"controlId": "mainShell",
					"controlAggregation": "content",
					"clearTarget": true
				}
			}
		},

I also tried to set the "controlId" and "controlAggregation" properties in the head "routing.config" element but the behaviour doesn't change.

Any hint?

Thanks in advance,

Roberto.

[francesco_alborghetti · Accepted solution]

Hi Roberto,

One workaround is to clear Shell content before you call router navigation:

 onButtonPress: function (oEvent) {
      var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
      this.getView().getParent().removeAllContent();
      oRouter.navTo("home");
    }

Here a plunker

However I think it is always better to encapsulate navigation into sap.m.App or SplitApp classes, since their aggregations (pages, masterPages, detailPages) receive navigation events:

Sapui5 documentation

[Former Member · Accepted solution]

Dear Francesco,

I used your plunker code. It navigates fine, but it does not show the content of the navigated page. What can be the problem?

[former_member231229]

Hello Francesco,
Thanks for your reply! I will definetely give it a try.
However, I believe I will move the implementation towards a more "standard" approach and switch to a SplitApp.

Best regards,
R.