Configuring System Status Messages

Summary

System Status Messaging can be configured by developers at design time:
- setting whether to show a Toast Notification alongside a System Status Message
- configuring how many Messages to display

There are 2 properties in Notification Options used for configuring System Status Messages:

Stored Message Count

By default AdapTable will store the last 100 System Status Messages that have been displayed.

Note

Once this limit is reached the oldest Message is removed

Where this limit is not suitable, the maxSystemMessagesInStore property can be used to configure a different number of messages to be stored.

maxSystemMessagesInStore

Default: 100

Number

How many System Status Messages to keep in local storage

Use this property to set how many System Status Messages should be stored in State.

When this limit is reached, the oldest Message will be removed.

Caution

AdapTable only persists messages sent in the current session

// Only keep the last 10 System Status Messages in local state
const adaptableOptions: AdaptableOptions = {
  notificationOptions: {
    maxSystemMessagesInStore: 10,
  },
};

System Status Toast Notification

By default, System Status Messages are shown in the System Status Toolbar, Tool Panel, and Status Bar.

However they do not appear automatically as a Toast Notification.

The showSystemStatusMessageNotifications overrides this behavour and will display a Notification.

Find Out More

See the tutorial on Toast Notifications for more information on how to configure these messages

showSystemStatusMessageNotifications

Default: false

Boolean

Display a Toast Notification when a System Status Message is set

If this property is set to true AdapTable will display a Toast Notification whenever a System Status Message needs to be displayed.

// Display a Toast Notification when a System Status Message is received
const adaptableOptions: AdaptableOptions = {
  notificationOptions: {
    showSystemStatusMessageNotifications: true,
  },
};

System Status

Fork Fork

This demo sends System Status messages via buttons in the Custom Toolbar - similar to other demos in this section
It displays these System Status messages in Toolbar, Tool Panel and Status Bar as with other demos
But it also renders a Toast Notification - because we set showSystemStatusMessageNotifications to true in Notification Options
Additionally we set maxSystemMessagesInStore to 5, so that only the last 5 System Status Messages are kept in store

Try It Out

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

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'System Status Message 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'
              );
            },
          },
        ],
      },
    ],
  },
  containerOptions: {
    systemStatusContainer: 'demoOutputAbove',
  },
  notificationsOptions: {
    showSystemStatusMessageNotifications: true,
    maxSystemMessagesInStore: 5,
  },
  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,
        },
      ],
    },
  },
};

PreviousSystem Status Messages NextTechnical Reference

Framework: