App配置中sw-entity-single-select组件邮件模板优化及自定义组件问询

我们开发了一款App，希望配置其邮件发送功能。App激活时会创建邮件模板类型及默认邮件模板，但需在配置中选择要发送的邮件模板。当前config.xml配置如下：

<component name="sw-entity-single-select">
    <name>customerMailTemplate</name>
    <entity>mail_template</entity>
    <label>Choose which mail template to be sent to customers on reservation</label>
    <labelProperty>description</labelProperty>
    <placeholder>Select mail template</placeholder>
</component>

现提出以下问题：

1. 由于部分邮件模板无description字段，能否像后台邮件模板概览那样，将“类型+描述”作为组件选项标签？
2. 希望筛选列表仅显示特定类型的邮件模板，该组件支持criteria对象，但xml仅能传递字符串，是否可行？
   另外，插件可创建自定义后台组件，但不清楚App如何实现。若上述需求无法满足，App能否创建自定义Vue组件？

问题1：实现“类型+描述”的选项标签 #

默认的sw-entity-single-select组件的labelProperty仅支持指定单个字段，无法直接实现拼接逻辑，但可以通过两种方式解决：

• 利用组件的itemText属性：该属性支持绑定自定义格式化函数，用于生成选项显示文本。在配置中添加<itemText>标签指定全局方法：

  <component name="sw-entity-single-select">
      <!-- 原有配置 -->
      <itemText>formatMailTemplateLabel</itemText>
  </component>
  

  然后在App的Administration源码中定义这个全局方法，实现类型与描述的拼接：

  // Resources/app/administration/src/main.js
  Shopware.Component.override('sw-entity-single-select', {
      methods: {
          formatMailTemplateLabel(item) {
              const typeName = item.mailTemplateType?.name || 'Unknown Type';
              const description = item.description || '';
              return description ? `${typeName}: ${description}` : typeName;
          }
      }
  });
  

• 自定义Vue组件：如果扩展默认组件受限，直接创建自定义组件可完全控制选项显示逻辑，是最灵活的方案。

问题2：通过XML传递筛选Criteria实现模板类型过滤 #

完全可行。sw-entity-single-select支持通过<criteria>标签传递JSON格式字符串作为筛选条件，XML会自动解析为Criteria对象。例如筛选特定mailTemplateTypeId的模板：

<component name="sw-entity-single-select">
    <!-- 原有配置 -->
    <criteria>{"filter": [{"type": "equals", "field": "mailTemplateTypeId", "value": "YOUR_TEMPLATE_TYPE_ID"}]}</criteria>
</component>

若需按类型名称筛选，可调整filter字段为mailTemplateType.name：

<criteria>{"filter": [{"type": "equals", "field": "mailTemplateType.name", "value": "Your Template Type Name"}]}</criteria>

注意保证JSON字符串格式正确，避免转义错误。

App中创建自定义Vue组件的方法 #

Shopware App完全支持创建自定义后台Vue组件，步骤如下：

1. 在App目录下创建组件文件：Resources/app/administration/src/components/custom-mail-template-select.vue，实现自定义选择器的标签格式化、筛选逻辑等功能。
2. 在manifest.xml中注册组件：

   <administration>
       <components>
           <component name="custom-mail-template-select" src="Resources/app/administration/src/components/custom-mail-template-select.vue"/>
       </components>
   </administration>
   

3. 在config.xml中直接使用自定义组件：

   <component name="custom-mail-template-select">
       <name>customerMailTemplate</name>
       <!-- 自定义组件所需的配置属性 -->
   </component>
   

通过这种方式可完全掌控组件行为，满足所有定制需求。

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