Common Controller for Parent and Nested Views

[vinayaknath_singh]

Hi, We are developing an app where we are using nested views inside main view. The main view structure is like this:

<mvc:View xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"> <pages> <Page> <content> <IconTabBar> <items> <IconTabFilter icon="sap-icon://xyz" key="1" design="Horizontal"> <mvc:XMLView viewName="firstView"/> </IconTabFilter> <IconTabSeparator icon="sap-icon://open-command-field"/> <IconTabFilter icon="sap-icon://abc" key="2" design="Horizontal"> <mvc:XMLView viewName="secondView"/> </IconTabFilter> </items> </IconTabBar> </content> <footer> <Toolbar> <content> <Button text="{Update}" id="Update" type="Accept" enabled="true" press="onUpdateChanges"/> <Button text="Reset" id="ResetChanges" enabled="true" press="onResetChanges"/> </content> </Toolbar> </footer> </Page> </pages> </mvc:View>

I have two queries:

1. Is it good to use a common controller for all the views (nested and main)?

2, I want to access elements in nested views by id when I click on Buttons(Update/Reset) using this.getView().byId(). The problem is Buttons(Update/Reset) are in main view. So If I use different controller for main view and nested views, accessing elements of nested views in main view controller is not possible. So as as solution, I am trying to use common controller for all views. Will this approach work? If I use common controller, can I access nested view elements using method this.getView().byId() in common controller.

[Former Member · Accepted solution]

In the main view controller use the following code:

var subView = this.getOwnerComponent().byId("yourSubViewID");

Then you can access elements from the subviews by using:

var button = subView.byId("btnId");

[saivellanki]

Hello Vinayak,

You still can access the main view from nested controller (I hope you would be using Routing for Navigation between the views). Try something like below:

var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
var oMainView = oRouter.getView("mainviewpath");  //Mention your main view path instead of 'mainviewpath'
var oButton = oMainView.byId("oButton");

Thank you!

Best Regards,

Sai.

[junwu]

why u need to access the ui element?