• English

      • ctx.message

      Ant Design global message API, used to display temporary light prompts at the top center of the page. Messages close automatically after a certain period or can be closed manually by the user.

      Use Cases

      ScenarioDescription
      JSBlock / JSField / JSItem / JSColumnOperation feedback, validation prompts, copy success, and other light prompts
      Form Operations / WorkflowFeedback for submission success, save failure, validation failure, etc.
      Action Events (JSAction)Immediate feedback for clicks, batch operation completion, etc.

      Type Definition

      message: MessageInstance;

      MessageInstance is the Ant Design message interface, providing the following methods.

      Common Methods

      MethodDescription
      success(content, duration?)Display a success prompt
      error(content, duration?)Display an error prompt
      warning(content, duration?)Display a warning prompt
      info(content, duration?)Display an information prompt
      loading(content, duration?)Display a loading prompt (must be closed manually)
      open(config)Open a message using custom configuration
      destroy()Close all currently displayed messages

      Parameters:

      • content (string | ConfigOptions): Message content or configuration object
      • duration (number, optional): Auto-close delay (seconds), default is 3 seconds; set to 0 to disable auto-close

      ConfigOptions (when content is an object):

      interface ConfigOptions {
  content: React.ReactNode;  // Message content
  duration?: number;        // Auto-close delay (seconds)
  onClose?: () => void;    // Callback when closed
  icon?: React.ReactNode;  // Custom icon
}

      Examples

      Basic Usage

      ctx.message.success('Operation successful');
ctx.message.error('Operation failed');
ctx.message.warning('Please select data first');
ctx.message.info('Processing...');

      Internationalization with ctx.t

      ctx.message.success(ctx.t('Copied'));
ctx.message.warning(ctx.t('Please select at least one row'));
ctx.message.success(ctx.t('Exported {{count}} records', { count: rows.length }));

      Loading and Manual Close

      const hide = ctx.message.loading(ctx.t('Saving...'));
// Execute asynchronous operation
await saveData();
hide();  // Manually close loading
ctx.message.success(ctx.t('Saved'));

      Custom Configuration with open

      ctx.message.open({
  type: 'success',
  content: 'Custom success prompt',
  duration: 5,
  onClose: () => console.log('message closed'),
});

      Close All Messages

      ctx.message.destroy();

      Difference Between ctx.message and ctx.notification

      Featurectx.messagectx.notification
      PositionTop center of the pageTop right corner
      PurposeTemporary light prompt, disappears automaticallyNotification panel, can include title and description, suitable for longer display
      Typical ScenariosOperation feedback, validation prompts, copy successTask completion notifications, system messages, longer content requiring user attention
      • ctx.notification - Top-right notifications, suitable for longer display durations
      • ctx.modal - Modal confirmation, blocking interaction
      • ctx.t() - Internationalization, commonly used with message