Row Change Alerts

Summary

Row Change Alerts are Alerts which can be fired when the Rows in the Grid change
This can be either when:
- a new Row is added to AG Grid
- an existing Row is deleted from AG Grid

AdapTable offers 2 Alerts which fire in response to changes in the number of rows in AG Grid's data source:

ROW_ADDED - wraps the ROW_ADDED Observable Expression Function
ROW_REMOVED - wraps the ROW_REMOVED Observable Expression Function

Note

These are both specialised types of Observable Alert which look for changes in the Grid or given rows

Caution

When defining the Alert in Initial State, the Scope in the Alert Definition should be set to All

Added Row Alert

The ROW_ADDED Expression can be used to create an Observable Alert which will fire each time a new row is added to AG Grid.

Hint

If adding the new row programatically, use Grid API's' addGridData function (see Managing Row Data for more info)
Don't directly use applyTransaction (or applyTransactionAsync) in AG Grid's API as it bypasses new row detection

Alerts: Row Added

Fork Fork

This demo has a ROW_ADDED Alert which fires when a now row is added to the Grid
We added a Highlight Row Behaviour to easily see which Row was added
The new Row can be added to the Grid in 2 ways:
- Clicking a Custom Dashboard button that then invokes the addGridData method in Grid API
- Providing an Action Column Command button of create which opens the Create Row Form

Try It Out

You can mimic adding a new Row in one of 2 ways - both of which will trigger the Alert:
- Click the Add Python Row Dashboard Button
- Click the Create Button (which automatically displays an empty Row Form allowing you easily to add the new Row)

import {
  AdaptableButton,
  AdaptableColumn,
  AdaptableOptions,
  DashboardButtonContext,
  DataUpdateConfig,
  RowFormColumnContext,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export default function createPython(): WebFramework {
  return {
    id: Math.floor(Math.random() * (1000000 - 5000 + 1) + 200000),
    name: 'python',
    description: 'A very popular language.',
    created_at: new Date().toDateString(),
    updated_at: new Date().toDateString(),
    pushed_at: new Date().toDateString(),
    github_stars: 5000,
    language: 'Python',
    open_issues_count: 750,
    license: 'MIT License',
    github_watchers: 6671,
    topics: ['duck typing', 'proxies', 'prerformance', 'solid'],
    has_projects: true,
    has_wiki: true,
    has_pages: false,
    closed_issues_count: 12326,
    open_pr_count: 749,
    closed_pr_count: 1708,
    week_issue_change: 15,
  };
}

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Row Added Alert',
  actionColumnOptions: {
    actionColumns: [
      {
        columnId: 'action',
        friendlyName: 'Actions',
        actionColumnButton: [
          {
            command: 'create',
          },
        ],
      },
    ],
  },
  rowFormOptions: {
    setPrimaryKeyValue: context => {
      return {
        ...context.rowData,
        id: context.adaptableApi.gridApi.getRowCount() + 1,
      };
    },
    includeColumnInRowForm: (rowFormColumnContext: RowFormColumnContext) => {
      const column: AdaptableColumn = rowFormColumnContext.adaptableColumn;
      return column.columnTypes?.includes('actionColumn') ||
        column.columnId == 'id'
        ? false
        : true;
    },
  },
  dashboardOptions: {
    customDashboardButtons: [
      {
        label: 'Add Python Row',
        buttonStyle: {
          tone: 'neutral',
          variant: 'outlined',
        },
        onClick: (
          _button: AdaptableButton<DashboardButtonContext>,
          context: DashboardButtonContext
        ) => {
          const python: WebFramework = createPython();
          const dataUpdateConfig: DataUpdateConfig = {
            runAsync: true,
            addIndex: 0,
          };
          context.adaptableApi.gridApi.addGridData([python], dataUpdateConfig);
        },
      },
    ],
  },
  notificationsOptions: {
    position: 'TopCenter',
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['Alert'],
      Tabs: [
        {
          Name: 'Toolbars',
          Toolbars: ['Alert'],
        },
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Alert'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Alert: {
      AlertDefinitions: [
        {
          Name: 'alert-row-added',
          Rule: {
            ObservableExpression: 'ROW_ADDED()',
          },
          MessageType: 'Success',
          MessageHeader: 'You added a row',
          MessageText: 'Hey! A row was added',
          Scope: {
            All: true,
          },
          AlertProperties: {
            DisplayNotification: true,
            HighlightRow: {
              BackColor: 'Purple',
              ForeColor: 'White',
            },
          },
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'action',
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'topics',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Added Row Conditional Alert

Because ROW_ADDED is an Observable Alert, it can be provided with an additional WHERE clause.

This specifies when the Alert should fire (ie. what extra requirement is available)

Caution

If creating a Conditional Row Changed Alert in the UI, you will need to select the, fuller, Observable Alert option
This option contains a stop that renders the Expression Editor which is where the WHERE clause can be added

Alerts: Row Added with WHERE

Fork Fork

This demo contains an Add Row Warning Alert but the Rule has a WHERE clause in the Expression, specifying the Alert should only fire when the new Row:
- has a Language of TypeScript
- and Has Wiki is true
We have added a Dashboard Button which opens an Add Row Form to enable the new row to be added

Try It Out

Click the 'Add New Row' Button in the Dashboard to open an Add Row Form
Provide any Name, select 'TypeScript' for Lanugage and check Has Wiki and click Save
The new Row will be added to the Grid and the Alert will fire

import {
  AdaptableButton,
  AdaptableOptions,
  DashboardButtonContext,
} from '@adaptabletools/adaptable';

import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Row Added Alert with WHERE',
  adaptableStateKey: `${Date.now()}`,
  editOptions: {
    showSelectCellEditor: context => {
      return context.column.columnId === 'language';
    },
  },

  rowFormOptions: {
    setPrimaryKeyValue: context => {
      return {
        ...context.rowData,
        id: context.adaptableApi.gridApi.getRowCount() + 1,
      };
    },
  },
  dashboardOptions: {
    customDashboardButtons: [
      {
        label: 'Add New Row',
        onClick: (
          button: AdaptableButton<DashboardButtonContext>,
          context: DashboardButtonContext
        ) => {
          context.adaptableApi.rowFormApi.displayCreateRowForm();
        },
        buttonStyle: {
          variant: 'raised',
          tone: 'info',
        },
      },
    ],
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: ['name', 'language', 'license', 'has_wiki'],
        },
      ],
    },
    Dashboard: {
      ModuleButtons: ['Alert'],
      Tabs: [
        {
          Name: 'Toolbars',
          Toolbars: ['Alert'],
        },
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Alert'],
        },
      ],
    },
    Alert: {
      AlertDefinitions: [
        {
          Name: 'alert-row-added-where-language',
          MessageType: 'Warning',
          Scope: {All: true},
          Rule: {
            ObservableExpression:
              "ROW_ADDED() WHERE [language] = 'TypeScript' AND [has_wiki] = TRUE ",
          },
          AlertProperties: {
            DisplayNotification: true,
            HighlightRow: {
              BackColor: 'White',
              ForeColor: 'Black',
            },
          },
        },
      ],
    },
  },
};

Removed Row Alert

Another commonly used Observable Alert requirement is row removal, ie. to fire an Alert when rows have been from the Grid.

The ROW_REMOVED Expression can be used to create an Observable Alert which will fire each time a Row is removed from AG Grid.

Alerts: Row Removed

Fork Fork

This example fires a ROW_REMOVED Observable Alert when a row is deleted (which we do via an Action Column Command delete button)
We provided a custom message for the Alert Notification via the alertMessageText property in Alert Options

Try It Out

Click the 'delete' Action Column Command button and note the Row is deleted and an Alert is fired

import {AdaptableOptions, AlertMessageContext} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Row Deleted Alert',
  notificationsOptions: {
    position: 'BottomCenter',
  },
  actionColumnOptions: {
    actionColumns: [
      {
        columnId: 'action',
        friendlyName: 'Delete',
        actionColumnButton: {
          command: 'delete',
        },
      },
    ],
  },
  alertOptions: {
    alertMessageText: (alertMessageContext: AlertMessageContext) => {
      if (
        alertMessageContext.rowDataChangedInfo &&
        alertMessageContext.rowDataChangedInfo.rowTrigger == 'Delete'
      ) {
        const deletedRow = alertMessageContext.rowDataChangedInfo.dataRows[0];
        if (deletedRow) {
          return 'You deleted: ' + deletedRow.name;
        }
      }
      return undefined;
    },
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['Alert'],
      Tabs: [
        {
          Name: 'Toolbars',
          Toolbars: ['Alert'],
        },
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Alert'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Alert: {
      AlertDefinitions: [
        {
          Name: 'alert-row-deleted',
          Rule: {
            ObservableExpression: 'ROW_REMOVED()',
          },
          AlertProperties: {
            DisplayNotification: true,
          },
          MessageType: 'Info',
          Scope: {
            All: true,
          },
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'topics',
            'action',
          ],
          ColumnPinning: {
            action: 'right',
          },
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

PreviousRelative Change Alerts NextAggregation Alerts

Framework: