Flashing Cell

The Flashing Cell Function enables you to set cells to flash briefly as their contents change.

caution

Note: Flashing cell is only available for non-grouped numeric columns.

Each column that flashes has 3 properties:

  • Up Colour - Colour cell will flash when the value changes in an upward direction
  • Down Colour - Colour cell will flash when the value changes in a downward direction
  • Duration - How long (in ms) that the cell will flash for
tip

The Flashing Cells Function is a useful visual aid for fast ticking data - for less frequent updating data where you want to see (and jump to) the row which has changed use the Updated Row Function.

Flashing Cell Defaults

The Flashing Cell Predefined Config includes default options to use for Up Colour (default Green), Down Colour (default Red) and Duration (Default 500).

This can be changed at design time and will be the default values for all Flashing Cells.

Creating Flashing Cells

Columns can have Flashing Cells turned on either at design time (through Flashing Cell Predefined Config) or at run-time through the UI.

The Flashing Cell Popup facilitates creating Flashing Cells for multiple columns.

A Flashing Cell will use the Flashing Cell Defaults though this can easly be changed to allow a particular Column to have its own set of colours and duration where the defaults are not appropriate.

note

The colour picker for choosing your own colours is provided by the browser and are not part of AdapTable

Turning Flashing Cells on and off

In order to allow Custom Flashing Cells to be stored in state and also easily turned off and on, the Flashing Cell object has an IsLive property.

important

This property needs to be set to true for flashing to be active for that Column

Flashing Cells can be turned on and off in 2 ways:

  1. The Column Menu will have a menu entry for every numeric column

    note

    This will use the default values unless they have previously beeen overriden for this Column.

  2. The Popup displays a list of all numeric columns with a checkbox indicating whether Flashing is live

    tip

    If you want to enable flashing cells on every numeric column, tick the All Columns checkbox.

UI Elements

  • Popup - Shows a list of all numeric cells with those curretly 'flashing' checked; in this popup Flashing Cell colours and durations can be edited.

  • Column Menu - Turn Flashing Cell On (or 'Off') Menu Item in numeric columns will enable / disable Flashing Cell function for that Column.

Entitlements

Flashing Cell Entitlement Rules:

  • Full: Everything is available to the User

  • Hidden: Everything is hidden from the User

  • ReadOnly: User can see columns with Flashing Cell defined in Predefined Config flash but not add, edit or remove them.

Flashing Cell State

Flashing Cell Predefined Config is composed as follows:

PropertyDescriptionDefault
DefaultDurationDefault duration (in ms) that a cell will flash when it changes500
DefaultUpColorDefault colour to use for flashing when change in value is upgreen
DefautDownColorDefault colour to use for flashing when change in value is downred
FlashingCellsCollection of Flashing Cell objects which define how a numeric cell will flash when it changesEmpty Array

The Flashing Cell object is defined as follows:

PropertyDescription
ColumnIdColumn on which the flashing will take place as values change
DownColorColour cell will flash when the value changes in a downward direction
FlashingCellDurationDuration (in ms) that the cell will flash for
IsLiveSets flashing to be active for this column
UpColorColour cell will flash when the value changes in an upward direction

Flashing Cell Config Example

export default {
FlashingCell: {
FlashingCells: [
{
ColumnId: 'ChangeLastOrder',
DownColor: '#FF0000',
FlashingCellDuration: 500,
IsLive: true,
UpColor: '#008000',
},
{
ColumnId: 'ItemCost',
DownColor: '#FF0000',
FlashingCellDuration: 500,
IsLive: true,
UpColor: '#008000',
},
{
ColumnId: 'OrderCost',
DownColor: '#FF0000',
FlashingCellDuration: 500,
IsLive: true,
UpColor: '#008000',
},
{
ColumnId: 'InvoicedCost',
DownColor: '#ff6961',
FlashingCellDuration: 750,
IsLive: true,
UpColor: '#0000ff',
},
],
},
} as PredefinedConfig;

Flashing Cell API

Flashing Cell API contains a number of Flashing Cell related functions:

MethodDescription
changeFlashingCellDownColour(flashingCell, colour)Changes the Down Colour for a Flashing Cell
changeFlashingCellDuration(flashingCell, duration)Changes the Duration for a Flashing Cell
changeFlashingCellUpColour(flashingCell, colour)Changes the Up Colour for a Flashing Cell
editFlashingCell(flashingCell)Edits (replaces) existing FlashingCell
getAllFlashingCell()Gets all Flashing Cell objects in State
getAllLiveFlashingCell()Gets all Live Flashing Cells in State
getDefaultFlashingCellDownColour()Gets default Flashing Cell Down Colour
getDefaultFlashingCellDuration()Gets default Flashing Cell Duration
getDefaultFlashingCellUpColour()Gets default Flashing Cell Up Colour
getFlashingCellForColumn(colId)Gets the Flashing Cell for a ColumnId
getFlashingCellState()Retrieves Flashing Cell section from State
getLiveFlashingCellForColumn(colId)Gets the LIVE Flashing Cell for a ColumnId
setDefaultDownColour(colour)Sets the Default Down Colour
setDefaultDuration(duration)Sets the Default Duration
setDefaultUpColour(colour)Sets the Default Up Colour
showFlashingCellPopup()Opens the Flashing Cell popup screen

FAQ

Can we change the colours for a Flashing Cell column?

Yes you can choose any colours you want for both the up and down change.

Can we change the default colours?

Not at runtime. But developers can change what the default colours are which will affect all users.

Can we change the colour based on the row (e.g. depending on other values in the row, the flash will be different colours or duration)?

Not at present but its something we might add.

Can we turn on flashing for columns which dont contain numbers?

Not at present but it is something that has been requested and might well be added in a future release.

Can we add longer durations (i.e. for the flash to remain in place for 5 seconds or even until the cell is next updated)?

Not at presen though it is something we might add.

However, you might also want to look at the Updated Row function which is more suited for infrequent updates where you want to see the change remain visually on the screen for much longer.

More Information