ToolJet QR Scanner 组件完整指南相机扫码、On detect 事件与 lastDetectedValue 数据绑定实战【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJetQR Scanner二维码扫描器是 ToolJet 应用构建器中为数不多的直接调用设备硬件的交互组件它利用设备摄像头实时扫描 QR 码并把扫描结果即二维码中携带的文本/URL/JSON 等数据保存在组件暴露变量中供应用后续逻辑与查询使用。本文以 ToolJet 2.50.0-LTS 版本文档为骨架结合frontend/src/AppBuilder/Widgets/QrScanner/下的真实源码实现系统讲解该组件的添加方式、On detect 事件、暴露变量、响应式与样式配置以及 localhost/https 环境限制等实战要点帮助你完整掌握扫码 → 触发事件 → 读取数据这条链路。组件概览与典型应用场景QR Scanner 的核心能力在官方文档中被一句话概括Scan QR codes using device camera and hold the data they carry使用设备摄像头扫描二维码并保存其所携带的数据。在 组件注册配置 中它的定义与描述也完全一致name: QrScanner, displayName: QR Scanner, description: Scan QR codes and hold its data,从源码结构看该组件是典型的轻逻辑、重集成型组件——组件本体QrScanner.jsx仅约 27 行核心逻辑全部委托给底层扫码库react-qr-reader版本^2.2.1见 frontend/package.json。这意味着你不需要关心摄像头帧捕获、QR 码解码算法等底层细节组件会持续监听摄像头画面一旦识别到有效的 QR 码就立即回调。典型的应用场景包括设备/资产巡检扫描设备上的二维码标签将序列号写入表单字段或数据库查询条件会议签到 / 门禁验证扫描票据二维码触发查询校验接口并展示用户信息物流与库存管理扫描包裹或货架二维码联动更新 ToolJet Database 或外部数据源记录移动端 H5 应用将扫码作为移动端工作流的第一步通过lastDetectedValue将数据透传给后续查询。在应用中添加 QR Scanner 组件在 ToolJet 应用构建器中从左侧组件面板找到QR Scanner并拖拽到画布即可完成添加。添加后默认的组件尺寸为宽 10 列、高 300px见 qrscanner.js 中的defaultSize配置画布上会实时出现相机取景画面对准任意 QR 码即可立即测试扫描。组件在画布上被命名后会以qrscanner1、qrscanner2这类默认标识出现在 Cypress 测试的组件清单中同样可看到 qrscanner1、qrscanner2 的默认命名模式后续所有事件与变量引用都要基于这个组件 ID 进行。⚠️已知问题来自官方文档在 iOS 设备上第三方浏览器的摄像头访问受到系统限制因此在 iOS 上建议使用 Safari 浏览器来运行包含 QR Scanner 的应用。事件EventsOn detectQR Scanner 是事件驱动型组件它只暴露一个事件事件说明On detect组件成功扫描到 QR 码时触发在事件配置面板中为On detect添加处理器Handler后可以选择运行查询Run Query、触发其他组件控制Control Component等动作。事件触发的完整链路可以在 QrScanner.jsx 的handleScan回调中看到const handleScan async (data) { if (data) { await fireEvent(onDetect); await setExposedVariable(lastDetectedValue, data); } };实现要点只有扫描到非空数据if (data)守卫时才会触发事件避免摄像头画面中没有 QR 码时反复空触发事件触发与数据写入通过await串行执行先触发onDetect再把解码结果写入暴露变量保证事件处理器执行时数据已就绪底层库react-qr-reader的onScan会持续回调因此每次成功识别到新码都会触发一次 On detect——如果你希望在扫码后自动停止可以结合其他组件的 Disable 状态或工作流逻辑进行控制。若需要了解事件处理器中可用的全部Actions运行查询、控制组件、导航等可查阅官方 Actions 参考文档。关于组件级 ActionCSAQR Scanner目前没有实现任何组件专属 ActionComponent-Specific Actions, CSA即没有scan()、stop()这类可编程控制方法。这一点在 组件注册配置 中也有体现properties: {}为空对象没有任何可供外部调用的动作定义。因此无法通过 JS 表达式或按钮事件来命令式地启动/停止扫码——组件添加后即持续工作只能通过禁用Disable样式开关来使其失效见下文样式小节。暴露变量Exposed VariableslastDetectedValueQR Scanner 暴露了一个变量用于保存最近一次成功扫描到的数据变量说明访问方式lastDetectedValue组件最近一次成功扫描到的 QR 码数据通过 JS 表达式动态访问例如{{components.qrscanner1.lastDetectedValue}}该变量的初始值在 组件配置 中定义为空字符串exposedVariables: { lastDetectedValue: , },实战用法示例在文本组件中显示{{components.qrscanner1.lastDetectedValue}}作为查询参数在查询编辑器中将参数值设为{{components.qrscanner1.lastDetectedValue}}即可用扫码结果去查询数据库或调用外部 API条件渲染结合条件表达式如{{components.qrscanner1.lastDetectedValue ! }}在扫码成功后显示后续表单步骤写入数据源在表单提交查询中引用该变量把扫码结果作为一条记录写入 ToolJet Database。需要注意该变量在组件加载时为仅在 On detect 事件触发后才会被更新为真实扫码内容。因此在引用时建议对空值做兜底处理避免查询被空字符串参数污染。通用属性GeneralTooltip在General手风琴面板下QR Scanner 与大多数 ToolJet 组件一样支持Tooltip配置在 Tooltip 输入框中以字符串格式填入提示文案运行时用户将鼠标悬停在组件上就会显示这段提示文字。Tooltip 常用于补充说明组件的用途例如请对准设备标签上的二维码或扫码后自动查询库存。设备响应式配置DevicesQR Scanner 支持针对不同终端形态控制显隐属性说明期望值Show on desktop控制组件在桌面视图中是否可见通过开关切换或点击fx动态配置逻辑表达式Show on mobile控制组件在移动视图中是否可见通过开关切换或点击fx动态配置逻辑表达式在 组件默认定义 中这两个属性的默认值均为{{true}}即桌面与移动端默认都显示others: { showOnDesktop: { value: {{true}} }, showOnMobile: { value: {{true}} }, },例如若希望扫码功能只在移动端 H5 场景下出现可将 Show on desktop 通过 fx 设为{{false}}而移动端保持开启。样式配置StylesQR Scanner 提供两项基础样式控制样式说明默认值Visibility控制组件的可见性可点击fx编程式修改。若设为{{false}}应用部署后组件将不可见{{true}}Disable默认关闭开启后组件被锁定、不可用。可点击fx编程式设置若设为{{true}}组件被锁定且失效{{false}}这些默认值同样来自 组件配置 中的styles定义且两个样式字段都声明了布尔类型的校验 schemastyles: { visibility: { type: toggle, validation: { schema: { type: boolean }, defaultValue: true } }, disabledState: { type: toggle, validation: { schema: { type: boolean }, defaultValue: false } }, },从 QrScanner.jsx 的实现可以看到这两个样式的运行时效果const { visibility, disabledState, boxShadow } styles; // ... div>div classNamemodal-body Please make sure a camera is available on your device. Try closing your browser and opening it again, ... /div因此当你发现扫码无画面时请按顺序排查应用是否运行在 localhost/https → 浏览器是否授予了摄像头权限 → 设备是否存在可用摄像头。结语QR Scanner 是 ToolJet 中接入物理世界的一个小而实用的入口。通过本文你应该已经掌握添加组件并理解其持续监听、命中即触发的工作模型在On detect事件中挂接查询与动作通过{{components.qrscanner1.lastDetectedValue}}在任意 JS 表达式、查询参数或组件属性中读取扫码结果配合 Devices 与 Styles 面板控制它在桌面/移动端的显隐与可用状态以及牢记 localhost/https、iOS Safari 这两个运行前提。动手在画布上拖一个 QR Scanner用手机对着屏幕上的二维码扫一扫就能立即验证扫码 → 事件 → 数据的完整闭环。【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 ToolJet QR Scanner 组件完整指南：相机扫码、On detect 事件与 lastDetectedValue 数据绑定实战
ToolJet QR Scanner 组件完整指南相机扫码、On detect 事件与 lastDetectedValue 数据绑定实战【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJetQR Scanner二维码扫描器是 ToolJet 应用构建器中为数不多的直接调用设备硬件的交互组件它利用设备摄像头实时扫描 QR 码并把扫描结果即二维码中携带的文本/URL/JSON 等数据保存在组件暴露变量中供应用后续逻辑与查询使用。本文以 ToolJet 2.50.0-LTS 版本文档为骨架结合frontend/src/AppBuilder/Widgets/QrScanner/下的真实源码实现系统讲解该组件的添加方式、On detect 事件、暴露变量、响应式与样式配置以及 localhost/https 环境限制等实战要点帮助你完整掌握扫码 → 触发事件 → 读取数据这条链路。组件概览与典型应用场景QR Scanner 的核心能力在官方文档中被一句话概括Scan QR codes using device camera and hold the data they carry使用设备摄像头扫描二维码并保存其所携带的数据。在 组件注册配置 中它的定义与描述也完全一致name: QrScanner, displayName: QR Scanner, description: Scan QR codes and hold its data,从源码结构看该组件是典型的轻逻辑、重集成型组件——组件本体QrScanner.jsx仅约 27 行核心逻辑全部委托给底层扫码库react-qr-reader版本^2.2.1见 frontend/package.json。这意味着你不需要关心摄像头帧捕获、QR 码解码算法等底层细节组件会持续监听摄像头画面一旦识别到有效的 QR 码就立即回调。典型的应用场景包括设备/资产巡检扫描设备上的二维码标签将序列号写入表单字段或数据库查询条件会议签到 / 门禁验证扫描票据二维码触发查询校验接口并展示用户信息物流与库存管理扫描包裹或货架二维码联动更新 ToolJet Database 或外部数据源记录移动端 H5 应用将扫码作为移动端工作流的第一步通过lastDetectedValue将数据透传给后续查询。在应用中添加 QR Scanner 组件在 ToolJet 应用构建器中从左侧组件面板找到QR Scanner并拖拽到画布即可完成添加。添加后默认的组件尺寸为宽 10 列、高 300px见 qrscanner.js 中的defaultSize配置画布上会实时出现相机取景画面对准任意 QR 码即可立即测试扫描。组件在画布上被命名后会以qrscanner1、qrscanner2这类默认标识出现在 Cypress 测试的组件清单中同样可看到 qrscanner1、qrscanner2 的默认命名模式后续所有事件与变量引用都要基于这个组件 ID 进行。⚠️已知问题来自官方文档在 iOS 设备上第三方浏览器的摄像头访问受到系统限制因此在 iOS 上建议使用 Safari 浏览器来运行包含 QR Scanner 的应用。事件EventsOn detectQR Scanner 是事件驱动型组件它只暴露一个事件事件说明On detect组件成功扫描到 QR 码时触发在事件配置面板中为On detect添加处理器Handler后可以选择运行查询Run Query、触发其他组件控制Control Component等动作。事件触发的完整链路可以在 QrScanner.jsx 的handleScan回调中看到const handleScan async (data) { if (data) { await fireEvent(onDetect); await setExposedVariable(lastDetectedValue, data); } };实现要点只有扫描到非空数据if (data)守卫时才会触发事件避免摄像头画面中没有 QR 码时反复空触发事件触发与数据写入通过await串行执行先触发onDetect再把解码结果写入暴露变量保证事件处理器执行时数据已就绪底层库react-qr-reader的onScan会持续回调因此每次成功识别到新码都会触发一次 On detect——如果你希望在扫码后自动停止可以结合其他组件的 Disable 状态或工作流逻辑进行控制。若需要了解事件处理器中可用的全部Actions运行查询、控制组件、导航等可查阅官方 Actions 参考文档。关于组件级 ActionCSAQR Scanner目前没有实现任何组件专属 ActionComponent-Specific Actions, CSA即没有scan()、stop()这类可编程控制方法。这一点在 组件注册配置 中也有体现properties: {}为空对象没有任何可供外部调用的动作定义。因此无法通过 JS 表达式或按钮事件来命令式地启动/停止扫码——组件添加后即持续工作只能通过禁用Disable样式开关来使其失效见下文样式小节。暴露变量Exposed VariableslastDetectedValueQR Scanner 暴露了一个变量用于保存最近一次成功扫描到的数据变量说明访问方式lastDetectedValue组件最近一次成功扫描到的 QR 码数据通过 JS 表达式动态访问例如{{components.qrscanner1.lastDetectedValue}}该变量的初始值在 组件配置 中定义为空字符串exposedVariables: { lastDetectedValue: , },实战用法示例在文本组件中显示{{components.qrscanner1.lastDetectedValue}}作为查询参数在查询编辑器中将参数值设为{{components.qrscanner1.lastDetectedValue}}即可用扫码结果去查询数据库或调用外部 API条件渲染结合条件表达式如{{components.qrscanner1.lastDetectedValue ! }}在扫码成功后显示后续表单步骤写入数据源在表单提交查询中引用该变量把扫码结果作为一条记录写入 ToolJet Database。需要注意该变量在组件加载时为仅在 On detect 事件触发后才会被更新为真实扫码内容。因此在引用时建议对空值做兜底处理避免查询被空字符串参数污染。通用属性GeneralTooltip在General手风琴面板下QR Scanner 与大多数 ToolJet 组件一样支持Tooltip配置在 Tooltip 输入框中以字符串格式填入提示文案运行时用户将鼠标悬停在组件上就会显示这段提示文字。Tooltip 常用于补充说明组件的用途例如请对准设备标签上的二维码或扫码后自动查询库存。设备响应式配置DevicesQR Scanner 支持针对不同终端形态控制显隐属性说明期望值Show on desktop控制组件在桌面视图中是否可见通过开关切换或点击fx动态配置逻辑表达式Show on mobile控制组件在移动视图中是否可见通过开关切换或点击fx动态配置逻辑表达式在 组件默认定义 中这两个属性的默认值均为{{true}}即桌面与移动端默认都显示others: { showOnDesktop: { value: {{true}} }, showOnMobile: { value: {{true}} }, },例如若希望扫码功能只在移动端 H5 场景下出现可将 Show on desktop 通过 fx 设为{{false}}而移动端保持开启。样式配置StylesQR Scanner 提供两项基础样式控制样式说明默认值Visibility控制组件的可见性可点击fx编程式修改。若设为{{false}}应用部署后组件将不可见{{true}}Disable默认关闭开启后组件被锁定、不可用。可点击fx编程式设置若设为{{true}}组件被锁定且失效{{false}}这些默认值同样来自 组件配置 中的styles定义且两个样式字段都声明了布尔类型的校验 schemastyles: { visibility: { type: toggle, validation: { schema: { type: boolean }, defaultValue: true } }, disabledState: { type: toggle, validation: { schema: { type: boolean }, defaultValue: false } }, },从 QrScanner.jsx 的实现可以看到这两个样式的运行时效果const { visibility, disabledState, boxShadow } styles; // ... div>div classNamemodal-body Please make sure a camera is available on your device. Try closing your browser and opening it again, ... /div因此当你发现扫码无画面时请按顺序排查应用是否运行在 localhost/https → 浏览器是否授予了摄像头权限 → 设备是否存在可用摄像头。结语QR Scanner 是 ToolJet 中接入物理世界的一个小而实用的入口。通过本文你应该已经掌握添加组件并理解其持续监听、命中即触发的工作模型在On detect事件中挂接查询与动作通过{{components.qrscanner1.lastDetectedValue}}在任意 JS 表达式、查询参数或组件属性中读取扫码结果配合 Devices 与 Styles 面板控制它在桌面/移动端的显隐与可用状态以及牢记 localhost/https、iOS Safari 这两个运行前提。动手在画布上拖一个 QR Scanner用手机对着屏幕上的二维码扫一扫就能立即验证扫码 → 事件 → 数据的完整闭环。【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考