Modal​

Modal is a dialog component used to display important information, warning prompts, or actions requiring confirmation on top of the current page. Modal provides multiple modal types (such as confirmation, warning, error, and success prompts), helping apps achieve a unified modal interaction experience.

Quick start​

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

import Client, { shared, Modal, ModalAction } from '@shoplineos/app-bridge';
// 1. Initialize App Bridge.
const app = Client.createApp({
  appKey: 'your-app-key',
  host: shared.getHost(),
});
// 2. Create a Modal instance.
const modal = Modal.create(app);
// 3. Open a confirmation modal.
modal.open({
  type: 'confirm',
  title: 'Confirm Deletion',
  content: 'Are you sure you want to delete the product? This operation cannot be undone.',
});
// 4. Subscribe to the confirmation event.
modal.subscribe(ModalAction.MODAL_SAVE, () => {
  console.log('Confirm is clicked');
  // Execute the delete operation
});
// 5. Subscribe to the cancellation event.
modal.subscribe(ModalAction.MODAL_CLOSE, () => {
  console.log('Cancel is clicked');
});

After you call the open() method, the modal will appear on the page. The following figure shows the effect of a confirmation modal:

API methods​

open()​

(config: ModalProps): void

Opens the modal.

Parameters​

ParameterTypeDescriptionRequired
configModalPropsModal configuration.Yes

Example​

// Confirmation modal
modal.open({
  type: 'confirm',
  title: 'Confirm Action',
  content: 'Are you sure you want to proceed?',
});
// Risk modal
modal.open({
  type: 'danger',
  title: 'Risky Operation',
  content: 'This operation will permanently delete the data and cannot be undone.',
});
// Error prompt modal
modal.open({
  type: 'error',
  title: 'Operation Failed',
  content: 'Save failed. Try again later.',
});
// Success prompt modal
modal.open({
  type: 'success',
  title: 'Operation Successful',
  content: 'Product saved successfully.',
});
// Warning modal
modal.open({
  type: 'warn',
  title: 'Warning',
  content: 'You have unsaved changes. Are you sure you want to leave?',
});
// Information prompt modal
modal.open({
  type: 'info',
  title: 'Tip',
  content: 'This feature is coming soon. Stay tuned.',
});

subscribe()​

(action: ModalAction, callback: () => void, once?: boolean): () => void

Subscribes to modal action events (such as confirmation and cancellation).

Parameters​

ParameterTypeDescriptionRequired
actionModalActionThe action type to subscribe to.Yes
callback() => voidThe callback function triggered when the action occurs.Yes
oncebooleanWhether to automatically unsubscribe after one trigger.
• true: Automatically unsubscribes after one trigger.
• false: Does not automatically unsubscribe, but requires manual unsubscription.		No

Return value​

Returns an unsubscribe function. Calling it will cancel the current subscription.

Example​

// Subscribe to the confirmation event.
const unsubscribe = modal.subscribe(ModalAction.MODAL_SAVE, () => {
  console.log('Operation is confirmed.');
  // Execute corresponding business logic
});
// Unsubscribe.
unsubscribe();
// Subscribe to a one-time event (automatically unsubscribed from after a trigger).
modal.subscribe(
  ModalAction.MODAL_SAVE,
  () => {
    console.log('This callback will only execute once.');
  },
  true,
);

unsubscribe()​

(action: ModalAction): void

Unsubscribes from all listeners for a specified action.

Parameters​

ParameterTypeDescriptionRequired
actionModalActionThe action type to unsubscribe from.Yes

Example​

// Unsubscribe from all listeners for the MODAL_SAVE action.
modal.unsubscribe(ModalAction.MODAL_SAVE);

Type definitions​

ModalProps​

Configuration parameters for the open() method.

ParameterTypeDescriptionRequired
type'confirm' | 'danger' | 'error' | 'warn' | 'info' | 'success'The modal type, which determines the modal's style and icon.Yes
titlestringThe modal title text.Yes
contentstringThe modal content text.Yes

Modal types:

TypeDescriptionUse case
confirmConfirmation modalOperations requiring user confirmation
dangerRisk modalRisky or irreversible operations
errorError prompt modalOperation failures or errors
warnWarning modalWarning messages or important notes
infoInformation prompt modalGeneral information prompts
successSuccess prompt modalFeedback for successful operations

ModalAction​

Subscribe to the following actions via the subscribe() method to listen to various modal events.

Action TypeDescriptionTrigger conditionCallback parameter
MODAL_SAVEConfirmTriggered when the confirm button is clicked.None
MODAL_CLOSECancel or closeTriggered when the cancel button is clicked or the modal is closed.None

Examples​

Example 1: Confirm deletion​

const handleDelete = (productId) => {
  // Open the confirmation modal.
  modal.open({
    type: 'danger',
    title: 'Confirm Deletion',
    content: 'Are you sure you want to delete the product? This operation cannot be undone.',
  });
  // Subscribe to the confirmation event (one-time subscription).
  modal.subscribe(
    ModalAction.MODAL_SAVE,
    async () => {
      try {
        // Execute delete operation
        await deleteProduct(productId);
        // Show success prompt
        modal.open({
          type: 'success',
          title: 'Deletion Successful',
          content: 'Product deleted successfully.',
        });
      } catch (error) {
        // Show error prompt
        modal.open({
          type: 'error',
          title: 'Deletion Failed',
          content: 'An error occurred while deleting the product. Try again later.',
        });
      }
    },
    true, // One-time subscription
  );
};

Example 2: Confirm save​

const handleSave = (formData) => {
  modal.open({
    type: 'confirm',
    title: 'Confirm Save',
    content: 'Are you sure you want to save the current changes?',
  });
  modal.subscribe(
    ModalAction.MODAL_SAVE,
    async () => {
      try {
        await saveData(formData);
        modal.open({
          type: 'success',
          title: 'Save Successful',
          content: 'Data saved successfully.',
        });
      } catch (error) {
        modal.open({
          type: 'error',
          title: 'Save Failed',
          content: error.message,
        });
      }
    },
    true,
  );
};

Example 3: Confirm exit​

const handleExit = () => {
  if (hasUnsavedChanges) {
    modal.open({
      type: 'warn',
      title: 'Unsaved Changes',
      content: 'You have unsaved changes. Are you sure you want to leave?',
    });
    modal.subscribe(
      ModalAction.MODAL_SAVE,
      () => {
        // Confirm exit
        window.location.href = '/dashboard';
      },
      true,
    );
    modal.subscribe(
      ModalAction.MODAL_CLOSE,
      () => {
        // Cancel exit
        console.log('Exit is canceled.');
      },
      true,
    );
  } else {
    // No unsaved changes. Leave directly.
    window.location.href = '/dashboard';
  }
};
Was this article helpful to you?
SHOPLINE
SHOPLINE
SHOPLINE Enterprise
Legal
Privacy
Terms
Developer Agreement
LinkedInEmail
LinkedInEmail
© Copyright 2013-2026 SHOPLINE Limited.