Basic Alerts Demo
Alerts
Summary
- Alerts allow you to display a notification when data updates match certain conditions
- Alerts can be triggered for any change or can be scoped to specific columns.
- Alerts can specify conditions via AdaptableQL expressions.
This demo is configured with an alert that shows a notification when editing any cell.
In addition, a second alert (scoped to the salary column) shows a notification when the salary changes.
Note
If the alert is not configured with a notification property, the alert will not show a popup with the notification.
Conditional Alerts
Alerts can be configured with a condition in order to only trigger the alert when the condition is met.
The condition is specified via AdaptableQL expressions.
Defining an alert with a condition
const state: AdaptableUserState = {
alert: {
alerts: {
'salary-gt-100k': {
label: 'Alert on salary > 100k',
type: 'cellChange',
scope: {
columns: ['salary'],
},
condition: {
type: 'booleanExpression',
expression: '[salary] > 100000',
},
notification: {
display: true,
duration: 3000,
},
},
},
},
// ...
};Note
In the code above, notice we also have a scope property.
If the alert wouldn't be scoped, it would trigger a notification for any change in any cell, if the change is done in a row that has a salary greater than 100k.
Conditional Alerts
This demo is configured with an alert on the salary column that shows a notification when the salary is greater than 100k.
Listening to alerts
When an alert is defined in state, it's simply an object that lives in memory. But once a change in the data matches the conditions of the alert definition, the alert is triggered.
Alerts can be configured to show a notification when they are triggered. However, you way also want to listen to alerts and perform some action when they are triggered.
To do this, you can use the events.onAlertTrigger callback prop.
Using the onAlertTrigger event
<Adaptable.Provider
adaptableId="Basic Alerts Demo"
primaryKey="id"
events={{
onAlertTrigger: ({ alert }) => {
console.log('alert triggered', alert);
},
}}
data={dataSource}
>
<Adaptable.UI />
</Adaptable.Provider>