Displaying Reminders in AdapTable

Summary

Reminders - essentially Alerts that fire on a Schedule

Reminders are provided by AdapTable to ensure that users don't forget important grid actions.

Essentially Reminders are Alerts, but which run according to a predefined Schedule rather than being automatically triggered by data changes.

Note

When invoked, the Reminder is converted into an Alert and displays in the Alert Toolbar, Tool Panel and Status Bar

Reminders can be set to display a Toast Notification when they run.

Reminder Message Type

Each Reminder has a MessageType property which influences how the Toast Notification will look.

There are 4 Message Types available each with a different associated colour

Message Type	Default Colour and CSS Variable
Info	var(--ab-color-info)
Success	var(--ab-color-success)
Warning	var(--ab-color-warn)
Error	var(--ab-color-error)

This defines the type (and colour) of the Notification that will be displayed.

Hint

Message Type colours are fully configurable through CSS Variables

Reminders

Fork Fork

This example has two Reminders:
1. Set to fire every weekday at 17:30 to remind the user to export data (with Message Type: Warning)
2. Set to fire 1 minutes after this demo is opened (with Message Type: Info)

Try It Out

Change the schedule in the Reminder so that it fires in 2 minutes time

import {AdaptableOptions} from '@adaptabletools/adaptable';

const today = new Date();
const todayFormatted = today.toLocaleDateString('en-US');
const nowMinutes = today.getMinutes();
const nowHours = today.getHours();
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Reminders',
  initialState: {
    Dashboard: {
      ModuleButtons: ['Schedule'],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Schedule'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Schedule: {
      Reminders: [
        {
          Name: 'Reminder-123',
          Header: "Run 'All Data' Report",
          Message: "Run the 'All Data' report so MO have full view of activity",
          MessageType: 'Warning',
          DisplayNotification: true,
          ScheduleType: 'Reminder',
          Schedule: {
            DaysOfWeek: [
              'Monday',
              'Tuesday',
              'Wednesday',
              'Thursday',
              'Friday',
            ],
            Hour: 17,
            Minute: 30,
          },
        },
        {
          Name: 'Reminder-124',
          Header: 'Reminder created one minute ago',
          Message: 'This reminder was dynamically created one minute ago',
          MessageType: 'Info',
          DisplayNotification: true,
          ScheduleType: 'Reminder',
          Schedule: {
            OneOffDate: todayFormatted,
            Hour: nowHours,
            Minute: nowMinutes + 1,
          },
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'has_projects',
            'has_pages',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Using Reminders

Reminders can be created at run-time in the AdapTable UI.

UI Step by Step Guide

Scheduling a Reminder in the Schedule Wizard

Configuring Reminders

Reminders can be configured at design-time using Schedule Initial State.

Developer Guide

Providing a Reminder in Initial Adaptable State

There are 5 stages to defining a Reminder:

// Create a Reminder of Type Warning
// The Schedule will run Monday and Friday at 17:30
// And will tell the User to run the End of Day Report
const initialState: InitialState = {
    Schedule: {
        Reminders: [
            {
                Name: "End of Day Reminder",
                Header: "Run 'End of Day' Report",
                Message: "Send the report to Middle Office",
                MessageType: 'Warning',
                DisplayNotification: true,
                ScheduleType: 'Reminder',
                Schedule: {
                    DaysOfWeek: ['Monday', 'Friday'],
                    Hour: 17,
                    Minute: 30,
                },
            },
          ],
        },
    },
};

Choose a name for the Reminder

Provide a name that is unique and identifiable.

This is how the Reminder is identified in the UI.

Provide a Reminder Header and Message

These will appear in the Alert that will be triggered, and will also be displayed in the Toast Notification (if configured).

Specify a Reminder Type

This uses the AdaptableMessageType object.

Available values are: 'Success', 'Info', 'Warning' or 'Error'; each has an associated colour: Green, Blue, Orange and Red.

Display a Toast Notification when the Reminder is Triggered

Set DisplayNotification: true to see Reminder as Toast Notification.

Note

If set to false, an Alert fires but no Notification is displayed
The Toast uses any properties set in Notification Options

Set Schedule Type to Reminder

The ScheduleType needs to be set to 'Reminder'

Create a Schedule

Specify either a one-off date or an array of days of the week

Also specify both the Hour and Minute the Reminder should appear

Setting Reminders in AdapTable

(Recorded with AdapTable v16.0)

FAQ

How do I know if the Alert is a 'real' Alert or a Reminder The Alert Fired Event is published by AdapTable each time any Alert is triggered. This specifies whether the Alert was caused by a Reminder or the Rule in an Alert Definition.

PreviousSchedules NextTechnical Reference

Framework: