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]

Very nice explanation by Andreas.

The point is in JS view if you are using this.createId("ID") then it will create the id of the element with prefixes of view like jsview*--ID. This would be unique in the corresponding view.So when you are going to use the function this.byId("ID"), where this refers to your view, will always search for the element with "ID" in the same view.

Regards,

Rabin