页面事件与动作说明|飞书低代码平台

页面事件与动作说明|飞书低代码平台

飞书低代码平台手册精选NaN-NaN-NaN
产品功能
在应用的搭建过程中,事件(Event)动作(Action)是能够实现交互的两个核心概念,它们通常紧密地联系在一起。
  • 例如:点击“查看详情”即可查看某行数据的具体明细。
事件:点击行时
动作:打开弹窗组件
loading...
  • 例如:点击“新增员工信息”,可以录入一条员工数据。
事件:点击按钮时
动作:打开创建员工信息的流程(有表单)
loading...
因此通俗来说,当用户点击了一个按钮、网页发生了某个变化、程序收到了一个网络请求等等……这些都是各种各样的事件。
而当一个事件发生时,可以回应这个事件,执行相应的操作或逻辑。这个回应的方式/逻辑,指的就是动作(Action),例如弹出一个对话框、执行一些流程或跳转到另一个页面……这些都是动作。
通过事件和动作的结合,我们可以在系统中,实现各种复杂的交互和功能,从而提供更好的用户体验。
能力概述
「飞书低代码平台」提供通用的事件动作能力,并支持通过无代码的方式编写动作流。目前应用页面的事件面板可以实现“串行动作流”和“并行动作流”。
  • 串行:事件被触发时,启动第一个动作,当第一个动作执行结束后,第二个动作启动再执行,以此类推,如果某个动作执行失败,后面的动作会直接终止,不会再继续执行
  • 案例演示:创建图书数据时,唤起一个弹窗提示注意事项,点击弹窗的「我已知晓」按钮,先关闭弹窗,然后执行创建图书的流程
说明
示例图
  • 拖拽一个弹窗,设置提示文字,并添加按钮
  • 拖拽一个数据表格,新增顶部按钮
  • 顶部按钮动作配置为调用组件方法
  • 组件选择弹窗
  • 方法选择打开
250px|700px|reset
  • 弹窗按钮设置动作
  • 先配置调用组件方法动作
  • 组件选择弹窗
  • 方法选择关闭
250px|700px|reset
  • 点击添加后续动作
250px|700px|reset
  • 配置第二个动作为执行流程
  • 创建「图书数据」
250px|700px|reset
  • 终端效果
250px|700px|reset
  • 并行:同一个事件被触发后,会同时执行已设置的多个动作,不同的动作之间相互不会影响
  • 案例演示:当执行一个时间较长的流程时,通过弹窗告诉用户流程执行时间较长,请耐心等待
说明
示例图
  • 拖拽一个弹窗,并设置提示文字
250px|700px|reset
  • 拖拽一个按钮,设置动作为执行流程
250px|700px|reset
  • 点击创建事件,选择点击时
250px|700px|reset
  • 同时动作选择调用组件方法
  • 组件选择弹窗
  • 方法选择打开
250px|700px|reset
事件说明
事件的定义:运行过程中发生的某些事情。
事件名称
说明
点击时
组件被点击时触发配置的动作。例如:某个按钮被点击时
切换页签时
导航类组件切换页面时触发配置的动作。例如:从标签页 A 切换到标签页 B。
页面加载完成时
页面加载完成时触发配置的动作。
页面即将关闭时
页面即将关闭时触发配置的动作。
值改变时
组件输入的值被改变时触发配置的动作。例如:数字输入框的值从 1 变为 2
失去焦点时
组件失去焦点时触发配置的动作。例如:输入类组件输入框出现光标
获取焦点时
组件获取焦点时触发配置的动作。例如:输入类组件输入框光标消失
点击行时
组件的行被点击时触发配置的动作。例如:点击了合同管理表格中的某行数据。
提交时
表单被提交时触发配置的动作。
点击指标时
图表的指标被点击时触发配置的动作。
动作说明
动作的定义:针对某个特定的事件做出的响应,以实现特定的功能或实现某些逻辑。
动作名称
说明
打开应用页面
可选择当前应用内的标准页面或具体的导航页:
250px|700px|reset
image.png
选择的页面如设置了入参变量,可以将当前页面的变量传递至对应页面:
250px|700px|reset
image.png
250px|700px|reset
image.png
可以设置页面的跳转方式:
  • 在当前页签打开(在当前的浏览器页签中打开,覆盖整个应用页面)
  • 在当前导航页打开(在当前页面中打开,仅覆盖当前导航页)
  • 在新页签中打开(在新的浏览器页签中打开)
250px|700px|reset
image.png
执行流程
选择启用的流程:
250px|700px|reset
image.png
打开链接
在链接输入框中输入 URL ,并可以绑定当前页面的变量:
250px|700px|reset
image.png
设置外面链接的打开方式,在当前页签打开(覆盖当前页面)、在新页签中打开(在新的页签中打开)
250px|700px|reset
image.png
展示用户飞书名片
关联记录:绑定一条用户类型的记录,例如当前用户、当前用户.上级、当前用户.更新人
250px|700px|reset
image.png
终端效果
250px|700px|reset
image.png
发起飞书聊天
飞书应用:选择一个已经上架得应用发起飞书聊天
250px|700px|reset
image.png
匹配字段:选择邮箱和手机号去和企业内的用户去匹配
变量:选择一个需要发起聊天的用户信息
执行 JS 动作
自定义 JS 动作,可以为表单、页面中的事件绑定「自定义 JS 代码」,当事件发生时,执行特定的自定义 JS 代码。比如:表单提交事件、页面加载事件、数据表格点击行事件等
需求:在数字表单项中,写入的数值超过 100后报错
代码实现如下:
//清除各组件的error提示
context.event.currentComponent.clearError();
//获取表单内容并进行判断
const value = context.event.currentTarget.value;
if (Number.isNaN(+value)) {
context.event.currentTarget.setError("请输入有效数字")
} else if (value && value > 100) {
context.event.currentTarget.setError("数字不能超过100!")
} else {
context.event.currentTarget.clearError();
}
效果图:
250px|700px|reset
image.png
调用组件方法
通过方法来实现组件 a 控制组件 b 的交互,例如点击一个按钮打开一个弹窗
选择组件:展示被拖拽至画布区且暴露方法的组件
250px|700px|reset
image.png
方法:选择组件对应的方法
250px|700px|reset
image.png
先进生产力和业务协同平台
联系我们立即试用

先进团队,先用飞书

欢迎联系我们,飞书效能顾问将为您提供全力支持
分享先进工作方式
输送行业最佳实践
全面协助组织提效
页面事件与动作说明|飞书低代码平台
先进生产力和业务协同平台
联系我们立即试用
联系我们立即试用