Routing issue for header and menu bar layout

[former_member253524]

Hello Everyone,

I have requirement to design application as shown in below Mock up.

I tried this code in app.view.controller but unable to route to “newView”.

onNewAssignment: function(oEvent){

this._router.navTo("newView");

}

View code:

In design, header bar and top navigation bar should be constant throughout application so want to display different view in content part of App.view. Below is my routing rule defined.

Component.js

I am not getting any error, # parameter is getting changed in URL but view is not getting called.

Kindly suggest if you have approach to design such a layout. On every Menu items we have to display different views and fragments.

Regards,

Jain.

[saivellanki · Accepted solution]

Hi Jain,

I am not sure, where you might be going wrong. But, I see that you can assign multiple targets in single route.

Go through this tutorial: SAPUI5 SDK - Demo Kit

I tried to build a sample which might suit to your requirement: Plunker

Page header and tab header remains constant in the above sample, only content changes.

Regards,

Sai.

[former_member253524 · Accepted solution]

Thanks a lot Sai, your example is of great help for me.

One doubt in such a multiple target routing scenario, do we have to clear content every time use clicks on menu option?

Regards,

Jain

[saivellanki · Accepted solution]

Hi Jain,

Yes, since we are re-using and inserting the content to same view. So, it needs to be cleared (or) previous data will be visible after inserting the new data as well.

Regards,

Sai.

[former_member253524 · Accepted solution]

ok. It resolves my issue.

Regards,

Jain.

[preethi_ande]

Hi Jain,

Did u initialize the router in init function of component.js?

ex:

init : function() {

this.getRouter().initialize();

}

Thanks,

Preethi

[former_member253524]

Yes it is initialized.

[preethi_ande]

1. can you try routing class as sap.m.routing.Router.

2. where you want to display ur newView, there should be targetControl right.