Alert Forms

Summary

AdapTable Alerts can include fully defined Forms in the Notifications
These Forms can include as many inputs, buttons and other UI controls as needed

An Alert Definition can be configured so that a Toast Notification is displayed whenever the Alert fires.

By default the Notification will display the Alert's Message - the Header and Text that describe the Alert.

However, additionally, the Notification can be configured to render also an Alert Form.

This is a fully-featured, UI-rich Adaptable Form, containing multiple inputs and controls (with validation).

Hint

For uses cases where a Form is "overkill", a set of Alert Command Buttons can be configured instead

An Alert Form can only be configured by developers at design-time, and requires a 2-step process:

The Form is configured in full in the alertForms section of Alert Options
The Form is referenced by name in the AlertForm property of the Alert Definition in Alert Initial State

Find Out More

The Adaptable Form Guide has full instructions on configuring dynamic Forms with multiple inputs and validation

alertForms

AlertForm[]

Fully configured Forms to show in Alert Notifications

AlertForm[]

Alert Notifications can contain an Adaptable Form with multiple inputs and buttons.

alertForms: [
  {
    name: 'setStars',
    form: {
      fields: [
        {
          fieldType: 'number',
          label: 'Stars',
          name: 'github_stars',
        },
      ],
      buttons: [
      {
        label: 'Set',
        disabled: (_button, context) => {
          if (!context.formData?.github_stars) {
            return true;
          }
          const value = Number(context.formData?.github_stars);
          return value <= 0 || isNaN(value);
        },
        onClick: (_button, context) => {
          if (context.alert.alertType == 'cellChanged') {
            const cellChangedAlert = context.alert as AdaptableCellChangedAlert;
            const cellChangedInfo = cellChangedAlert.cellDataChangedInfo;
            const cellUpdateRequest: CellUpdateRequest = {
              columnId: cellChangedInfo.column.columnId,
              newValue: Number(context.formData?.github_stars),
              primaryKeyValue: cellChangedInfo?.primaryKeyValue,
              rowNode: cellChangedInfo?.rowNode,
            };
            context.adaptableApi.gridApi.setCellValue(cellUpdateRequest);
          }
        },
      },
      {
        label: 'Cancel',
        buttonStyle: {
          tone: 'neutral',
          variant: 'raised',
        },
        onClick: (_button, context) => {
          if (context.alert.alertType == 'cellChanged') {
            const cellChangedAlert = context.alert as AdaptableCellChangedAlert;
            const cellChangedInfo = cellChangedAlert.cellDataChangedInfo;
            const cellUpdateRequest: CellUpdateRequest = {
              columnId: 'github_stars',
              newValue: cellChangedInfo?.oldValue,
              primaryKeyValue: cellChangedInfo?.primaryKeyValue,
              rowNode: cellChangedInfo?.rowNode,
            };
            context.adaptableApi.gridApi.setCellValue(cellUpdateRequest);
          }
        },
      },
    ],
    },
  },
],

Adaptable Forms in Alerts

Fork Fork

This demo displays an Alert Form when a cell in Github Stars column is given a negative value
The Form contains 3 elements:
- a numeric input which will receive the new value for the Cell
- a Set button - which will replace the 0 in the Cell with the value provided in the input
- a Cancel Button - which will revert the Cell to its initial value

Expand to see the Alert Form definition

The Form is defined in Alert Options:

  alertOptions: {
    alertForms: [
      {
        name: 'setStars',
        form: {
          fields: [
            {
              fieldType: 'number',
              label: 'Stars',
              name: 'github_stars',
            },
          ],
          buttons: [
            {
              label: 'Set',
              disabled: (_button, context) => {
                if (!context.formData?.github_stars) {
                  return true;
                }
                const value = Number(context.formData?.github_stars);
                return value <= 0 || isNaN(value);
              },
              onClick: (_button, context) => {
                if (context.alert.alertType == 'cellChanged') {
                  const cellChangedAlert = context.alert as AdaptableCellChangedAlert;
                  const cellChangedInfo = cellChangedAlert.cellDataChangedInfo;
                  const cellUpdateRequest: CellUpdateRequest = {
                    columnId: cellChangedInfo.column.columnId,
                    newValue: Number(context.formData?.github_stars),
                    primaryKeyValue: cellChangedInfo?.primaryKeyValue,
                    rowNode: cellChangedInfo?.rowNode,
                  };
                  context.adaptableApi.gridApi.setCellValue(cellUpdateRequest);
                }
              },
            },
            {
              label: 'Cancel',
              buttonStyle: {
                tone: 'neutral',
                variant: 'raised',
              },
              onClick: (_button, context) => {
                if (context.alert.alertType == 'cellChanged') {
                  const cellChangedAlert = context.alert as AdaptableCellChangedAlert;
                  const cellChangedInfo = cellChangedAlert.cellDataChangedInfo;
                  const cellUpdateRequest: CellUpdateRequest = {
                    columnId: 'github_stars',
                    newValue: cellChangedInfo?.oldValue,
                    primaryKeyValue: cellChangedInfo?.primaryKeyValue,
                    rowNode: cellChangedInfo?.rowNode,
                  };
                  context.adaptableApi.gridApi.setCellValue(cellUpdateRequest);
                }
              },
            },
          ],
        },
      },
    ],
  },

The Alert section of initialState is configured with an Alert Definition that has an AlertForm property set to 'setStars':

Alert: {
  AlertDefinitions: [
    {
      Name: 'alert-warning',
      MessageType: 'Warning',
      MessageHeader: 'Github Stars Cannot be Negative',
      MessageText: 'Provide a new value for Github Stars, or click "Cancel" to undo',
      Scope: { ColumnIds: ['github_stars'], },
      Rule: {
        Predicates: [
          {
            PredicateId: 'Negative',
          },
        ],
      },
      AlertProperties: {
        DisplayNotification: true,
        HighlightCell: true,
      },
      AlertForm: 'setStars',
    },
  ],
},

The Notification duration is set to always so the popup can only be dismissed by the user pressing one of the two buttons in the Alert Form:

notificationsOptions: {
  // this can be a number (duration in millis) or the string 'always'
  duration: 'always',
},

Try It Out

Set a GitHub Stars cell to a negative value and see the Alert Form appear with the input and the 2 buttons
Provide a new value and click 'Set' and note how the cell updates
Click 'Cancel' and note how the cell reverts to the initial value

import {
  AdaptableCellChangedAlert,
  AdaptableOptions,
  CellDataChangedInfo,
  CellUpdateRequest,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Alert Form',
  notificationsOptions: {
    // this can be a number (duration in millis) or the string 'always'
    duration: 'always',
  },
  alertOptions: {
    alertForms: [
      {
        name: 'setStars',
        form: {
          fields: [
            {
              fieldType: 'number',
              label: 'Stars',
              name: 'github_stars',
            },
          ],
          buttons: [
            {
              label: 'Set',
              disabled: (_button, context) => {
                if (!context.formData?.github_stars) {
                  return true;
                }
                const value = Number(context.formData?.github_stars);
                return value <= 0 || isNaN(value);
              },
              onClick: (_button, context) => {
                if (context.alert.alertType == 'cellChanged') {
                  const cellChangedAlert =
                    context.alert as AdaptableCellChangedAlert;
                  const cellChangedInfo = cellChangedAlert.cellDataChangedInfo;
                  const cellUpdateRequest: CellUpdateRequest = {
                    columnId: cellChangedInfo.column.columnId,
                    newValue: Number(context.formData?.github_stars),
                    primaryKeyValue: cellChangedInfo?.primaryKeyValue,
                    rowNode: cellChangedInfo?.rowNode,
                  };
                  context.adaptableApi.gridApi.setCellValue(cellUpdateRequest);
                }
              },
            },
            {
              label: 'Cancel',
              buttonStyle: {
                tone: 'neutral',
                variant: 'raised',
              },
              onClick: (_button, context) => {
                if (context.alert.alertType == 'cellChanged') {
                  const cellChangedAlert: AdaptableCellChangedAlert =
                    context.alert as AdaptableCellChangedAlert;
                  const cellChangedInfo = cellChangedAlert.cellDataChangedInfo;
                  const cellUpdateRequest: CellUpdateRequest = {
                    columnId: 'github_stars',
                    newValue: cellChangedInfo?.oldValue,
                    primaryKeyValue: cellChangedInfo?.primaryKeyValue,
                    rowNode: cellChangedInfo?.rowNode,
                  };
                  context.adaptableApi.gridApi.setCellValue(cellUpdateRequest);
                }
              },
            },
          ],
        },
      },
    ],
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['Alert'],
      Tabs: [
        {
          Name: 'Toolbars',
          Toolbars: ['Alert'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Alert: {
      AlertDefinitions: [
        {
          Name: 'alert-github-stars',
          MessageType: 'Warning',
          MessageHeader: 'Github Stars Cannot be Negative',
          MessageText:
            'Provide a new value for Github Stars, or click "Cancel" to undo',
          Scope: {
            ColumnIds: ['github_stars'],
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'Negative',
              },
            ],
          },
          AlertProperties: {
            DisplayNotification: true,
            HighlightCell: true,
          },
          AlertForm: 'setStars',
        },
      ],
    },
    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,
        },
      ],
    },
  },
};

Framework: