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 methods
open()
(config: MessageInfo): void
Displays a message notification. This is the primary method.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| config | MessageInfo | Message configuration. | Yes |
Example
// Success message
message.open({
type: 'success',
messageInfo: 'Operation successful.',
});
success()
(message: string): void
Convenience method to display a success message.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| message | string | The message content. | Yes |
Example
// Display a success message.
message.success('Product saved successfully.');
error()
(message: string): void
Convenience method to display an error message.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| message | string | The message content. | Yes |
Example
// Display an error message.
message.error('Failed to save. Try again later.');
warn()
(message: string): void
Convenience method to display a warning message.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| message | string | The message content. | Yes |
Example
// Display a warning message.
message.warn('Insufficient product stock.');
info()
(message: string): void
Convenience method to display an informational prompt message.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| message | string | The message content. | Yes |
Example
// Display an informational prompt message.
message.info('Processing. Please wait...');
Type definition: MessageInfo
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.',
});
}
};
'%3e%3crect%20x='6'%20y='7.13049'%20width='13'%20height='10'%20rx='1'%20fill='black'/%3e%3cpath%20d='M12.4998%2012.936L-3.65042%200.604835L28.65%200.604838L12.4998%2012.936Z'%20stroke='white'%20stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_716_14611'%3e%3crect%20x='6'%20y='7.13049'%20width='13'%20height='10'%20rx='1'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
'%3e%3crect%20x='5.63086'%20y='7.26086'%20width='13'%20height='10'%20rx='1'%20fill='white'/%3e%3cpath%20d='M12.1306%2013.0664L-4.01956%200.735206L28.2809%200.735209L12.1306%2013.0664Z'%20stroke='%231A2C42'%20stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_716_14599'%3e%3crect%20x='5.63086'%20y='7.26086'%20width='13'%20height='10'%20rx='1'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)