---
title: "Message"

doc_type: static
doc_category: static
doc_version: v20270301
source_url:
  html: 'https://developer.shopline.com/docs/apps/development-tool/app-bridge/actions/message'
  md: 'https://developer.shopline.com/docs/apps/development-tool/app-bridge/actions/message.md'
---
# 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{#SrgaI}

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

```javascript
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:

![](https://s2cdn.myshopline.com/slfs/op-new/177329797862946/1770642112868-8b5a86c8-9a3c-4574-b40f-764a228ee198.png)

## API method: `open()`{#dIWYt}

```typescript
(config: MessageOption): void
```

Displays a message notification.

### Parameters{#tvFoe}

| Parameter | Type                    | Description            | Required |
| --------- | ----------------------- | ---------------------- | -------- |
| config    | [MessageOption](#cAsbc) | Message configuration. | Yes      |

### Example{#gqmcz}

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

---

## Type definition: `MessageOption`{#cAsbc}

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{#CAOIs}

### Example 1: Save operation feedback{#PwMF1}

```javascript
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**{#GCIDm}

```javascript
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**{#YPUls}

```javascript
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.',
    });
  }
};
```