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!

[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

[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

[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!