NocoBase RunJS ctx.openView() 完整指南以编程方式打开抽屉、弹窗与页面视图【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase在 NocoBase 的 RunJS 环境中ctx.openView()是连接一段自定义逻辑与一个已配置视图的关键桥梁你可以用一行代码以编程方式打开抽屉drawer、弹窗dialog或内嵌页embed把当前行的主键、记录对象乃至自定义属性注入视图实现详情查看、行编辑、关联选择等高频交互。本文以 open-view.md 为核心结合仓库源码与内置代码片段完整讲解ctx.openView()的签名、参数、底层实现与实战写法读完即可在 JSBlock、表格单元格、事件流等场景中落地使用。一、功能定位什么是 ctx.openView()ctx.openView()由FlowModelContext提供用于以编程方式打开指定视图抽屉、弹窗、内嵌页等。它打开的是FlowPageChildPageModel——即一个已经配置好的完整流程页面内部会渲染完整流程而不仅仅是静态内容。从源码看RunJS 编辑器的自动补全定义位于 packages/core/flow-engine/src/runjs-context/contexts/base.ts其中明确描述Open a view component (page, modal, or drawer) by its unique identifier. Parameters: (viewId: string, options?: OpenViewOptions) Promisevoid它常用于场景说明JSBlock按钮点击后打开详情/编辑弹窗传入当前行filterByTk表格单元格在单元格中渲染按钮点击打开行详情弹窗事件流 / JSAction在操作成功后打开下一个视图或弹窗关联字段通过ctx.runAction(openView, params)打开选择/编辑弹窗注意ctx.openView需在存在 FlowModel 上下文的 RunJS 环境中可用若uid对应的模型不存在会自动创建PopupActionModel并持久化对应实现位于 PopupActionModel.tsx。二、签名与参数详解openView(uid: string, options?: OpenViewOptions): Promisevoiduid视图模型的唯一标识uid是视图模型的唯一标识。若该uid对应的模型不存在NocoBase 会自动创建并保存因此它既是打开已存在视图的钥匙也是按需创建视图的声明。建议使用稳定的 UID并与当前模型绑定例如const popupUid ${ctx.model.uid}-detail;这样多个区块之间不会互相冲突且多次打开同一弹窗时可以复用已保存的视图配置。这一约定在仓库内置片段中同样被强调见 open-view-drawer.snippet.ts 的注释popupUid should be stable and better bound to ctx.model.uid。options 常用字段字段类型说明modedrawer/dialog/embed打开方式抽屉、弹窗、内嵌默认drawersizesmall/medium/large弹窗/抽屉尺寸默认mediumtitlestring视图标题paramsRecordstring, any传给视图的任意参数filterByTkany主键值用于单条详情/编辑场景sourceIdstring来源记录 ID关联场景使用dataSourceKeystring数据源collectionNamestring数据表名associationNamestring关联字段名navigationboolean是否使用路由导航传defineProperties/defineMethods时会被强制设为falsepreventCloseboolean是否阻止关闭definePropertiesRecordstring, PropertyOptions向视图内模型动态注入属性defineMethodsRecordstring, Function向视图内模型动态注入方法源码级补充在 base.ts 的补全定义中还包含width: number | string弹窗/抽屉宽度、viewUid: string自定义路由视图 UID与isMobileLayout: boolean使用移动端布局将以 embed 方式展示等额外选项且mode支持page页面导航与modal两种写法可作为进阶参考。三、底层实现openView 动作与上下文推导ctx.openView最终对应到流程动作actionopenView。在 packages/core/client-v2/src/flow/flows/openViewFlow.ts 中popupSettings流程通过use: openView注册该动作并提供了defaultParams钩子在模型实例化时基于当前上下文自动推导 openView 的默认参数仅填充缺失项推导逻辑如下关联字段上下文取关联字段的targetCollection作为collectionNametargetCollection.dataSourceKey作为dataSourceKeyassocField.resourceName作为associationName普通字段上下文使用当前集合名 字段的target作为associationName非字段上下文按钮/动作使用ctx.collection与ctx.association?.resourceName。这意味着在大多数场景下你只需传入filterByTk等业务参数collectionName、dataSourceKey、associationName会由框架从上下文自动补齐。在动作侧packages/core/client-v2/src/flow/actions/openView.tsx 负责真正渲染FlowPage并处理关闭前的脏表单检查collectDirtyFormModelUids递归收集用户修改过的表单模型beforeClose时提示或阻止关闭以及路由状态createOpenViewRouteState/RUNJS_OPEN_VIEW_ROUTE_STATE这就是preventClose与navigation选项在底层发挥作用的机制。四、实战示例4.1 基础用法打开抽屉const popupUid ${ctx.model.uid}-detail; await ctx.openView(popupUid, { mode: drawer, size: medium, title: ctx.t(详情), });仓库内置片段 open-view-drawer.snippet.ts 提供了等价的抽屉写法片段前缀sn-open-drawer可直接在 RunJS 编辑器中输入触发补全const popupUid ctx.model.uid -1; // popupUid should be stable and better bound to ctx.model.uid await ctx.openView(popupUid, { mode: drawer, title: ctx.t(Sample drawer), size: large, });4.2 传入当前行上下文const primaryKey ctx.collection?.primaryKey || id; await ctx.openView(${ctx.model.uid}-1, { mode: dialog, title: ctx.t(行详情), params: { filterByTk: ctx.record?.[primaryKey], record: ctx.record, }, });对应的表格单元格场景片段 cell-open-dialog.snippet.ts前缀sn-col-open-dialog展示了如何在单元格内渲染按钮并传入当前行数据const button document.createElement(button); button.className nb-cell-btn; button.style.padding 4px 8px; button.textContent ctx.t(View); const popupUid ctx.model.uid -1; // popupUid should be stable and better bound to ctx.model.uid const primaryKey ctx.collection?.primaryKey || id; button?.addEventListener(click, async () { await ctx.openView(popupUid, { mode: dialog, title: ctx.t(Row detail), params: { filterByTk: ctx.record?.[primaryKey], record: ctx.record, }, }); }); ctx.render(button);4.3 通过 runAction 打开当模型配置了openView动作如关联字段、可点击字段时可直接通过ctx.runAction触发await ctx.runAction(openView, { navigation: false, mode: dialog, collectionName: users, filterByTk: ctx.record?.id, });在 openViewFlow.ts 中可以看到openView步骤支持hideInSettings配置当clickToOpen为false时在设置面板中隐藏从而支持可点击字段这类由配置驱动的打开方式。4.4 注入自定义上下文await ctx.openView(${ctx.model.uid}-edit, { mode: drawer, filterByTk: ctx.record?.id, defineProperties: { onSaved: { get: () () ctx.resource?.refresh?.(), cache: false, }, }, });defineProperties会把属性动态注入视图内的模型例如这里的onSaved在视图内模型被访问时返回一个回调函数保存成功后即可触发ctx.resource.refresh()刷新列表——实现了弹窗编辑 → 关闭后列表自动刷新的常见闭环。五、与 ctx.view、ctx.viewer 的关系用途推荐用法打开已配置的流程视图ctx.openView(uid, options)打开自定义 content无流程ctx.viewer.dialog()/ctx.viewer.drawer()操作当前打开的视图ctx.view.close()、ctx.view.inputArgs三者分工明确可对照 view.mdctx.openView打开的是FlowPageChildPageModel内部渲染完整流程页面适合打开已配置好的详情、编辑、选择视图ctx.viewer打开的是任意 React 内容适合无流程的轻量自定义弹层ctx.view表示当前所在的视图实例负责读取打开参数与关闭视图。具体到数据流ctx.openView打开时传入的options.params、filterByTk、sourceId等会进入视图内的ctx.view.inputArgs在弹窗内部可通过ctx.getVar(ctx.view.inputArgs.xxx)或ctx.view.inputArgs.xxx读取而ctx.view.close(result)的result会回传给调用方。典型配合如下// 打开前记录要回传的结果 // 弹窗内提交成功后 ctx.view?.close({ id: newRecord.id, name: newRecord.name });六、注意事项uid 与 ctx.model.uid 关联建议使用${ctx.model.uid}-xxx形式的稳定 UID避免多个区块之间产生 uid 冲突也便于复用已保存的视图配置navigation 会被强制关闭传入defineProperties/defineMethods时navigation会被强制设为false防止页面刷新后注入的上下文如onSaved回调丢失视图内读取参数弹窗内的ctx.view指向当前视图实例ctx.view.inputArgs可读取打开时传入的参数在无视图上下文的环境普通页面、后端上下文中ctx.view为undefined建议使用可选链ctx.view?.close?.()脏表单保护关闭带表单的视图时框架会通过 openView.tsx 中的beforeClose机制检查是否存在未保存的修改preventClose可用于阻止误关闭自动创建模型若uid不存在会自动创建PopupActionModel并持久化因此不必预先手动创建视图模型。七、相关文档ctx.view当前打开的视图实例读取inputArgs、调用close()/update()ctx.model当前模型用于构造稳定的 popupUidRunJS 上下文总览docs/docs/cn/runjs/index.md【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考