ContextQMD
Back to Nocobase

ctx.modal

docs/docs/en/runjs/context/modal.md

2.0.513.2 KB
Original Source

ctx.modal

Shortcut API built on Ant Design Modal for opening modals (info, confirm, etc.) from RunJS. Implemented by ctx.viewer / the view system.

Use Cases

ScenarioDescription
JSBlock / JSFieldShow result, error, or confirmation after user action
Event flow / action eventsConfirm before submit; use ctx.exit() when user cancels
LinkageShow modal when validation fails

Note: ctx.modal is available in RunJS when a view context exists (e.g. JSBlock on a page, event flow); in backend or no-UI contexts it may be absent—use optional chaining: ctx.modal?.confirm?.().

Type

ts
modal: {
  info: (config: ModalConfig) => Promise<void>;
  success: (config: ModalConfig) => Promise<void>;
  error: (config: ModalConfig) => Promise<void>;
  warning: (config: ModalConfig) => Promise<void>;
  confirm: (config: ModalConfig) => Promise<boolean>;  // true = OK, false = Cancel
};

ModalConfig matches Ant Design Modal static method config.

Common Methods

MethodReturnsDescription
info(config)Promise<void>Info modal
success(config)Promise<void>Success modal
error(config)Promise<void>Error modal
warning(config)Promise<void>Warning modal
confirm(config)Promise<boolean>Confirm; OK → true, Cancel → false

Config

Same as Ant Design Modal; common fields:

ParameterTypeDescription
titleReactNodeTitle
contentReactNodeContent
okTextstringOK button text
cancelTextstringCancel button text (confirm only)
onOk() => void | Promise<void>On OK click
onCancel() => voidOn Cancel click

Relation to ctx.message, ctx.openView

UseRecommended
Short auto-dismissctx.message
Info/success/error/warning modalctx.modal.info / success / error / warning
Confirm (user choice)ctx.modal.confirm; use ctx.exit() to control flow
Complex form, list, etc.ctx.openView for custom view (page/drawer/dialog)

Examples

Simple info

ts
ctx.modal.info({
  title: 'Notice',
  content: 'Operation completed',
});

Confirm and control flow

ts
const confirmed = await ctx.modal.confirm({
  title: 'Confirm delete',
  content: 'Delete this record?',
  okText: 'OK',
  cancelText: 'Cancel',
});
if (!confirmed) {
  ctx.exit();
  return;
}
await ctx.runAction('destroy', { filterByTk: ctx.record?.id });

Confirm with onOk

ts
await ctx.modal.confirm({
  title: 'Confirm submit',
  content: 'Cannot be changed after submit. Continue?',
  async onOk() {
    await ctx.form.submit();
  },
});

Error

ts
try {
  await someOperation();
  ctx.modal.success({ title: 'Success', content: 'Done' });
} catch (e) {
  ctx.modal.error({ title: 'Error', content: e.message });
}