Back to Nocobase

ctx.notification

docs/docs/en/runjs/context/notification.md

2.0.512.7 KB
Original Source

ctx.notification

Global notification API based on Ant Design Notification; shows notifications in the top-right. Compared to ctx.message, notifications can have title and description and stay longer.

Use Cases

ScenarioDescription
JSBlock / action eventsTask done, batch result, export done
Event flowSystem notice after async flow ends
Longer contentFull notification with title, description, actions

Type

ts
notification: NotificationInstance;

NotificationInstance is the Ant Design notification API.

Common Methods

MethodDescription
open(config)Open with custom config
success(config)Success notification
info(config)Info notification
warning(config)Warning notification
error(config)Error notification
destroy(key?)Close notification by key; no key = close all

Config (same as Ant Design notification):

ParameterTypeDescription
messageReactNodeTitle
descriptionReactNodeDescription
durationnumberAuto-close seconds; default 4.5; 0 = no auto-close
keystringUnique id for destroy(key)
onClose() => voidOn close
placementstringtopLeft | topRight | bottomLeft | bottomRight

Examples

Basic

ts
ctx.notification.open({
  message: 'Success',
  description: 'Data saved.',
});

By type

ts
ctx.notification.success({
  message: ctx.t('Export completed'),
  description: ctx.t('Exported {{count}} records', { count: 10 }),
});

ctx.notification.error({
  message: ctx.t('Export failed'),
  description: ctx.t('Check console for details'),
});

ctx.notification.warning({
  message: ctx.t('Warning'),
  description: ctx.t('Some data may be incomplete'),
});

Custom duration and key

ts
ctx.notification.open({
  key: 'task-123',
  message: ctx.t('Task in progress'),
  description: ctx.t('Please wait...'),
  duration: 0,
});

ctx.notification.destroy('task-123');

Close all

ts
ctx.notification.destroy();

ctx.message vs ctx.notification

ctx.messagectx.notification
PositionTop centerTop right (configurable)
StructureSingle lineTitle + description
UseShort, auto-dismissLonger, can stay
TypicalSuccess, validation, copyTask done, system notice