如何在Sap Hybris中配置实体的ReferenceSearch列表视图并添加带表格提示的信息图标

1. 新增自定义图标列 #

• 打开对应实体的解决方案视图编辑器，定位到需要修改的ReferenceSearch ListView
• 新增一列自定义模板列，列宽设置为28-32px适配图标大小，无需设置列标题
• 列的展示内容配置为平台内置info图标，对应代码为 <span class="msicon msicon--info tooltip-trigger" style="cursor: pointer;"></span>

2. 绑定悬停提示事件 #

• 为上述图标元素绑定mouseenter、mouseleave事件，同时添加focus、blur事件兼容键盘无障碍访问
• 调用平台原生Tooltip组件挂载到图标元素上，设置触发规则为悬停触发，展示延迟300ms，避免误触发

3. 配置提示框内表格内容 #

• 在Tooltip的content参数中插入自定义HTML表格，示例代码如下，你可以按需修改行列数量和绑定字段：

<table style="border-collapse: collapse; width: 240px; font-size: 12px;">
  <tr style="border-bottom: 1px solid #eaecef;">
    <th style="text-align: left; padding: 6px; width: 40%;">字段标识</th>
    <th style="text-align: left; padding: 6px;">字段内容</th>
  </tr>
  <tr style="border-bottom: 1px solid #eaecef;">
    <td style="padding: 6px;">实体名称</td>
    <td style="padding: 6px;">{{rowData.entityDisplayName}}</td>
  </tr>
  <tr style="border-bottom: 1px solid #eaecef;">
    <td style="padding: 6px;">创建人</td>
    <td style="padding: 6px;">{{rowData.createdByName}}</td>
  </tr>
  <tr>
    <td style="padding: 6px;">最近修改时间</td>
    <td style="padding: 6px;">{{rowData.modifiedOn}}</td>
  </tr>
</table>

• 若平台限制直接插入HTML，可使用富文本编辑器的表格功能录入对应内容，再绑定行数据字段即可。

4. 发布并验证效果 #

• 保存所有视图配置后发布自定义项
• 进入ReferenceSearch ListView页面，悬停info图标确认提示框正常弹出，表格内容渲染对齐正常
• 测试不同分辨率下的展示效果，调整提示框最大宽度避免内容溢出。

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