cPanel Question posted in
The official documentation can be seen here.

How do I change the name of 'component0' in OpenUi5/SapUI5? – CPanel

I’ve just jumped in to OpenUI5, and had a problem where I couldn’t get navigation targets to open up in aggregations within sub views. I found an answer on Stack Overflow that said that I needed to specifically name each View in the parent hierarchy to stabilise the name – this mostly worked, and I’ve been able to get my routing and targets to function.

My problem now is that the ID prefix of my item is __component0. I cannot find any way to change the name of this part, so really I’m not fully in control of my IDs.

I’ve tried changing the sId of the component before and after initialisation, but then the app doesn’t function. I’ve also set both sap.app.componentName and sap.ui5.componentId, and neither are used. It appears that component0 is constructed by getting the type name of the controller class, but that has to be called Component.js.

Does anybody know how to change this value, or otherwise derive a control ID in the DOM that is fully defined in code?

In response to boghyon, I don’t doubt that setting the ID via the factory function works, I don’t know how to apply that ID value or factory function to the style of code that I have. This style comes from the SAP starter template on GitHub. Simply specifying id: "mycomponentname" in the extend object does not work.

So how would I go about refactoring what I have to the factory function format?

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/Device",
    "com/uk/ia/air/cpanel/model/models"
], function(UIComponent, Device, models) {
    "use strict";

    return UIComponent.extend("com.uk.ia.air.cpanel.Component", {
        metadata: {
            manifest: "json"
        },

        /**
         * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
         * @public
         * @override
         */
        init: function() {
            // call the base component's init function
            UIComponent.prototype.init.apply(this, arguments);

            // set the device model
            this.setModel(models.createDeviceModel(), "device");

            // create the views based on the url/hash
            this.getRouter().initialize();
        }
    });
});
Tags:

2

Answers


  1. 0

    The ID of a component can be manually assigned when instantiating the component

    • Either with sap/ui/core/Component#createAPI
    • Or with new ComponentContainer(/*...*/)API

    With ComponentContainer

    E.g. in index.html when bootstrapping:

    <head>
  <!-- ... -->
  <script id="sap-ui-bootstrap" src="https://ui5.sap.com/resources/sap-ui-core.js"
    data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
    data-sap-ui-async="true"
    data-sap-ui-resourceroots='{"demo": './'}'
    ...
  ></script>
</head>
<body id="content" class="sapUiBody">
  <div data-sap-ui-component
    data-id="myComponentContainer"
    data-name="demo"
    data-height="100%"
    data-settings='{"id": "myComponent"}'
  ></div>
</body>

    The module, that can create a ComponentContainer in index.html, is sap/ui/core/ComponentSupport. Once it’s loaded, it will look for the HTML element that has the attribute data-sap-ui-component. That HTML element should provide constructor settings for the ComponentContainer which provides settings for the component constructor same as in Component.create.

    With Component.create()

    Component.create({ // Component required from "sap/ui/core/Component"
  id: "myComponent", // or this.getView().createId("myComponent") if applicable
  name: "demo",
  // ...
});

    For more information, see Stable IDs: All You Need to Know.

    Additionally, every view must have an ID as well so that the given component ID is included in the full ID of an element. Otherwise, the component ID won’t be available even if we defined it in the component factory function. View IDs can be set via the property id and viewId respectively in the application descriptor (manifest.json):

    • sap.ui5 / rootView /id
    • sap.ui5 / routing / targets /targetName/viewId

    Example

    Login or Signup to reply.
  2. 0

    You can change the autogenerated ID of the extended component if you override the constructor of the UIComponent. With your code it should look like this:

    return UIComponent.extend("com.uk.ia.air.cpanel.Component", {

    constructor: function(sId, mSettings) {
        UIComponent.call(this, "MyComponentId", mSettings);
    },

    metadata: {
        manifest: "json"
    },

    /**
     * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
     * @public
     * @override
     */
    init: function() {
        // call the base component's init function
        UIComponent.prototype.init.apply(this, arguments);

        // set the device model
        this.setModel(models.createDeviceModel(), "device");

        // create the views based on the url/hash
        this.getRouter().initialize();
    }
  });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search