AdapTable Version:

Framework:

Toast Notifications

Summary

Toast Notifications are a configurable way to display messsages
They can include Forms if required
Toast Notifications are used in Alerts, System Status Messages, Reminders and other Modules

Toast Notifications are rich, highly configurable popup messages.

They are used to inform the User of important messages and updates.

Many modules in AdapTable leverage Toast Notifications including:

If required, Toast Notifications can include buttons, inputs and other UI form elements.

Notifications in AdapTable

Fork Fork

This example demonstrates some of the Notification functionality available in AdapTable, including:
- System Status Messages which can be set via 4 buttons in the Custom Toolbar, and which display the message in the System Status Toolbar
- A Reminder which will display in 1 minute (after button is clicked in Custom Toolbar)
- Toast Notifications which display at the top (rather than the default bottom left) of the grid with a bounce effect and 8 second duration

Try It Out

Click the buttons in the Setting Message Buttons Toolbar to see the System Status Message change

import {
  AdaptableButton,
  AdaptableOptions,
  ContextMenuContext,
  CustomToolbarButtonContext,
  ReminderSchedule,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Notifications',
  dashboardOptions: {
    customToolbars: [
      {
        name: 'SettingMessageButtons',
        title: 'Setting Message Buttons',
        toolbarButtons: [
          {
            label: 'Set Info',
            buttonStyle: {
              variant: 'text',
              tone: 'info',
            },
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              context.adaptableApi.systemStatusApi.setInfoSystemStatus(
                'No issues'
              );
            },
          },
          {
            label: 'Set Success',
            buttonStyle: {
              variant: 'text',
              tone: 'success',
            },
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              context.adaptableApi.systemStatusApi.setSuccessSystemStatus(
                'All working fine'
              );
            },
          },
          {
            label: 'Set Warning',
            buttonStyle: {
              variant: 'text',
              tone: 'warning',
            },
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              context.adaptableApi.systemStatusApi.setWarningSystemStatus(
                'Problems with server',
                'Avoid any unnecesary edits'
              );
            },
          },
          {
            label: 'Set Error',
            buttonStyle: {
              variant: 'text',
              tone: 'error',
            },
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              context.adaptableApi.systemStatusApi.setErrorSystemStatus(
                'The server is down!',
                'Please do not make any edits until the server comes back up'
              );
            },
          },
          {
            label: 'Show Reminder in 1 Min',
            buttonStyle: {
              variant: 'outlined',
              tone: 'neutral',
            },
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              const today = new Date();
              const todayFormatted = today.toLocaleDateString('en-US');
              const nowMinutes = today.getMinutes();
              const nowHours = today.getHours();
              const reminderSchedule: ReminderSchedule = {
                Name: 'Reminder-123',
                ScheduleType: 'Reminder',
                Header: 'Reminder Demo',
                Message: 'Check out other AdapTable functions',
                MessageType: 'Info',
                DisplayNotification: true,
                DisplaySystemStatusMessage: false,
                Schedule: {
                  OneOffDate: todayFormatted,
                  Hour: nowHours,
                  Minute: nowMinutes + 1,
                },
              };
              context.adaptableApi.scheduleApi.addReminderSchedule(
                reminderSchedule
              );
            },
          },
        ],
      },
    ],
  },
  notificationsOptions: {
    showSystemStatusMessageNotifications: true,
    position: 'TopCenter',
    transition: 'Bounce',
    duration: 8000,
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['SystemStatus'],
      Tabs: [
        {
          Name: 'Messages',
          Toolbars: ['SystemStatus', 'SettingMessageButtons'],
        },
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['SystemStatus'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'has_projects',
            'has_pages',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Configuring Notifications

By default a Toast Notification will:

appear with a sliding action
be positioned in the BottomRight of the screen
stay for 3 seconds
display without a progress bar
cannot be dragged
will not close when it clicked

However all these settings are configurable in Notification Options.

Caution

These Options are global in AdapTable; changes affect all Toast Notifications e.g. in Alerts & System Status Messages

Toast Notifications

Fork Fork

This demo sends System Status messages in the same way as the demo above.
However we have overridden some of the default Toast Notification properties as follows:
- position: 'TopCenter'
- duration: 5000
- transition: 'Bounce'
- showProgressBar: true
- closeWhenClicked: true
- pauseWhenHovering: true

import {
  AdaptableButton,
  AdaptableOptions,
  ContextMenuContext,
  CustomContextMenuContext,
  CustomToolbarButtonContext,
  UserContextMenuItem,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Toast Notifications Configuration',
  dashboardOptions: {
    customToolbars: [
      {
        name: 'SettingMessageButtons',
        title: 'Setting Message Buttons',
        toolbarButtons: [
          {
            label: 'Set Info',
            buttonStyle: {
              variant: 'text',
              tone: 'info',
            },
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              context.adaptableApi.systemStatusApi.setInfoSystemStatus(
                'No issues'
              );
            },
          },
          {
            label: 'Set Success',
            buttonStyle: {
              variant: 'text',
              tone: 'success',
            },
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              context.adaptableApi.systemStatusApi.setSuccessSystemStatus(
                'All working fine'
              );
            },
          },
          {
            label: 'Set Warning',
            buttonStyle: {
              variant: 'text',
              tone: 'warning',
            },
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              context.adaptableApi.systemStatusApi.setWarningSystemStatus(
                'Problems with server',
                'Avoid any unnecesary edits'
              );
            },
          },
          {
            label: 'Set Error',
            buttonStyle: {
              variant: 'text',
              tone: 'error',
            },
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              context.adaptableApi.systemStatusApi.setErrorSystemStatus(
                'The server is down!',
                'Please do not make any edits until the server comes back up'
              );
            },
          },
        ],
      },
    ],
  },
  notificationsOptions: {
    showSystemStatusMessageNotifications: true,
    position: 'TopCenter',
    duration: 5000,
    transition: 'Bounce',
    showProgressBar: true,
    closeWhenClicked: true,
    pauseWhenHovering: true,
  },
  contextMenuOptions: {
    customContextMenu: (context: CustomContextMenuContext) => {
      const {defaultAgGridMenuStructure, defaultAdaptableMenuStructure} =
        context;

      const setSystemStatusMenuItem: UserContextMenuItem = {
        menuType: 'User',
        label: 'Set System Status',
        subMenuItems: [
          {
            menuType: 'User',
            label: 'Set Error',
            icon: {
              name: 'error',
            },
            onClick: (menuContext: ContextMenuContext) => {
              menuContext.adaptableApi.systemStatusApi.setErrorSystemStatus(
                'System Down'
              );
            },
          },
          {
            menuType: 'User',
            label: 'Set Warning',
            icon: {
              name: 'warning',
            },
            onClick: (menuContext: ContextMenuContext) => {
              menuContext.adaptableApi.systemStatusApi.setWarningSystemStatus(
                'System Slow'
              );
            },
          },
          {
            menuType: 'User',
            label: 'Set Success',
            icon: {
              name: 'check',
            },
            onClick: (menuContext: ContextMenuContext) => {
              menuContext.adaptableApi.systemStatusApi.setSuccessSystemStatus(
                'System Fine'
              );
            },
          },
          {
            menuType: 'User',
            label: 'Set Info',
            icon: {
              name: 'info',
            },
            onClick: (menuContext: ContextMenuContext) => {
              menuContext.adaptableApi.systemStatusApi.setInfoSystemStatus(
                'Demos working fine'
              );
            },
          },
        ],
      };

      return [
        setSystemStatusMenuItem,
        '-',
        ...defaultAgGridMenuStructure,
        '-',
        ...defaultAdaptableMenuStructure,
      ];
    },
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['SystemStatus'],
      Tabs: [
        {
          Name: 'Messages',
          Toolbars: ['SystemStatus', 'SettingMessageButtons'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'has_projects',
            'has_pages',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Notification Options

Toast Notifications are configured in Notification Options.

closeWhenClicked

Default: false

Boolean

Closes Notification automatically when its clicked

duration

Default: 3000

Number | 'always'

Determines how long a Toast Notification will be displayed

Sets the duration of the appearance of a Toast Notification.

const adaptableOptions: AdaptableOptions = {
  notificationOptions: {
    // this can be a number (duration in millis) or the string 'always'
    duration: 'always',
  },
};

isDraggable

Default: false

Boolean

Whether a Toast Notification can be dragged to a new location

maxNotifications

Default: 3

Number

How many Notifications can be displayed at one time

Sets how many Notifications can be displayed at one time




<AdaptableOption title='pauseWhenHovering' description='Pauses the Notification when mouse hovers over it' defaultValue='false' type='Boolean'>

Use this property to suspend the duration of a Toast Notification while the mouse is hovering over it

```ts {3}
const adaptableOptions: AdaptableOptions = {
  notificationOptions: {
    pauseWhenHovering

position

Default: BottomRight

TOAST_POSITIONS

Where the Notification will appear

TOAST_POSITIONS

Use this property to set where a Toast Notification will appear (if anywhere). Options are:

TopRight
TopCenter
TopLeft
BottomRight (the default)
BottomCenter
BottomLeft

const adaptableOptions: AdaptableOptions = {
  notificationOptions: {
    position: 'TopCenter',
  },
};

showApplicationIcon

Default: false

Boolean

Displays the application icon in Notifications

Displays the Application Icon in Toast Notifications.

Note

This requires an icon to be provided in the applicationIcon property of User Interface Options

const adaptableOptions: AdaptableOptions = {
  notificationOptions: {
    showApplicationIcon: true,
  },
};

showProgressBar

Default: false

Boolean

Displays a Progress Bar in a Toast Notification

Displays a Progress Bar inside a Toast Notification which shows how long left in the Notification Duration

const adaptableOptions: AdaptableOptions = {
  notificationOptions: {
    showProgressBar: true,
  },
};

transition

Default: Slide

'Bounce' | 'Slide' | 'Zoom' | 'Flip'

How a Toast Notification will first appear

Sets the transition appearance of a Toast Notification.

Defaults to 'slide' but can also bounce, zoom or flip.

const adaptableOptions: AdaptableOptions = {
  notificationOptions: {
    // Make Toast Notifications Flip into view
    transition: 'Flip',
  },
};

The full list of properties in Notifications Options is:

Property	Description	Default
closeWhenClicked	Closes Notification automatically when its clicked	false
duration	How long (in ms) Notifications display for	3000
isDraggable	Can Notification be dragged	false
maxNotifications	How many Notifications can be displayed at one time	3
maxSystemMessagesInStore	How many System Status Messages to hold in State; when limit is reached, oldest Message is removed	100
pauseWhenHovering	Pauses the Notification when mouse hovers over it	false
position	Where Notification will appear (if anywhere)	'BottomRight'
showApplicationIcon	Displays the application icon in Notifications	false
showProgressBar	Shows a Progress Bar in the Notification	false
showSystemStatusMessageNotifications	Display System Status Messages as Notifications	false
transition	How Notification will appear: Bounce, Slide, Zoom or Flip	'Slide'

PreviousUI Guides NextStyling Editable & ReadOnly Cells

Framework: