view.byId issues with JS-based UI

[Former Member]

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 · Accepted solution]

No worries Andreas and thanks for the clarification. Yeah having the View.byId working in both XMLView and JSView is much more better than to create a local variable for all the components that you want to get hold on to in the controller.

Cheers,

Marc

[AndreasKunz · Accepted solution]

Hi Marc,

hm, sorry to say, but I was wrong... I can't simply change the behavior:

Actually it is strongly recommended that IF you give static IDs in JSViews, you do not give them directly, but you also use the ID prefixing mechanism by calling View.createId("myId"). This guarantees ID uniqueness by adding the same prefix that the other View types add.

AND of course View.byId("myId") will then work properly.

var content = new sap.m.FlexBox(this.createId("productsContent"), { 

                    direction: "Column", 

});

Then you can use view.byId("productsContent");

So you do not need to create an extra variable. And the solution is available right now and also makes your View more robust.

I extended the documentation to make this clearer

https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/MVC.html -> support for unique IDs

(my change will only be visible with 1.14)

Regards

Andreas

[Former Member · Accepted solution]

Cool! I wasn't aware that there's a View.createId() function. That's a lot better and thanks for adding it into the documentation.

[former_member47571 · Accepted solution]

I just came upon this, but it has been such a help for both the code fix options and the proper reasoning.  It was such a mystery why this byId() would work for XML Views but not for JS Views.  Thanks very much!