How to reuse SAPUI5 views?

Question

I created a header for one SAP UI5 page, now I want to have a similar header with almost the same components in another page. So, for the sake of code reuse I tried to:

• put the header within a separate UI5 view
• create this header instance with var pageHeader = sap.ui.jsview("appHeader","view.appHeader");
• add the pageHeader as content to the page in the customHeader field

But this did not work, without given any errors! So is it possible to reuse custom UI components via a view and if yes how to do that?

Answer 1

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.

Edit/Appendix:

Since version 1.15 of UI5 you can also use fragments as a lightweight alternative for reusing views. The documentation has some nice examples and explains the advantages of fragments and how they differ from normal views.