System Status Messages

Summary

AdapTable provides a few functions designed to keep end users notified
- System Status Messages - colour coded messages which can be displayed in mulitple ways
- Reminders - popups which use Scheduling to display Messaeges at given time
- Toast Notifications - a configurable way to display messsages (that can include forms)

AdapTable allows developers and support teams to send System Status Mesages at run-time.

These are designed to keep run-time users updated with information about their application.

Each System Status Message has a StatusType with an associated colour.

Messages are typically provided to the User via the System Status API section of AdapTable API.

Displaying Messages

System Status Messages are displayed in the System Status Message section of the Settings Panel.

Hint

This screen can be accessed by selecting Show System Status in the Column and Context Menus

This shows a history of all System Status Messages (sent in the current session) and ordered by the most recently received Message.

Note

Messages which include a FurtherInformation property (or which are very long Messages) display an ellipsis
This allows for the whole Message to be read when it is clicked

There is a Delete All Messages button which will clear the Messages from State.

Other Message Locations

System Status message can also be displayed in multiple places in AdapTable including:

as a Toast Notification (if showSystemStatusMessageNotifications is set to true in Notification Options)
in System Status Toolbar
in System Status ToolPanel
in the Dashboard via the SystemStatus Module Button which shows a different icon appropriate to the last Message's Status Type
in the Status Bar
in a Custom Div (if one is provided by a developer in Container Options)
through the System Status Message Displayed Event

Status Types

Each System Status Message has a StatusType with an associated colour.

Note

AdapTable associates each StatusType with a CSS Variable to set the colour of the System Status Message
The colour returned by any of these variables can be set when creating a Custom Theme.

The 4 Status Types (of type AdaptableMessageType) and their associated default colours are:

Status Type	CSS Variable	Default Colour
Info	--ab-color-info	Blue
Success	--ab-color-success	Green
Warning	--ab-color-warn	Orange
Error	--ab-color-error	Red

System Status

Fork Fork

This demo sends System Status messages (via the System Status API section of Adaptable API) in 2 ways:
- clicking the buttons in the 'Setting Message Buttons' Custom Toolbar - there is one button for each available Status Type
- selecting the entries in the 'Set System Status' User Menu Item in the Context Menu
It displays these System Status messages:
- in the System Status Toolbar
- in the System Status Tool Panel
- the System Status Module Button in the Dashboard (which changes colour and image base don the System Type)
- in the System Status section of the Settings Panel (available by clicking the System Status Module Button or the configure button in the System Status Toolbar)

Try It Out

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

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'System Status Message',
  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: {
    duration: 2000,
  },
  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'],
        },
      ],
    },
    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,
        },
      ],
    },
  },
};

Sending Messages

System Status Messages are provided to the User via the System Status API section of AdapTable API.

This includes a number of functions that allow messages to be displayed - together with a Status Type and further information if required.

Storing Messages

By default AdapTable stores the 100 most recent System Status Messages in temporary AdapTable State

Note

This is configurable via the maxSystemMessagesInStore property in Notification Options

Caution

System Status Message are not stored between Sessions and are not part of Adaptable State that is persisted

FAQ

Can I choose where System Status messages are displayed? Yes. The System Status messsage will always display in the Toolbar and ToolPanel but additionally you can

provide a Div (via the systemStatusContainer property in Container Options)) where it will display
specify in Notification Options for an Alert to fire when a Message is displayed
subscribe to the System Status Message Displayed Event then display messages as, when and where required

PreviousTechnical Reference NextConfiguring Messages

Framework: