Lime Web Components API Documentation - v7.4.0
    Preparing search index...

    Interface Notifications

    Service for displaying different notification messages to users

    The Notifications service provides four types of user notifications:

    • alert: Blocking dialog for important messages requiring acknowledgment
    • confirm: Blocking dialog for yes/no decisions
    • notify: Non-blocking toast-style notifications for feedback
    • report: Persistent banner notifications for ongoing status

    All notification methods return promises, allowing you to handle user interactions asynchronously in your Stencil components.

    • Alerts: Critical errors, warnings, or information that blocks workflow
    • Confirms: Deletion confirmations, unsaved changes warnings, destructive actions
    • Notifications: Success messages, info updates, action feedback
    • Reports: Connection status, background process updates, system messages
    import { PlatformServiceName } from '@limetech/lime-web-components';

    const notifications = platform.get(PlatformServiceName.Notification);

    await notifications.alert(
        'Error',
        'Failed to save changes. Please try again.',
        { icon: 'error' }
    );

    import { PlatformServiceName } from '@limetech/lime-web-components';

    const notifications = platform.get(PlatformServiceName.Notification);
    const repository = platform.get(PlatformServiceName.LimeObjectRepository);

    const confirmed = await notifications.confirm(
        'Delete Item',
        'Are you sure you want to delete this item? This action cannot be undone.',
        {
            acceptText: 'Delete',
            cancelText: 'Cancel',
            icon: { name: 'trash_can', color: 'rgb(var(--color-red-default))' },
        }
    );

    if (confirmed && context.limetype && context.id) {
        await repository.deleteObject(context.limetype, context.id);
        await notifications.notify('Item deleted successfully');
    }

    import { PlatformServiceName } from '@limetech/lime-web-components';

    const notifications = platform.get(PlatformServiceName.Notification);
    const navigator = platform.get(PlatformServiceName.Navigator);

    const actionClicked = await notifications.notify('Form saved successfully', {
        actionText: 'View',
        timeout: 5000,
        dismissible: true,
    });

    if (actionClicked && context.limetype && context.id) {
        navigator.navigate(`/${context.limetype}/${context.id}`);
    }

    import { PlatformServiceName } from '@limetech/lime-web-components';

    const notifications = platform.get(PlatformServiceName.Notification);
    const http = platform.get(PlatformServiceName.Http);

    const actionClicked = await notifications.report(
        'Syncing data in the background...',
        {
            actionText: 'Cancel',
            icon: 'sync',
        }
    );

    if (actionClicked) {
        await http.post('my_addon/sync/cancel');
    }
    interface Notifications {
        alert(
            title: string,
            message: string,
            options?: AlertOptions,
        ): Promise<void>;
        confirm(
            title: string,
            message: string,
            options?: ConfirmOptions,
        ): Promise<boolean>;
        notify(message: string, options?: NotificationOptions): Promise<boolean>;
        report(message: string, options?: ReportOptions): Promise<boolean>;
    }
    Index

    Methods

    alert confirm notify report

    Methods

    • Display a blocking alert dialog

      Shows a modal dialog that blocks user interaction until dismissed. Use this for important messages that require user acknowledgment, such as errors, warnings, or critical information.

      The dialog can be customized with an Icon and custom button text. The promise resolves when the user dismisses the dialog.

      Parameters

      • title: string

        title of the dialog

      • message: string

        message to display in the dialog

      • Optionaloptions: AlertOptions

        optional configuration for the alert appearance

      Returns Promise<void>

      a promise that will be resolved when the dialog is closed

      import { PlatformServiceName } from '@limetech/lime-web-components';

      const notifications = platform.get(PlatformServiceName.Notification);

      await notifications.alert('Error', 'Something went wrong');

      import { PlatformServiceName } from '@limetech/lime-web-components';

      const notifications = platform.get(PlatformServiceName.Notification);

      await notifications.alert(
          'Warning',
          'This action may have unintended consequences',
          {
              icon: {
                  name: 'warning_shield',
                  color: 'rgb(var(--color-orange-default))',
              },
              acceptText: 'I Understand',
          }
      );

    • Display a blocking confirm dialog

      Shows a modal dialog with accept/cancel buttons for user decisions. Use this before destructive actions, when saving changes, or any time you need explicit user confirmation.

      The dialog can be customized with an Icon and custom button labels. The promise resolves to true if the user accepts, false if they cancel.

      Parameters

      • title: string

        title of the dialog

      • message: string

        message to display in the dialog

      • Optionaloptions: ConfirmOptions

        optional configuration for button labels and icon

      Returns Promise<boolean>

      a promise that resolves to true if accepted, false if cancelled

      import { PlatformServiceName } from '@limetech/lime-web-components';

      const notifications = platform.get(PlatformServiceName.Notification);
      const http = platform.get(PlatformServiceName.Http);

      const shouldDelete = await notifications.confirm(
          'Delete File',
          'Are you sure you want to delete this file?'
      );

      if (shouldDelete) {
          await http.delete('my_addon/files/123');
      }

      import { PlatformServiceName } from '@limetech/lime-web-components';

      const notifications = platform.get(PlatformServiceName.Notification);
      const navigator = platform.get(PlatformServiceName.Navigator);

      const shouldDiscard = await notifications.confirm(
          'Unsaved Changes',
          'You have unsaved changes. Do you want to discard them?',
          {
              acceptText: 'Discard',
              cancelText: 'Keep Editing',
              icon: 'warning_shield',
          }
      );

      if (shouldDiscard) {
          navigator.navigate('/');
      }

    • Display a non-blocking notification

      Shows a toast-style notification that doesn't block user interaction. Use this for success messages, informational updates, or action feedback. Notifications auto-dismiss after a timeout or can be manually dismissed.

      You can optionally add an action button. The promise resolves to true if the action button was clicked, false if the notification was dismissed or timed out.

      Parameters

      • message: string

        message to display in the notification

      • Optionaloptions: NotificationOptions

        optional configuration for timeout, action button, and appearance

      Returns Promise<boolean>

      a promise that resolves to true if action clicked, false otherwise

      import { PlatformServiceName } from '@limetech/lime-web-components';

      const notifications = platform.get(PlatformServiceName.Notification);

      await notifications.notify('Changes saved successfully');

      import { PlatformServiceName } from '@limetech/lime-web-components';

      const notifications = platform.get(PlatformServiceName.Notification);
      const http = platform.get(PlatformServiceName.Http);

      const undoClicked = await notifications.notify('Item deleted', {
          actionText: 'Undo',
          timeout: 5000,
          dismissible: true,
      });

      if (undoClicked) {
          await http.post('my_addon/items/123/restore');
      }

      import { PlatformServiceName } from '@limetech/lime-web-components';

      const notifications = platform.get(PlatformServiceName.Notification);

      await notifications.notify(
          'Your export is ready. The file has been saved to your downloads folder.',
          { timeout: 8000 }
      );

    • Display a non-blocking and non-transient message

      Shows a persistent banner notification that remains visible until the user dismisses it or clicks an action. Use this for ongoing status updates, connection issues, or background processes.

      Unlike notify(), reports don't auto-dismiss and are more prominent. The promise resolves to true if the action button was clicked, false if the banner was manually dismissed.

      Parameters

      • message: string

        message to display in the banner

      • Optionaloptions: ReportOptions

        optional configuration for action button and icon

      Returns Promise<boolean>

      a promise that resolves to true if action clicked, false otherwise

      import { PlatformServiceName } from '@limetech/lime-web-components';

      const notifications = platform.get(PlatformServiceName.Notification);

      await notifications.report(
          'You are currently offline. Changes will sync when connection is restored.',
          { icon: 'sad_cloud' }
      );

      import { PlatformServiceName } from '@limetech/lime-web-components';

      const notifications = platform.get(PlatformServiceName.Notification);
      const http = platform.get(PlatformServiceName.Http);

      const cancelled = await notifications.report('Processing 1,234 items...', {
          actionText: 'Cancel',
          icon: 'hourglass',
      });

      if (cancelled) {
          await http.post('my_addon/jobs/current/stop');
      }

    Settings

    Member Visibility

    On This Page

    Use Cases
    Methods