Flashing Alerts

A common scenario in AdapTable is where users want a cell to flash briefly when it changes.

This is performed through Flashing Alerts - with the added benefit that the flash can be customised (e.g. colour, duration, trigger) to the precise requirements of each user.

note

Flashing Alerts are actually a specialised type of Alert but are addressed separately in our documentation

Flashing Alert Definition

Flashing Alerts can be provided at design time via the FlashingAlertDefinitions section of Alert Predefined Config or at runtime through the UI.

The Flashing Alert Definition object is defined as follows:

export interface FlashingAlertDefinition extends BaseAlertDefinition, FlashingAlertProperties {}

As can be seen it extends 2 interfaces, that each defines a separate area:

Base Alert Definition

This is the same Base Definition that the standard Alert uses:

PropertyDescription
RuleWhen Alert should be triggered
ScopeWhere Alert can be triggered: one, some or all columns or DataTypes

As with the Alert Definition, the Rule is the change that triggers the Alert and can either be a Predicate or an Expression. The Scope defines where changes should be listened to.

tip

For Flashing Alerts, this is typically set to Scope of a single column and a Predicate of 'Any Change' so that the column will flash whenever its value changes

important

Both Rule and Scope are fully configurable so that Flashing Alerts are triggered, instead, on custom changes

Flashing Alert Properties

The FlashingAlertProperties object defines the behaviour of the particular Flashing Alert, i.e. the Up, Down and Neutral change styles, duration and target (i.e. whether a single cell or whole row flashes):

PropertyDescriptionDefault
DownChangeStyleStyle for 'Down' value changesRed BackColour
FlashDurationDuration of Flash - can be number (in ms) or 'always'500ms
FlashTargetShould a cell or whole row flash'cell'
NeutralChangeStyleStyle for 'Neutral' value changesGray BackColour
UpChangeStyleStyle for 'Up' value changesGreen BackColour

The UpChangeStyle, DownChangeStyle and NeutralChangeStyle properties are of type Adaptable Style.

tip

Set the duration to 'always' if the cell/row should remain coloured until it is explicitly turned off by the user

note

Doing this will replicate the behaviour of the Updated Row function that was removed in Version 9

Default Flashing Properties

An alternative to setting the Flashing behaviour for each Flashing Alert Definition is to set default properties that will be used instead.

These is done via the flashingAlertDefaultProperties object in Notification Options - and uses the same FlashingAlertProperties described above.

tip

Setting default Flashing behaviour in Notification Options means it only needs to be done once

important

If this property is not provided and no properties are specified in the FlashingAlertDefinition then the AdapTable defaults are used

Priority Order

The order of priority for setting Flashing Properties is:

  1. A Flashing Alert Definition
  2. Properties provided at design-time in flashingAlertDefaultProperties in Notification Options
  3. The default properties provided by AdapTable - which are:
PropertyValue
Flash Targetfdfdf

Flashing Alert Example

export default {
Alert: {
FlashingAlertDefinitions: [
{
Scope: {
ColumnIds: ['ChangeLastOrder', 'ItemCost', 'OrderCost'],
},
UpChangeStyle: {
BackColor: '#008000',
},
DownChangeStyle: {
BackColor: '#FF0000',
},
FlashDuration: 500,
Rule: {
Predicate: {
PredicateId: 'Any',
},
},
},
{
Scope: {
ColumnIds: ['InvoicedCost'],
},
UpChangeStyle: {
BackColor: '#0000ff',
},
DownChangeStyle: {
BackColor: '#ff6961',
},
FlashDuration: 750,
Rule: {
Predicate: {
PredicateId: 'Any',
},
},
},
{
Scope: {
ColumnIds: ['Currency'],
},
Rule: {
Predicate: {
PredicateId: 'Is',
Inputs: ['USD'],
},
},
FlashDuration: 'always',
FlashTarget: 'row',
NeutralChangeStyle: {
BackColor: 'lightblue',
},
},
],
},
} as PredefinedConfig;

In this example we have created 3 Flashing Alert Definitions:

  • On ChangeLastOrder, ItemCost and OrderCost columns which will flash for half a second on any change
  • On InvoicedCost column which will flash for half a second on any change
  • The whole row with unlimited duration if the Currency column is equal to 'USD'