Alert Behaviours

Summary

AdapTable provides many options for how an Alert should behave once it is triggered, including:
- highlighting and / or jumping to the triggering cell or row
- showing a Notification (which can include custom forms and multiple action buttons)

All Alerts, when they are triggered, will perform 2 actions:

Display in the Alert Toolbar, Tool Panel or Status Bar (including a running count of Alerts fired)
Trigger the Alert Fired Event providing full details of the Data Change and Alert Definition

But there are many other behaviours that can be set for an Alert including:

Display a Toast Notification - probably the most common Alert Behaviour: AdapTable displays a Toast Notification (with an optional Form or Action buttons) when an important Alert fires
Hint
- The default value of 3 seconds can be changed in the duration property of Notifications Options
- Set this to always to ensure notifictions need to be manually dismissed
Highlight the Cell (or Row) where the data changed that triggered the Alert
Jump to Cell (or Row) so AG Grid displays the row which contains the cell that triggered the Alert
Show the Alert details in a bespoke Div element (that you specify in Container Options)
Prevent the Cell Edit from happening when they break the rule set in the Alert Definition
Note
- This is described in more detail in Validation Alerts
Log to the Console a message detailing the Data Change and the Alert Definition

Alerts: Alert Behaviours

Fork Fork

This demo fires an Alert when any value in Github Stars column is changed.
The Alert Definition is configured with these behaviours wen the Alert is triggered:
- Highlights the Cell that triggered the Alert using the Alert's Message Type colour (here Orange for Warning)
- Highlights the Row that triggered the Alert using a custom Adaptable Style (white on purple)
- Jumps to the Cell which triggered the Alert
We set the rowHighlightDuration and cellHighlightDuration properties to 3 and 1.5 seconds respectively to see the changes better

Expand to see the Alert Definition

Set the Row and Cell Highlight Durations in Alert Options

alertOptions: {
  rowHighlightDuration: 3000,
  cellHighlightDuration: 1500,
}

Provide the Alert Definition - together with Behaviours - in Alert Initial Adaptable State

Alert: {
  AlertDefinitions: [
    {
      Name: 'alert-any-change',
      MessageType: 'Warning',
      Scope: {
        ColumnIds: ['github_stars'],
      },
      Rule: {
        BooleanExpression: 'ANY_CHANGE()',
      },
      AlertProperties: {
        HighlightCell: true, // will highlight it using the Alert's Message Type
        HighlightRow: {
          BackColor: 'Purple',
          ForeColor: 'White',
        },
        JumpToCell: true,
      },
    },
  ],
},

Try It Out

Click the Update First Row or Update Last Row Custom Toolbar Buttons to trigger the Alert and see the Behaviours

import {
  CellUpdateRequest,
  CustomRenderContext,
} from '@adaptabletools/adaptable';
import {
  AdaptableButton,
  AdaptableOptions,
  CustomToolbarButtonContext,
} from '@adaptabletools/adaptable';
import {IRowNode} from 'ag-grid-enterprise';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Alert Behaviours',
  alertOptions: {
    rowHighlightDuration: 3000,
    cellHighlightDuration: 1500,
  },
  dashboardOptions: {
    customToolbars: [
      {
        name: 'ButtonToolbar',
        title: 'Buttons',
        toolbarButtons: [
          {
            label: 'Update First Row',
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              const primaryKeyValue = 10270250; // 43695474
              const firstNode: IRowNode =
                context.adaptableApi.gridApi.getRowNodeForPrimaryKey(
                  primaryKeyValue
                );
              const githubStars = firstNode.data['github_stars'];
              const cellUpdateRequest: CellUpdateRequest = {
                columnId: 'github_stars',
                newValue: githubStars + 1,
                primaryKeyValue: primaryKeyValue,
                rowNode: firstNode,
              };
              context.adaptableApi.gridApi.setCellValue(cellUpdateRequest);
            },
            buttonStyle: {
              tone: 'accent',
              variant: 'raised',
            },
          },
          {
            label: 'Update Last Row',
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              const primaryKeyValue = 43695474;
              const lastNode: IRowNode =
                context.adaptableApi.gridApi.getRowNodeForPrimaryKey(
                  primaryKeyValue
                );
              const githubStars = lastNode.data['github_stars'];
              const cellUpdateRequest: CellUpdateRequest = {
                columnId: 'github_stars',
                newValue: githubStars + 1,
                primaryKeyValue: primaryKeyValue,
                rowNode: lastNode,
              };

              context.adaptableApi.gridApi.setCellValue(cellUpdateRequest);
            },

            buttonStyle: {
              tone: 'info',
              variant: 'text',
            },
          },
        ],
      },
      {
        name: 'BespokeRenderingToolbar',
        title: 'Bespoke Rendering',
        render: (customRenderContext: CustomRenderContext) => {
          if (customRenderContext.phase === 'onMount') {
            return `
              <label>Number of agents: <input type="text" /></label>
            `;
          }
          return null;
        },
      },
    ],
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['Alert'],
      Tabs: [
        {
          Name: 'Toolbars',
          Toolbars: ['Alert', 'ButtonToolbar'],
        },
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Alert'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Alert: {
      AlertDefinitions: [
        {
          Name: 'alert-any-change',
          MessageType: 'Warning',
          Scope: {
            ColumnIds: ['github_stars'],
          },
          Rule: {
            BooleanExpression: 'ANY_CHANGE()',
          },
          AlertProperties: {
            HighlightCell: true, // will highlight it with Message Type
            HighlightRow: {
              BackColor: 'Purple',
              ForeColor: 'White',
            },
            JumpToCell: true,
          },
        },
      ],
    },
    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,
        },
      ],
    },
  },
};

PreviousAlert Message NextConfiguring Alerts

Framework:

Alert Behaviours

Summary

Hint

Note

Expand to see the Alert Definition