Skip to Content
avatar image
Former Member

SAPUI5 Unified Shell Router Navigation Appends content

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.

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Best Answer
    Oct 11, 2016 at 08:55 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      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?

  • avatar image
    Former Member
    Oct 11, 2016 at 01:43 PM

    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.

    Add comment
    10|10000 characters needed characters exceeded