In this tutorial we will be focusing on creating nested views, and how nested views are useful in SAPUI5. So as you must know, re usability is one of the main and important features that any framework must include. And as seen in my previous blog on Fragments, the concept of re usability was pretty clear.

Watch My video, for better understanding of both Formatters and Nested Views.

Fragments are not only the container elements that can be used in a view for re usability. We can also nest Views into one another, i.e we could use Nested Views. This pattern is very useful , if you have parts of your UI which you want to reuse in different places of your particular application

So unlike Fragments, which doesn’t have their own controllers, Nested views have their own controllers just as usual views. Just a single line of code is required to integrate a Nested view into a view.

<mvc:XMLView viewName=”name of you view”/>

So there are basically 3 steps required:

1)Create a View and its controller in the specific folders.

2)Instantiate  the Nested view in the view, with the above single line of code.

3)Write the desired code in the newly created Nested View.

Example

Suppose, I have to add a Text in two of my pages. Here these buttons are used twice, hence I will use Nested Views to achieve this. This won’t be any real life requirement, but just for the sake of understanding, I have chosen this scenario.

Let me just follow the steps mentioned above.

1)Create views

 

So here NewView .view.xml is the new view that I have created in the view folder, similarly I have created the NewView.controller.js  in the controller folder. 

2)Instantiate the Nested view in the views. I will Instantiate it in the App.view.xml and S2.view.xml.

App.view.xml

 

S2.view.xml

3) Now, mention the code in the new view

<mvc:View

controllerName="sap.myApp.controller.NewView"

xmlns="sap.m"

xmlns:mvc="sap.ui.core.mvc">

<Text text="This is the new reusable view"/>

</mvc:View>

Now that been done, our purpose here is done. We have reused the text 2 times in two different views. I am sharing my output here.

Output

So, this was all Nested Views in SAPUI5. You  might want to take a look at my previous tutorial on Fragments in SAPUI5.

For any queries, mail me at sapui5tutors@gmail.com. If you loved my tutorials, comment down below your views. It always inspires me for making better blogs and stay tuned for more tutorials!!