Great question! When using componentName instead of viewName in your chip definition, the syntax follows the UI5 component namespace convention—it’s simpler than the view path format because you don’t include file extensions or extra prefixes. Here’s how to set it up correctly:

1. Correct componentName Syntax in chipdefinition.xml #

Under the sapui5 section of your chip implementation, specify the full dot-separated namespace of your component (excluding the .component.js suffix). For example:

<chip>
  <implementation>
    <sapui5>
      <!-- Replace with your component's namespace -->
      <componentName>tests.sample.MyComponent</componentName>
      <!-- Optional: Pass startup parameters to the component -->
      <componentProperties>
        <property name="tileConfig" value='{"key": "value"}' />
      </componentProperties>
    </sapui5>
  </implementation>
  <!-- Add chip metadata (title, description, icon, etc.) here -->
</chip>

Key Details: #

• If your component lives at tests/sample/MyComponent/component.js, the componentName value is tests.sample.MyComponent—no file extension, no view. prefix, just the namespace matching your folder structure.
• UI5 automatically resolves this namespace to the corresponding component.js file, unlike view paths which require explicit file extensions.

2. Required Component Structure for Custom Resources #

To load custom i18n or CSS, your component must follow the standard UI5 structure with a manifest.json—this is where you declare all dependent resources. Here’s a typical setup:

tests/
└── sample/
    └── MyComponent/
        ├── component.js
        ├── manifest.json
        ├── i18n/
        │   └── i18n.properties
        ├── css/
        │   └── custom.css
        └── view/
            └── TileContent.view.xml

Example manifest.json (for i18n and CSS): #

{
  "_version": "1.12.0",
  "sap.app": {
    "id": "tests.sample.MyComponent",
    "type": "component",
    "i18n": "i18n/i18n.properties"
  },
  "sap.ui5": {
    "rootView": {
      "viewName": "tests.sample.MyComponent.view.TileContent",
      "type": "XML"
    },
    "resources": {
      "css": [
        {
          "uri": "css/custom.css"
        }
      ]
    },
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "tests.sample.MyComponent.i18n.i18n"
        }
      }
    }
  }
}

Example component.js: #

sap.ui.define([
  "sap/ui/core/UIComponent"
], function(UIComponent) {
  "use strict";

  return UIComponent.extend("tests.sample.MyComponent", {
    metadata: {
      manifest: "json"
    },

    init: function() {
      // Call base component initialization
      UIComponent.prototype.init.apply(this, arguments);
      // Add custom initialization logic here
    }
  });
});

3. Troubleshooting Tips #

• Namespace Mismatch: Ensure componentName in the chip definition exactly matches the id in your component’s manifest.json and the namespace in component.js.
• Deployment Check: Verify your component is deployed to the server with the correct folder structure—UI5 needs to resolve the namespace to the actual files.
• Chip Registration: Confirm your chip definition is properly registered in the Fiori Launchpad (via Content Manager or backend roles) to ensure it’s available for tiles.

This setup lets your tile load the component, which pulls in your custom i18n and CSS via the manifest—perfect for building reusable, self-contained tile logic!

内容的提问来源于stack exchange，提问作者jimboh