How to reuse SAPUI5 views?

Answer

This problem is probably related to the several varaints of using sap.ui.jsview.

• View definition
• View instantiation

Calling var pageHeader = sap.ui.jsview("appHeader","view.appHeader") asks the framework to look for a view with the name "view.appHeader" in your project. If there is a view with this name it will create a new instance of it and assigns it the ID "appHeader". If you use the same statement in several modules of your application you ask the framework to create an instance of the view with the same ID everytime. This will probably result in the following Error: adding element with duplicate id 'appHeader'. So when reusing a view avoid using the ID parameter in your instantiation.

One more thing you should consider when reusing a view: Since a view has a function called getControllerName which returns the name of the controller used for this view the framework will create a new instance of this controller for each view you instantiate. This is no bad behaviour but should be known to avoid problems.

At a glance:

View Definition: sap.ui.jsview(sId, vView) (e.g. in pageHeader view file)

View Instantiation: sap.ui.jsview(sName) (e.g. calling/reusing it in several files)

In your case:

var pageHeader = sap.ui.jsview("view.appHeader") should do it.