Question Re: view.byId issues with JS-based UI in Technology Q&A

view.byId issues with JS-based UI

Former Member — Fri, 14 Jun 2013 06:31:20 GMT

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

Re: view.byId issues with JS-based UI

Former Member — Fri, 14 Jun 2013 07:16:41 GMT

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.

Re: view.byId issues with JS-based UI

AndreasKunz — Fri, 14 Jun 2013 12:12:19 GMT

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

Re: view.byId issues with JS-based UI

Former Member — Fri, 14 Jun 2013 13:58:30 GMT

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

Re: view.byId issues with JS-based UI

AndreasKunz — Mon, 17 Jun 2013 09:30:55 GMT

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

Re: view.byId issues with JS-based UI

Former Member — Tue, 18 Jun 2013 04:52:57 GMT

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.

Re: view.byId issues with JS-based UI

Former Member — Sun, 31 Aug 2014 12:05:33 GMT

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

Re: view.byId issues with JS-based UI

former_member47571 — Wed, 15 Apr 2015 21:25:42 GMT

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!

Re: view.byId issues with JS-based UI

Former Member — Fri, 27 Nov 2015 06:35:23 GMT

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