Data Change History Buttons

Summary

Buttons can be added to Data Change History Monitor

Change History Button

The Data Change History Options also includes a changeHistoryButton property.

This allows developers to provide their own, custom, Button(s) where additional functionality is required.

Note

When this button is provided, AdapTable automatically displays an Action Column to contain these buttons

You can then wire up these Buttons to perform custom actions (e.g. 'Undo' or 'ShowMe')

changeHistoryButton

DataChangeHistoryButton

Action Button to display in each row in Data Changes Monitor - can implement undo functionality

DataChangeHistoryButton

Definition of a Button (or Buttons) which can be added to each row in the Data Changes Monitor.

It is most commonly used to add Undo functionality (using the action property which can directly be set to 'undo').

Hint

When the Undo Action is set, there is no need for developers to wire it up themselves

const adaptableOptions: AdaptableOptions = {
  dataChangeHistoryOptions: {
    changeHistoryButton: [
      {
        action: 'undo',
        label: 'Undo',
        buttonStyle: {
          variant: 'raised',
          tone: 'accent',
        },
      },
    ],
  },
};

However the button can also be used to provide custom functionality via its onClick property:

const adaptableOptions: AdaptableOptions = {
  dataChangeHistoryOptions: {
    changeHistoryButton: [
      {
        label: "Publish to Support",
        onClick: (button, context) => {
          // Tell support about this Edit
        },
        buttonStyle: {
          variant: 'raised',
          tone: 'accent',
        },
      },
    ],
  },
};

Button Actions

Data Change History Buttons are often used to perform 2 actions:

Undo the data change which is being displayed
Clear the row in the Change History Monitor so its no longer visible

For this reason AdapTable provides 2 associated convencience Actions - Undo and Clear.

These actions can be attached directly to the Button and AdapTable will perform the necessary actions.

Data Change History: Button Actions

Fork Fork

This demo showcases Data Change History with 2 Buttons - each attached to an Action
- The Undo button is wired to the undo action
- The Clear button is wired to the clear action

Expand to see the Action Buttons provided

dataChangeHistoryOptions: {
  activeByDefault: true,
  changeHistoryButton: [
    {
      action: 'undo',
      label: (button, context) => {
        return context.isGroupNode ? 'Undo Group' : 'Undo';
      },
      buttonStyle: {
        variant: 'raised',
        tone: 'accent',
      },
    },
    {
      action: 'clear',
      label: 'Clear',
      buttonStyle: {
        variant: 'outlined',
        tone: 'neutral',
      },
    },
  ],
},

Undo Button

Alternatively, developers might want to provide their own Undo button implementation.

For instance, instead of undoing the edit directly they might want to send it to a backend process to manage, or becasue they want to illustrate the changed cell in the Grid in some way.

The actual undo functionality itself does not need to be provided since AdapTable includes a very helpful undoDataChange() function property in the Context object.

Data Change History: Undo Button

Fork Fork

This demo showcases Data Change History with an Undo Button
We call context.undoDataChange() in the button's onClick property to effect the change

Expand to see the Button provided

dataChangeHistoryOptions: {
  activeByDefault: true,
  changeHistoryButton: [
    {
      label: (button, context) => {
        return context.isGroupNode ? 'Undo Group' : 'Undo';
      },
      onClick: (button, context) => {
        context.undoDataChange();
      },
      buttonStyle: {
        variant: 'raised',
        tone: 'accent',
      },
    },
  ],
},

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Data Change History Undo Button',
  dataChangeHistoryOptions: {
    activeByDefault: true,
    changeHistoryButton: [
      {
        label: (button, context) => {
          return context.isGroupNode ? 'Undo Group' : 'Undo';
        },
        onClick: (button, context) => {
          context.undoDataChange();
        },
        buttonStyle: {
          variant: 'raised',
          tone: 'accent',
        },
      },
      {
        label: (button, context) => {
          return 'Highlight';
        },
        onClick: (button, context) => {
          if (context.isGroupNode) {
            return;
          }

          const cellHighlightInfo: CellHighlightInfo = {
            columnId: context.dataChangedInfo.column.columnId,
            primaryKeyValue: context.dataChangedInfo.primaryKeyValue,
            timeout: 3000,
            highlightStyle: {
              BackColor: 'Yellow',
            },
          };
          context.parentAdapTableApi.gridApi.highlightCell(cellHighlightInfo);
        },
        buttonStyle: {
          variant: 'raised',
          tone: 'info',
        },
      },
    ],
  },
  initialState: {
    Dashboard: {
      Tabs: [
        {
          Name: 'Data Change',
          Toolbars: ['DataChangeHistory'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-updated_at',
          Scope: {
            ColumnIds: ['updated_at'],
          },
          DisplayFormat: {
            Formatter: 'DateFormatter',
            Options: {
              Pattern: 'HH:mm:ss',
            },
          },
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'github_stars',
            'language',
            'github_watchers',
            'updated_at',
            'description',
            'created_at',
            'has_wiki',
            'pushed_at',
            'open_issues_count',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

PreviousData Change History NextConfiguring Data Change History