AdapTable Version:

Framework:

Configuring Cell Flashing

Summary

Developers are able to set default properties for Flashing Cells
These override the AdapTable defaults and are used when turning on Flashing from the Column Menu
These defaults can themselves, in turn, be overridden, when creating a Flashing Cell Definition

Flashing, like everything in AdapTable, is highly configurable.

Setting Flashing Defaults

By default when Flashing is turned on for a column these values are used by AdapTable:

Up Change Style
Down Change Style
Neutral Change Style
Duration - 500ms
Flash Target - cell

Like with any AdapTable object, different properties can be set for a particular Flashing Cell Definition - either at runtime in the Flashing Wizard or at design time in Flashing Cell Initial State.

Those provided properties will then be used, in preference to the default values.

However, it is additionally possible for developers to set their own default values for each of these properties.

Hint

This is useful as it allows for Flashing to be turned on for a Column via the Column Menu

These "new" defaults are supplied in the Flashing Cell Options section of Adaptable Options.

Note

They will only be used if the equivalent property is not included in the Flashing Cell Definition (which takes priority)

Deep Dive

Rules of Precedence when using Flashing Cells

Default Change Styles

As noted, AdapTable provides 3 properties in Flashing Cell Options which enable developers to set the Styles for flashing changes.

All 3 properties are Adaptable Styles which is used in multiple Modules in AdapTable, and contains fore, back and border colours and a selection of font-related properties.

Caution

Unlike with other AdapTable Style use cases, you cannot provide CSS ClassNames for Flashing Cells
Instead only the provided properties of the Adaptable Style object can be used

The default for these properties as set by AdapTable is to set just one property, BackColor, as follows:

defaultUpChangeStyle - Green
defaultDownChangeStyle - Red
defaultNeutralChangeStyle - Gray

Note

As the Style object can be used in Initial State (e.g for Format Columns>) the properties use pascal, not camel, casing

defaultUpChangeStyle

Default: Green Back Colour

AdaptableStyle

The default Style to Flash a Cell when it changes in an upward direction

AdaptableStyle

Sets the default Style to use for Flashing Cells when the data change is 'up', where the current default (of BackColur of Green) is not desired.

Note

This only applies to Numeric or Date cells

The property is an Adaptable Style - which is used in multiple places in AdapTable.

// Change the default Up Style
const adaptableOptions: AdaptableOptions = {
  flashingCellOptions: {
    defaultUpChangeStyle: {
      BackColor: 'Brown',
      ForeColor: 'White',
      FontWeight: 'Bold',
    },
  },
};

defaultDownChangeStyle

Default: Red Back Colour

AdaptableStyle

The default Style to Flash a Cell when it changes in a downward direction

AdaptableStyle

Sets the default Style to use for Flashing Cells when the data change is 'down', where the current default (of BackColur of Red) is not desired.

Note

This only applies to Numeric or Date cells

The property is an Adaptable Style - which is used in multiple places in AdapTable.

// Change the default Down Style
const adaptableOptions: AdaptableOptions = {
  flashingCellOptions: {
    defaultDownChangeStyle: {
      BackColor: 'Brown',
      ForeColor: 'White',
      FontWeight: 'Bold',
    },
  },
};

defaultNeutralChangeStyle

Default: Gray Back Colour

AdaptableStyle

The default Style to Flash a Cell when it changes in a neutral direction

AdaptableStyle

Sets the default Style to use for Flashing Cells when the data change is 'neutral', where the current default (of BackColur of Gray) is not desired.

Note

This generall applies to string cells where there is no obvious 'up' or 'down' direction

The property is an Adaptable Style - which is used in multiple places in AdapTable.

// Change the default Neutral Style
const adaptableOptions: AdaptableOptions = {
  flashingCellOptions: {
    defaultNeutralChangeStyle: {
      BackColor: 'Brown',
      ForeColor: 'White',
      FontWeight: 'Bold',
    },
  },
};

Default Flash Duration

By default Cells (and Rows) will flash for half a second.

This can be changed by using the defaultFlashDuration property in Flashing Cell Options.

Either an alternative duration can be provided, or set to 'always' so the Style renders indefinitely.

defaultFlashDuration

Default: 500ms

number | 'always'

Duration of Flashing Cell

How long, by default, a Cell or Row will flash for.

Possible values are:

any number (in milliseconds) - the default is 500

// By default set Cells and Rows to flash for 1 second
const adaptableOptions: AdaptableOptions = {
  flashingCellOptions: {
    defaultFlashDuration: 1000,
  },
};

always - the flash is never removed

// By default set Cells and Rows to flash indefinitely (or until removed by user)
const adaptableOptions: AdaptableOptions = {
  flashingCellOptions: {
    defaultFlashDuration: 'always',
  },
};

Default Flash Target

By default the Target for all Flashes is the Cell that contains the changed value.

The defaultFlashTarget property in Flashing Cell Options allows the whole Row to flash by default.

defaultFlashTarget

Default: cell

row | cell

Whether default behaviour is for a Cell or the whole Row to flash

Sets the default target for Flashing Cells.

This property is used if not overridden in a Flashing Cell Definition.

Possible values are:

cell (the default)
row

// By default always Flash a Row (unless overridden in a Flashing Cell Definition)
const adaptableOptions: AdaptableOptions = {
  flashingCellOptions: {
    defaultFlashTarget: 'row',
  },
};

Changing Flashing Cell Defaults

Fork Fork

In this example we override some default Flashing Cell properties:
- New (more pastel-based) default up, down and neutral change styles are provided
- duration is increased to 1 second
These defaults are used by the Github Stars and Github Watchers Columns
However the Open Issues and Closed Issues Columns override these defaults - they provide:
- bespoke styles of Blue (up change) and Brown (down change)
- a Duration of 350ms

See the Flashing Cell Definitions

The Flashing Cell defaults are set in Flashing Cell Options:

flashingCellOptions: {
  defaultDownChangeStyle: {
    BackColor: '#e18989',
  },
  defaultUpChangeStyle: {
    BackColor: '#86d586',
  },
  defaultNeutralChangeStyle: {
    BackColor: '#c67676',
  },
  defaultFlashDuration: 1000
},

These are overridden by the Flashing Cell Styles provided in Initial Adaptable State:

initialState: {
   FlashingCell: {
    FlashingCellDefinitions: [
      {
        Name: 'Flashing_Cell_Github',
        Scope: {
          ColumnIds: ['github_stars', 'github_watchers'],
        },
        Rule: {
          BooleanExpression: 'ANY_CHANGE()',
        },
      },
      {
        Name: 'FlashingCell-2',
        Scope: {
          ColumnIds: ['open_issues_count', 'closed_issues_count'],
        },
        Rule: {
          BooleanExpression: 'ANY_CHANGE()',
        },
        UpChangeStyle: {
          BackColor: 'Blue',
          ForeColor: 'White',
        },
        DownChangeStyle: {
          BackColor: 'Brown',
          ForeColor: 'White',
        },
        FlashDuration: 350
      },
    ],
  },
},

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Flashing Options',
  flashingCellOptions: {
    defaultDownChangeStyle: {
      BackColor: '#e18989',
    },
    defaultUpChangeStyle: {
      BackColor: '#86d586',
    },
    defaultNeutralChangeStyle: {
      BackColor: '#c67676',
    },
    defaultFlashDuration: 1000,
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['FlashingCell'],
    },
    Theme: {CurrentTheme: 'dark'},
    FlashingCell: {
      FlashingCellDefinitions: [
        {
          Name: 'flashingCell-github-anyChange',
          Scope: {
            ColumnIds: ['github_stars', 'github_watchers'],
          },
          Rule: {
            BooleanExpression: 'ANY_CHANGE()',
          },
        },
        {
          Name: 'flashingCell-Issues-anyChange',
          Scope: {
            ColumnIds: ['open_issues_count', 'closed_issues_count'],
          },
          Rule: {
            BooleanExpression: 'ANY_CHANGE()',
          },
          UpChangeStyle: {
            BackColor: 'Blue',
            ForeColor: 'White',
          },
          DownChangeStyle: {
            BackColor: 'Brown',
            ForeColor: 'White',
          },
          FlashDuration: 350,
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'github_stars',
            'license',
            'github_watchers',
            'language',
            'open_issues_count',
            'closed_issues_count',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'description',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Defining Flashing Cell Rules

Cell Flashing rules can be defined at design-time via the Flashing Cell section of Initial Adaptable State.

This will ensure they are applied when the Application first loads and will be stored with Adaptable State.

In addition default values can be set for the Styles used in Flashing.

FAQ

Can we change the default colours at run-time? No, default colours can only be set at design time in Flashing Cell Options

PreviousFlashing Rows NextTechnical Reference

Framework: