跳到主要内容

嵌入字段

1 功能简介​

1.1 功能介绍​

嵌入字段功能允许用户将第三方页面无缝集成到轻流应用中，实现页面内数据交互。这一功能支持表单字段数据传入和URL定义与字段传参，为自定义页面升级提供支持，极大提升业务应用前端的开放程度和能力。

1.2 使用场景​

  • 如果您是一家注重环保的物流企业，希望实时监控并展示每日的物流运输动态以及温室气体排放情况，可以通过嵌入动态数据图表来实现。这些图表可以直观地展示物流活动的实时数据，包括货物流转、运输路径、以及与运输相关的碳排放量。
  • 如果您是一家需要频繁处理出差申请的公司，在设立员工出差申请表单时，可以插入嵌入字段来自动根据输入的目的地信息显示地图定位和导航指引。
  • 在活动或会议的报名表单中，嵌入活动亮点介绍、往届活动的精彩瞬间视频或轮播图，这种多媒体内容展示可以增加活动的吸引力，鼓励更多人参与。

2 设置步骤​

2.1 功能入口​

首先点击“表单编辑”，选择“高级字段”，点击“嵌入字段”选项即可。

1.gif

用户可在「轻商城-拓展插件」中下载「嵌入字段」插件进行配置。注意，此功能无需付费，企业版或专有轻流可用。

image.png

2.2 功能设置步骤​

2.2.1 插入链接方式​

直接点击高级字段中的「嵌入字段」，即可插入字段至表单中

1.gif

方式二

通过拖拽的方式，拖拽「嵌入字段」字段至表单中，即可完成操作

2.gif

2.2.2 标题​

可以用于区分不同的字段，便于信息的填写。点击已添加的「嵌入字段」字段，即可设置标题内容

1.gif

2.2.3 提示​

可以用于引导填写者填写内容。点击已添加的「嵌入字段」字段，即可设置提示内容

2.gif

2.2.4 在表单中隐藏​

设置后「嵌入字段」在表单中将对用户不可见，但数据仍然可以被提交或处理。

3.gif

2.2.5 最大高度​

此选项允许您为字段设定一个最大高度值，以保持表单布局的整洁和视觉效果的统一。

6.gif

2.2.6 URL​

您可以输入第三方系统API的资源地址，支持将应用中的字段作为链接参数传递给第三方系统页面使用，实现在表单中集成自定义元素，进行个性化的内容展示。为了确保数据传输的安全，URL仅支持http和https协议。

情况一：URL为固定网址，无需将应用中的字段作为链接参数传递给第三方系统页面使用

image.png

情况二：URL需要将应用中的字段作为链接参数传递给第三方系统页面使用

image.png

此时客户方使用的示例代码如下：

// 解析当前页面的 URL
const urlObj = new URL(location.href);
// 从 URL 的查询参数中获取 `age` 字段的值
const age = urlObj.searchParams.get("age");

// 假设页面中用户创建了一个用于输入年龄的 input 输入框
const ageInput = document.getElementById("age");
// 将从 URL 查询参数中获取到的 `age` 值填充到该 input 输入框中
ageInput.value = age;

2.2.7 JSON配置​

向嵌入页面传入字段值，支持插入字段。

image.png

此时客户方使用的示例代码如下：

// 监听 message 事件，以便处理从窗口发送的消息
window.addEventListener("message", (e) => {
  // 从事件返回中解构出需要的字段，这里假设发送的消息包含 `name` 和 `address`
  const { name, address } = e.data;

  // 获取页面中定义的元素，这里假设页面中有两个输入框，分别用于显示名称和地址
  const nameInput = document.getElementById("name");
  const addressInput = document.getElementById("address");
  // 将从消息中获取的名称和地址值分别赋给对应的输入框
  nameInput.value = name;
  addressInput.value = address;
});

示例图如下：

image.png

2.2.8 允许授权登录信息​

授权第三方链接获取轻流用户登录信息（默认关闭）。

7.gif

2.3 页面表现​

2.3.1 配置页​

新建/编辑状态下不支持查看。

image.png

2.3.2 填写页/详情页​

正常显示嵌入页面。

image.png

2.3.3 数据管理页/详情页​

嵌入字段不支持查看，折叠为「点击查看详情」

image.png

3 注意事项​

  • 移动端展示由页面开发者负责适配调整。
  • ​该功能仅支持公有云企业版和专有轻流和私有化用户开放使用。
  • 企业版到期后，已发布的应用嵌入字段使用不受影响，但新建的应用配置嵌入字段受版本限制。

image.png

  • 功能限制：支持逻辑表单的显隐控制，不支持筛选、搜索、数据管理、数据关联、引用、Q-Linker、Q-Robot、Q-Source、模版（短信、邮件）、报表、自定义提醒、提交重计算等功能。
  • 不支持插入字段：段落、描述文字、表格字段（子字段同样不支持）、富文本、Q-Linker、文字识别、代码块。