Reusable view in UI5

[Former Member]

Hi All,

I am trying to use one view as a reusable/subview in different views but whenever i use this view, it gives me duplicate text field etc error. I am wondering if anyone knows about it..

Use Case is :

I create one common view and add all the elements in that View Called skillsView

1. sap.ui.jsview("persistence_with_jpa_ui.skillsView, {

     getControllerName : function() {

         return "persistence_with_jpa_ui.skillsView";

      },

     createContent : function(oController) {

     // here i add all the controls

var name = new sap.ui.commons.Link("nameLabel", {

                      text: "Name",

                      width: "200px",

                      enabled :false,

            });

Now i am using this view as a reuse/subview view in other views like

   2     Create Another view called ProfileView view and inside view i reuse skillsView

     sap.ui.jsview("persistence_with_jpa_ui.ProfileView", {

      getControllerName : function() {

         return "persistence_with_jpa_ui.ProfileView ";

      },

createContent : function(oController) {

      // now i am calling  skillsView here

                var view = sap.ui.view({

                                        id : "createContentView",

                                        viewName : "persistence_with_jpa_ui.skillsView",  //calling skills view as a subview at this point

                                        type : sap.ui.core.mvc.ViewType.JS

                              });

                              return view;

    }

});

it works fine in this view and display all the controls

3) Now, i have created another view called Setting view and call the skills view inside

sap.ui.jsview("persistence_with_jpa_ui.SettingView", {

      getControllerName : function() {

         return "persistence_with_jpa_ui.SettingView";

      },

createContent : function(oController) {

      // now i am calling  skillsView here

          var view = sap.ui.view({

                   id : "createContentView",

                   viewName : "persistence_with_jpa_ui.skillsView",    //calling skills view as a subview at this point

                   type : sap.ui.core.mvc.ViewType.JS

               });

               return view;

    }

});

But at this point,, it gives me duplicate element "nameLabel" error on js console?

Any idea?

[AndreasKunz · Accepted solution]

Hi Zaghman,

the problem is the ID of the Link created in your View definition: by giving a static, hardcoded ID, this Link would have the same ID in every copy of the View. Thus, the Link ID would not be unique anymore.

In the declarative View types (XMLView, HTMLView,...) UI5 automatically takes care of adding the View ID as prefix to make the content IDs unique.

But in JSViews you are using the constructors directly, so this cannot be done automatically.

So the solution is to use the "View.createId(...)" method to create dynamic IDs:

var name = new sap.ui.commons.Link(this.createId("nameLabel"), {

    text: "Name",

    width: "200px",

    enabled :false,

});

And when you want to access this element from the controller by its ID, you also have to take care of this by using this.byId() instead of sap.ui.getCore().byId(). But this is equal in all View types.

This whole topic is documented here: https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/MVC.html

But the control creation in the JSView case is admittedly not pointed out very clearly. We'll improve that.

Regards

Andreas

[Former Member · Accepted solution]

Thanks your mentor . great . issue sorted

[Former Member]

Changed id but still getting same duplicate element ID error....

[Former Member]

try changing the id value in setting view

id : "createContentView", -> id : "someThingelse"