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

[AndreasKunz]

Hi Marc,

thanks for finding this issue!

Explanation: there is a difference between declarative Views (XMLView, JSView,...) and the programmatic JSView:

in the former UI5 does create the controls and prefixes their IDs with the View ID to guarantee uniqueness. In JSViews you create the controls and give the IDs and have to take care of uniqueness yourself.

Hence, View.byId() was introduced so one does not need to fiddle with ID prefixes.

However, JSViews inherit this method and it still tries to add the prefix, which results in wrong IDs. You could just directly call

sap.ui.getCore().byId()

instead, which should work.

But of course View.byId() should work as well, so we'll override this method and remove the prefix logic there.

Thanks again!

Andreas