Welcome to the ultimate SAP UI5, BTP, Fiori, CAPM, RAP, ABAP blog! Explore comprehensive tutorials, interview questions, and real-world examples to master SAP development. Elevate your skills in creating stunning UI5 apps, harnessing the power of BTP, and building Fiori applications. Unlock the potential of CAPM, RAP, and ABAP, and learn to integrate seamlessly with the enterprise portal. Whether you're a beginner or an experienced developer, this blog is your go-to resource for SAP expertise!
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">
<Texttext="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!!
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
We need your help to support www.sapui5tutors.com. Please consider disabling your ad blocker while visiting this website so that we can continue to provide this content to you free of charge.
For details on turning off your ad blocker, or to add www.sapui5tutors.com to your whitelist, please read these
instructions
ConversionConversion EmoticonEmoticon