Skip to main content

自定义HTML

自定义HTML支持在页面中内嵌 HTML 代码，以更灵活的方式展示自定义内容，也支持用 JavaScript 脚本动态生成 HTML。

概述​

将「自定义HTML」拖入画布后，在属性抽屉中选择渲染模式并编辑代码：

模式说明适用场景
HTML模式直接编写 HTML 代码，支持占位符替换结构固定的展示内容
JavaScript模式编写 JavaScript 函数返回 HTML 字符串需要条件判断、动态生成的场景

可选择一个「组件数据源」类型的平台接口作为数据来源，接口返回值可在代码中通过占位符或脚本参数使用。

HTML模式​

在 HTML 模式下，可在 HTML 中使用 {占位符} 语法插入动态数据：

  • {Response.xx}：Response 表示组件数据源接口的返回值对象。
  • {Env.xx}：Env 表示系统环境变量（如当前详情页数据），例如 {Env.createdby.Text}、{Env.text}。
  • 支持多层路径访问，如 {Response.data.0.Fields.text.Text}。

示例：

<div>
    <span>总数：{Response.total}</span>
    <span>创建人：{Env.createdby.Text}</span>
</div>
限制

HTML 模式不支持 <script>、onclick 等 on* 事件、javascript: 等 JavaScript 执行入口；不支持独立定义样式，样式需内联到元素上。

JavaScript模式​

在 JavaScript 模式下，需要编写一个函数返回 HTML 字符串，参数 api 为内置辅助对象（当前为空对象，后续扩展），data 为数据源接口返回的数据：

function renderHtml(api, data) {
    const name = data?.name || '未命名';

    return `<div><span>名称：${name}</span></div>`;
}
语法区别

JavaScript 模式使用标准的模板字符串语法 ${表达式}，与 HTML 模式的 {前缀.路径} 占位符不同，请勿混淆。

预览限制

JavaScript 模式暂不支持编辑器内预览，需保存后在页面中查看实际渲染效果。

使用建议​

  1. 系统内置的数据详情、表单等组件 UI 较固定，需要定制化渲染时可用本组件自行绘制界面。
  2. 需要嵌入完整前端应用、支持路由与交互时，改用 微组件。

下一步​

属性明细​

以下内容面向技术实现与 AI 检索。所有 meta 键值均以字符串形式存储。

组件属性（meta）​

属性名类型含义取值/存储值
RenderModestring渲染模式HTML（默认） / JavaScript
ScriptstringHTML 或 JavaScript 代码代码文本，默认空；HTML 模式支持 {Response.xx}、{Env.xx} 占位符
MetaInterfaceIdstring(GUID)组件数据源接口 ID平台接口（标签为组件数据源）ID，默认空

GetSidebarItemMeta() 默认写入 Script（空字符串）与 RenderMode（HTML），MetaInterfaceId 在用户选择数据源后写入。渲染模式切换时会以对应模式的默认模板重置 Script。uid 固定为 01f7cc2a-3a2a-4278-bdda-ab8a6407ea9d。

相关约定​

项说明
占位符前缀HTML 模式下接口返回值以 Response 为前缀
环境变量前缀系统环境变量以 Env 为前缀
脚本参数JavaScript 模式下函数签名为 (api, data)

存储示例​

组件通常位于列（Column）内，以下为嵌套在行（Row）→ 列（Column）中的完整存储结构：

{
  "id": "a7b8c9d0-0001-4a2b-8c3d-1234567890ab",
  "uid": "5a0f3c1e-9b8d-4f6a-9c2e-7d1b4a8e6f3d",
  "dragType": "Row",
  "originalType": "Row",
  "widgetType": "Row",
  "widgetTypeName": "基础容器",
  "meta": {
    "ColumnSpace": "5"
  },
  "children": [
    {
      "id": "a7b8c9d0-0002-4a2b-8c3d-1234567890ab",
      "uid": "7b9a905e-83d4-452b-83c8-694a3e0935e3",
      "dragType": "Column",
      "originalType": "Column",
      "widgetType": "Column",
      "widgetTypeName": "布局列组件",
      "meta": {
        "LayoutType": "vertical",
        "Align": "default",
        "ItemSpace": "5"
      },
      "children": [
        {
          "id": "a7b8c9d0-0003-4a2b-8c3d-1234567890ab",
          "uid": "01f7cc2a-3a2a-4278-bdda-ab8a6407ea9d",
          "dragType": "Widget",
          "originalType": "Widget",
          "widgetType": "Html",
          "widgetTypeName": "自定义HTML",
          "meta": {
            "RenderMode": "HTML",
            "Script": "<div><span>总数：{Response.total}</span></div>",
            "MetaInterfaceId": "a7b8c9d0-e1f2-4a3b-4c5d-6e7f80910213"
          },
          "children": []
        }
      ]
    }
  ]
}