Toast Notifications

Summary

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

Toast Notifications are rich, highly configurable popup messages.

They are designed to inform users of important messages or updates.

Toast Notifications are available - as options - in 2 modules in AdapTable:

Note

Alert Notifications can be configured to show an Alert Form (i.e. buttons and other Form fields)
System Status toasts are typically message text plus a default OK button unless you customise the underlying alert

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
- TODO JW - create a Scheduled Alert which will fire 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,
  CustomToolbarButtonContext,
} 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'
              );
            },
          },
       
        ],
      },
    ],
  },
  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
remain on the screen for 3 seconds
display without a progress bar
not be draggable
not close when it is clicked

However all these settings are configurable in Notifications Options.

Caution

These Options are global in AdapTable
Changes affect all Toast Notifications (i.e. in both Alerts and 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,
        },
      ],
    },
  },
};

Notifications Options

Toast Notifications are configured in NotificationsOptions.

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 = {
  notificationsOptions: {
    // 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

pauseWhenHovering

Default: false

Boolean

Pauses the Notification when mouse hovers over it

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

const adaptableOptions: AdaptableOptions = {
  notificationsOptions: {
    pauseWhenHovering: true,
  },
};

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 = {
  notificationsOptions: {
    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 = {
  notificationsOptions: {
    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 = {
  notificationsOptions: {
    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 = {
  notificationsOptions: {
    // Make Toast Notifications Flip into view
    transition: 'Flip',
  },
};

The full list of properties in Notifications Options is:

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

PreviousAccessibility & Keyboard NextUsing AdapTable Wizards