[{"value":"Quick start","id":"SrgaI","hLevel":2,"level":1},{"value":"API method: open()","id":"dIWYt","hLevel":2,"level":1,"children":[{"value":"Parameters","id":"tvFoe","hLevel":3,"level":2},{"value":"Example","id":"gqmcz","hLevel":3,"level":2}]},{"value":"Type definition: MessageOption","id":"cAsbc","hLevel":2,"level":1},{"value":"Examples","id":"CAOIs","hLevel":2,"level":1,"children":[{"value":"Example 1: Save operation feedback","id":"PwMF1","hLevel":3,"level":2},{"value":"Example 2: Form validation prompt","id":"GCIDm","hLevel":3,"level":2},{"value":"Example 3: Asynchronous operation progress prompt","id":"YPUls","hLevel":3,"level":2}]}]

Message

Message is a component for displaying lightweight notification messages, typically appearing at the top of the page to convey operation results, error prompts, or other important information. Unlike Modal, Message does not interrupt the current operation. It disappears automatically after a short display, providing a lightweight and immediate feedback experience.

Quick start

The following example demonstrates the basic implementation of the Message component:

import Client, { shared, Message } from '@shoplineos/app-bridge';
// 1. Initialize App Bridge.
const app = Client.createApp({
  appKey: 'your-app-key',
  host: shared.getHost(),
});
// 2. Create a Message instance.
const message = Message.create(app);
// 3. Show a success message.
message.open({
  type: 'success',
  messageInfo: 'Product created successfully.',
});
// Show an error message.
message.open({
  type: 'error',
  messageInfo: 'Save failed. Try again later.',
});
// Show a warning message.
message.open({
  type: 'warn',
  messageInfo: 'Insufficient product stock.',
});
// Show an informational prompt message.
message.open({
  type: 'info',
  messageInfo: 'Processing. Please wait...',
});

After you call the open() method, a message notification will appear at the top of the page. The effect is as follows:

API method: `open()`

(config: MessageOption): void

Displays a message notification.

Parameters

Parameter	Type	Description	Required
config	MessageOption	Message configuration.	Yes

Example

// Success message
message.open({
  type: 'success',
  messageInfo: 'Operation successful.',
});

Type definition: `MessageOption`

Configuration parameters for the open() method.

Parameter	Type	Description	Required
type	`'success'` \| `'error'` \| `'warn'` \| `'info'`	The message type, which determines the message style and icon.	Yes
messageInfo	string	The message content.	Yes

Message types:

Type	Description	Use case
`success`	Success message	Feedback for successful operations
`error`	Error message	Operation failures or errors
`warn`	Warning message	Warning information or important notes
`info`	Informational prompt message	General information or progress prompts

Examples

Example 1: Save operation feedback

const handleSave = async (data) => {
  try {
    await saveData(data);
    // Show success message
    message.open({
      type: 'success',
      messageInfo: 'Data saved successfully.',
    });
  } catch (error) {
    // Show error message
    message.open({
      type: 'error',
      messageInfo: 'Save failed:' + error.message,
    });
  }
};

Example 2: Form validation prompt

const validateForm = (formData) => {
  if (!formData.title) {
    message.open({
      type: 'warn',
      messageInfo: 'Enter a product title.',
    });
    return false;
  }
  if (!formData.price || formData.price <= 0) {
    message.open({
      type: 'warn',
      messageInfo: 'Enter a valid product price.',
    });
    return false;
  }
  return true;
};

Example 3: Asynchronous operation progress prompt

const syncProducts = async () => {
  // Show information about sync start.
  message.open({
    type: 'info',
    messageInfo: 'Syncing product data...',
  });
  try {
    const result = await syncProductsFromServer();
    // Show success message
    message.open({
      type: 'success',
      messageInfo: `Successfully synced ${result.count} products.`,
    });
  } catch (error) {
    // Show error message
    message.open({
      type: 'error',
      messageInfo: 'Sync failed. Try again later.',
    });
  }
};