CODEWITHSUNDEEP
sapui5sap-fiori
Hari
Hari

Reputation: 297

How to get element's id of another view SAPUI5

I have 3 views say first,second & third. I need to access a vertical layout's id of second view from first view. For which I have used sap.ui.getCore().byId("__xmlview1--spend_layt"); to retrieve it. It works but when I navigate to third view & come back, id changes to __xmlview28--spend_layt & the control not works. How to fix this?

EDIT :

First.view.xml

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="budgetspend.controller.First" xmlns:html="http://www.w3.org/1999/xhtml" displayBlock="true"> <App id="BA_APP"> <pages> <HBox width="100%" height="100%" id="header_container"> <items> <Image class="logo" src="../images/logo_new.png"/> <Image class="header" src="../images/header-bg.png"/> <html:ul class="tab"> <html:li> <html:a id="onBud" class="tablinks active">Tab 1 </html:li> <html:li> <html:a id="onSpend" class="tablinks">Tab 2</html:a> </html:li> </html:ul> <mvc:XMLView viewName="budgetspend.view.second"/> </items> </HBox> </pages> </App> </mvc:View>

In the second view, I use 2 vertical layouts. one for tab 1 & another for tab 2. Only one visible at a time. Tab click events are written in First.controller.js. I don't know how to access ID's of vertical layouts(in second view) from First.

I am just exploring how standard html will work on SAPUI5 as I am aware of using sap.m.IconTab.

Upvotes: 1

Views: 6134

Answers (1)

Cassio
Cassio

Reputation: 3102

What you are facing is due to the dynamic creation of elements. Every time you leave a screen and goes back into it, the items are regenerated, but they can't have the same ID, since they were used before.

One solution to this is to create a Utils folder, and create an object, let's say UIHelper.

This file would look like this:

jQuery.sap.declare('my.app.Utils.UIHelper');

my.app.Utils.UIHelper = {
  controllerInstance1 : null,
  controllerInstance2 : null,
  controllerInstance3 : null,

 //Add "getters and setters" for each of these attributes (repeat for Controller 2 & 3)
 setControllerInstance1 : function(oController){
      this.controllerInstance1 = oController;
  },
 getControllerInstance1 : function(){
    return this.controllerInstance1;
  }

};

Now, at the controller file for each of your views, you add the following line at the top of the file:

jQuery.sap.require('my.app.Utils.UIHelper');

And on the onInit event of those controllers, you set the controller instance on the UIHelper object:

my.app.Utils.UIHelper.setControllerInstance1(this);

And when you want to get the different views from anywhere in the code, assuming that the views are assigned to one of the controllers, you can just use the following:

my.app.Utils.UIHelper.getControllerInstance1().getView();

Update in my answer after the update on the question:

To access the layout from the second view, you could do the following:

var layout = my.app.Utils.UIHelper.getControllerInstanceView2().byId('spend_layt');

Upvotes: 1

Related Questions