Using nested views for developing UI5 application

[harshad]

Problem Statement:

Using nested view to separate code and reduce dependency. In simple words contents of 1 view are embedded into another view. This is very common in most of the web development technologies

As we use MVC architecture in SAP UI5 with views being separated their controllers are also separate.

In web development it is common practice to create small reusable modules. In HTML it is usually done using ifram tag. But for SAP UI5 I could not find anything. So here is an attempt to create nested views.

Advantage:

1. Multiple people can work on same project without facing any issue while merging.


2. Code is segregate which helps in reducing complexity of program.


3. Individual view can be used as a plugin.

 

How to steps:

1. Get UI requirement finalized and check if final expected layout can be split into separate blocks. If you are practicing then this step is very easy.


2. Add code in main view to nest other views. You can use Grid layout or any other layout that is suitable for the application.
   

   <Page>
   
   	<content>
   
   		<l:Grid>
   
   			<mvc:XMLView viewName="sap.sample.View1" id="View1" type="XML">
   
   				<mvc:layoutData>
   
   					<l:GridData span="XL5 L5 M12 S12"></l:GridData>
   
   				</mvc:layoutData>
   
   			</mvc:XMLView>
   
   			<mvc:XMLView viewName="sap.sample.View2" id="View2" type="XML">
   
   				<mvc:layoutData>
   
   					<l:GridData span="XL7 L7 M12 S12"></l:GridData>
   
   				</mvc:layoutData>
   
   			</mvc:XMLView>
   
   		</l:Grid>
   
   	</content>
   
   </Page>​

   
   


3. Add code for each event in the views corresponding view. Note: For event happening in view A you can perform changes in view A only.View 1:
   

   <mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form"
   
   	controllerName="sap.sample.View1" xmlns:html="http://www.w3.org/1999/xhtml">
   
   	<ScrollContainer>
   
   		<f:SimpleForm title="Title">
   
   			<f:content>
   
   				...
   
   			</f:content>
   
   		</f:SimpleForm>
   
   	</ScrollContainer>
   
   </mvc:View>​

   
   View 2:
   

   <mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
   
   	controllerName="sap.sample.View2" xmlns:html="http://www.w3.org/1999/xhtml">
   
   	<ScrollContainer>
   
   		<IconTabBar>
   
   			<items>
   
   				......
   
   			</items>
   
   			<content>
   
   				......
   
   			</content>
   
   		</IconTabBar>
   
   	</ScrollContainer>
   
   </mvc:View>​

   
   


4. Once all code is ready you can push that code to SAP system.

 

Calling methods of View2 controller for event occurring in View1

 

I had a requirement where on event of View1 I wanted to make some changes in View 2. I found 3 ways using which we can achieve this:

1. Using Global Data models
   Create JSON models in manifest file and bind the data to this model. As this model is global for the application we can access data from any view.


2. Calling methods from another controller
   Using sap.ui.controller("<controller_id>").functionName();Note: Using this method you cannot access this.getView(). If you want to perform some operation on data, then that code you can call using this method.


3. Using event Bus
   Event Bus is publisher/subscriber design pattern. There will be 2 events one will be a publisher and another will be subscriber.Publisher : This is event which gets triggered on any event  of same view.Subscriber: This is event which gets triggered on any event of another View.

 

Sample Code for event bus:

Subscriber:

this.getOwnerComponent().getEventBus().subscribe(

	Const.CHANNEL_NAME,

	Const.EVENT_NAME,

	this.methodName,

	this

);

Publisher:

this.getOwnerComponent().getEventBus().publish(

	Const.CHANNEL_NAME,

	Const.EVENT_NAME,

	oKey

);

 

Once event is triggered in View1(publisher) an event will be published. All the subscriber events will be triggered.

 

Below is final output of using nested views.

 

Hope you find this blog helpful!

Please share your feedback in comment section.

Please Check SAP UI5 Topic page
For more related blogs follow SAP UI5 blogs.

Please follow my harshad.supe for future posts.