view.byId issues with JS-based UI

[#1]

Hi Everyone,

I'm trying to build a UI using javascript and in my controller, I need to get a reference to one of the components I created in my view. For example:

Main.view.js

sap.ui.jsview("views.Main", {
      getControllerName : function() {
         return "views.Main";
      },
      createContent : function(oController) {
          var page = new sap.m.Page({
                    showHeader: false,
          });
          page.addStyleClass("page");
          var content = new sap.m.FlexBox("productsContent",{
                    direction: "Column",
          });
          page.addContent(content);
          return page;
      },
});

and my controller looks like:

Main.controller.js

sap.ui.controller("views.Main", {
   onInit: function() {
             var view = this.getView();
            var content =  view.byId("productsContent");
             alert(content);
   },
});

So basically I need to get a reference to the FlexBox in my view but I'm getting undefined for the content variable. But if I change my view to an XMLview that looks like:

<core:View xmlns:core="sap.ui.core"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:html="http://www.w3.org/1999/xhtml"
    controllerName="views.Main"
    height="100%"
    xmlns="sap.m" >
    <Page
        id="home"
        showHeader="false" >
        <content>
            <FlexBox
                id="productContents"
                text="Products Lookup" ></FlexBox>
        </content>
    </Page>
</core:View>

The variable content gets the correct value.

I also tried this:

jQuery.sap.byId("productsContent");

but the object returned doesn't seem to be of type sap.ui.core.Control as it throws an error whenever I call addStyleClass to it.

Any clue to what could be wrong or any workaround?

Thanks in advance!

/Marc

[Former Member]

Ok, I managed to make it work by assigning the FlexBox I've created in my view to a local variable. So my view now looks like:

sap.ui.jsview("views.Main", {  
      getControllerName : function() {  
         return "views.Main";  
      },  
      createContent : function(oController) {  
          var page = new sap.m.Page({  
                    showHeader: false,  
          });  
          page.addStyleClass("page");  
          this.content = new sap.m.FlexBox("productsContent",{  
                    direction: "Column",  
          });  
          page.addContent(content);  
          return page;  
      },  
});  

I've changed line 14 from var content to this.content and to access it from my controller, I can simply call this.getView().content. view.byId() is still confusing if it will only work for XML-based UI.

[Former Member]

thank you so much for share... I lost too much time trying to make this work!