title: How do I change the name of 'component0' in OpenUi5/SapUI5?
body: <p>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.</p>
  
  <p>My problem now is that the ID prefix of my item is <code>__component0</code>. I cannot find any way to change the name of this part, so really I'm not fully in control of my IDs.</p>
  
  <p>I've tried changing the <code>sId</code> 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 <code>component0</code> is constructed by getting the type name of the controller class, but that has to be called <code>Component.js</code>.</p>
  
  <p>Does anybody know how to change this value, or otherwise derive a control ID in the DOM that is fully defined in code?</p>
  
  <p>In response to <a href="https://stackoverflow.com/a/44757055/5846045">boghyon</a>, 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 <code>id: "mycomponentname"</code> in the extend object does not work.</p>
  
  <p>So how would I go about refactoring what I have to the factory function format?</p>
  
  <pre><code>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();
          }
      });
  });
  </code></pre>