Class TimelineGroup<T>

Configures a data source for the timeline component.

TimelineGroup defines how records are loaded, which fields to display, and how they should be styled. Multiple groups can be used to display different types of events on the same timeline.

Example: Basic usage with plain objects

interface MyEvent {
  id: string;
  title: string;
  eventDate: Date;
  description: string;
}

const group = new TimelineGroup<MyEvent>();
group.DataSourceType = 'array';
group.EntityObjects = myEventsArray;
group.TitleFieldName = 'title';
group.DateFieldName = 'eventDate';
group.DescriptionFieldName = 'description';

Example: MemberJunction usage with BaseEntity

import { TaskEntity } from '@memberjunction/core-entities';

const group = new TimelineGroup<TaskEntity>();
group.EntityName = 'Tasks';
group.DataSourceType = 'entity';
group.Filter = "Status = 'Open'";
group.TitleFieldName = 'Name';
group.DateFieldName = 'DueDate';

Example: With full configuration

const group = new TimelineGroup<TaskEntity>();
group.EntityName = 'Tasks';
group.TitleFieldName = 'Name';
group.DateFieldName = 'CompletedAt';
group.SubtitleFieldName = 'Category';
group.DescriptionFieldName = 'Description';
group.DisplayIcon = 'fa-solid fa-check-circle';
group.DisplayColor = '#4caf50';
group.GroupLabel = 'Completed Tasks';

group.CardConfig = {
  collapsible: true,
  defaultExpanded: false,
  summaryFields: [
    { fieldName: 'AssignedTo', label: 'Assignee', icon: 'fa-solid fa-user' },
    { fieldName: 'Priority', icon: 'fa-solid fa-flag' }
  ],
  actions: [
    { id: 'view', label: 'View', variant: 'primary' },
    { id: 'edit', label: 'Edit', variant: 'secondary' }
  ]
};

group.EventConfigFunction = (task) => ({
  icon: task.Priority === 'High' ? 'fa-solid fa-exclamation' : undefined,
  color: task.Status === 'Overdue' ? '#f44336' : undefined
});

Type Parameters

T = any
The type of the source records. Defaults to any for maximum flexibility. MemberJunction users can specify BaseEntity subclasses for full type safety.

Constructors

constructor

new TimelineGroup<T>(): TimelineGroup<T>
Type Parameters
- T = any
Returns TimelineGroup<T>

Properties

`Optional` CardConfig

CardConfig?: TimelineCardConfig

Card display configuration for this group. Defines how event cards are rendered. If not set, uses the component's defaultCardConfig.

DataSourceType

DataSourceType: "array" | "entity" = 'entity'

How data is provided to the timeline.

'array': Data is provided via the EntityObjects array (works with any object type)
'entity': Data is loaded using MemberJunction's RunView (requires MJ core)

Default

'entity'

DateFieldName

DateFieldName: string

Field name for the event date. Used for chronological ordering and date display.

Required

`Optional` DescriptionFieldName

DescriptionFieldName?: string

Field name for the description/body text. Displayed in the card body when expanded.

`Optional` DisplayColor

DisplayColor?: string

Custom color for this group's markers and accents. Only used when DisplayColorMode is 'manual'. Any valid CSS color value.

Example

'#4caf50', 'rgb(66, 135, 245)', 'var(--primary-color)'

DisplayColorMode

DisplayColorMode: "auto" | "manual" = 'auto'

Color assignment mode.

'auto': System assigns colors based on group index
'manual': Uses the color specified in DisplayColor

Default

'auto'

`Optional` DisplayIcon

DisplayIcon?: string

Custom icon class (Font Awesome). Only used when DisplayIconMode is 'custom'.

Example

'fa-solid fa-check', 'fa-regular fa-calendar'

DisplayIconMode

DisplayIconMode: "custom" | "standard" = 'standard'

Icon display mode.

'standard': Uses a default icon based on the group index
'custom': Uses the icon specified in DisplayIcon

Default

'standard'

`Optional` EntityName

EntityName?: string

The MemberJunction entity name for this group. Required when DataSourceType is 'entity'.

Example

'Tasks', 'AI Agents', 'Users'

EntityObjects

EntityObjects: T[] = []

Pre-loaded data array. Used when DataSourceType is 'array', or populated after loading when using 'entity'.

`Optional` EventConfigFunction

EventConfigFunction?: ((record) => TimelineEventConfig)

Custom function to configure individual events. Allows per-event customization of icons, colors, and actions.

Type declaration

- (record): TimelineEventConfig
- Parameters
  - record: T
    The source record
  Returns TimelineEventConfig

Returns

Configuration overrides for this event

Example

group.EventConfigFunction = (task) => ({
  icon: task.Priority === 'High' ? 'fa-solid fa-exclamation' : undefined,
  color: task.IsOverdue ? '#f44336' : undefined,
  actions: task.CanEdit ? [{ id: 'edit', label: 'Edit' }] : []
});

`Optional` Filter

Filter?: string

SQL WHERE clause filter for entity queries. Only used when DataSourceType is 'entity'.

Example

"Status = 'Open' AND Priority = 'High'"

`Optional` GroupLabel

GroupLabel?: string

Human-readable label for this group. Used in legends, headers, or when distinguishing multiple groups.

Example

'Completed Tasks', 'System Events', 'User Activities'

`Optional` IdFieldName

IdFieldName?: string

Field name for the unique record ID. Defaults to 'ID' or 'id' if not specified.

`Optional` ImageFieldName

ImageFieldName?: string

Field name containing an image URL. When set, displays an image in the card.

`Optional` MaxRecords

MaxRecords?: number

Maximum number of records to load per batch. Used for virtual scrolling.

Default

undefined (uses component's virtualScroll.batchSize)

`Optional` OrderBy

OrderBy?: string

SQL ORDER BY clause for entity queries. Only used when DataSourceType is 'entity'.

Example

'CreatedAt DESC', 'Priority ASC, DueDate DESC'

`Optional` SubtitleFieldName

SubtitleFieldName?: string

Field name for the subtitle. Displayed below the title in smaller text.

`Optional` SummaryFunction

SummaryFunction?: ((record) => string)

Custom function to generate the event summary/description. Takes precedence over DescriptionFieldName.

Type declaration

- (record): string
- Parameters
  - record: T
    The source record
  Returns string

Returns

HTML string or plain text to display

Example

group.SummaryFunction = (task) => {
  return `<strong>${task.Status}</strong>: ${task.Description}`;
};

TitleFieldName

TitleFieldName: string

Field name for the event title. This is the primary text displayed on each timeline card.

Required

Methods

getDate

getDate(record): Date
Gets the date from a record.
Parameters
- record: T
  The source record
Returns Date
The date object
- Defined in lib/timeline-group.ts:410

getDescription

getDescription(record): undefined | string
Gets the description from a record.
Parameters
- record: T
  The source record
Returns undefined | string
The description string, or undefined
- Defined in lib/timeline-group.ts:441

getEffectiveCardConfig

getEffectiveCardConfig(): TimelineCardConfig
Gets the effective card configuration, merging with defaults.

Returns TimelineCardConfig
The merged card configuration
- Defined in lib/timeline-group.ts:365

getEventConfig

getEventConfig(record): TimelineEventConfig
Gets the event configuration for a specific record.
Parameters
- record: T
  The source record
Returns TimelineEventConfig
The event configuration (from EventConfigFunction or defaults)
- Defined in lib/timeline-group.ts:477

getId

getId(record): string
Gets the ID of a record in this group.
Parameters
- record: T
  The source record
Returns string
The record ID
- Defined in lib/timeline-group.ts:389

getImageUrl

getImageUrl(record): undefined | string
Gets the image URL from a record.
Parameters
- record: T
  The source record
Returns undefined | string
The image URL, or undefined
- Defined in lib/timeline-group.ts:462

getSubtitle

getSubtitle(record): undefined | string
Gets the subtitle from a record.
Parameters
- record: T
  The source record
Returns undefined | string
The subtitle string, or undefined
- Defined in lib/timeline-group.ts:427

getTitle

getTitle(record): string
Gets the title from a record.
Parameters
- record: T
  The source record
Returns string
The title string
- Defined in lib/timeline-group.ts:399

getValue

getValue(record, fieldName): unknown
Extracts a field value from a record in this group.
Parameters
- record: T
  The source record
- fieldName: string
  The field name to extract
Returns unknown
The field value
- Defined in lib/timeline-group.ts:379

`Static` FromArray

FromArray<T>(data, config): TimelineGroup<T>
Creates a TimelineGroup from a plain array of objects.

This is a convenience method that sets up the group for array-based data.
Type Parameters
- T = any
Parameters
- data: T[]
  Array of objects to display
- config: {
      color?: string;
      dateField: string;
      descriptionField?: string;
      groupLabel?: string;
      icon?: string;
      idField?: string;
      imageField?: string;
      subtitleField?: string;
      titleField: string;
  }
  Configuration for field mappings
  - Optional color?: string
  - dateField: string
  - Optional descriptionField?: string
  - Optional groupLabel?: string
  - Optional icon?: string
  - Optional idField?: string
  - Optional imageField?: string
  - Optional subtitleField?: string
  - titleField: string
Returns TimelineGroup<T>
A configured TimelineGroup
Example
```
const group = TimelineGroup.FromArray(myEvents, {
  titleField: 'name',
  dateField: 'eventDate',
  descriptionField: 'details'
});
```
- Defined in lib/timeline-group.ts:568

`Static` FromView

FromView<T>(params): Promise<TimelineGroup<T>>
Creates a TimelineGroup from MemberJunction RunViewParams.

This is a convenience method for MemberJunction applications. It loads data immediately and returns a configured group.

Note: This method requires @memberjunction/core to be available. It will throw an error if used in non-MJ applications.
Type Parameters
- T = any
Parameters
- params: {
      EntityName?: string;
      ExtraFilter?: string;
      MaxRows?: number;
      OrderBy?: string;
      [key: string]: unknown;
  }
  RunView parameters for loading data
  - [key: string]: unknown
  - Optional EntityName?: string
  - Optional ExtraFilter?: string
  - Optional MaxRows?: number
  - Optional OrderBy?: string
Returns Promise<TimelineGroup<T>>
A configured TimelineGroup with loaded data
Example
```
const group = await TimelineGroup.FromView<TaskEntity>({
  EntityName: 'Tasks',
  ExtraFilter: "Status = 'Open'",
  OrderBy: 'DueDate DESC'
});
group.TitleFieldName = 'Name';
group.DateFieldName = 'DueDate';
```
- Defined in lib/timeline-group.ts:511

Class TimelineGroup<T>

Example: Basic usage with plain objects

Example: MemberJunction usage with BaseEntity

Example: With full configuration

Type Parameters

Index

Constructors

Properties

Methods

Constructors

constructor

Type Parameters

Returns TimelineGroup<T>

Properties

Optional CardConfig

DataSourceType

Default

DateFieldName

Required

Optional DescriptionFieldName

Optional DisplayColor

Example

DisplayColorMode

Default

Optional DisplayIcon

Example

DisplayIconMode

Default

Optional EntityName

Example

EntityObjects

Optional EventConfigFunction

Type declaration

Parameters

Returns TimelineEventConfig

Returns

Example

Optional Filter

Example

Optional GroupLabel

Example

Optional IdFieldName

Optional ImageFieldName

Optional MaxRecords

Default

Optional OrderBy

Example

Optional SubtitleFieldName

Optional SummaryFunction

Type declaration

Parameters

Returns string

Returns

Example

TitleFieldName

Required

Methods

getDate

Parameters

Returns Date

getDescription

Parameters

Returns undefined | string

getEffectiveCardConfig

Returns TimelineCardConfig

getEventConfig

Parameters

Returns TimelineEventConfig

getId

Parameters

Returns string

getImageUrl

Parameters

Returns undefined | string

getSubtitle

Parameters

Returns undefined | string

getTitle

Parameters

Returns string

`Optional` CardConfig

`Optional` DescriptionFieldName

`Optional` DisplayColor

`Optional` DisplayIcon

`Optional` EntityName

`Optional` EventConfigFunction

`Optional` Filter

`Optional` GroupLabel

`Optional` IdFieldName

`Optional` ImageFieldName

`Optional` MaxRecords

`Optional` OrderBy

`Optional` SubtitleFieldName

`Optional` SummaryFunction

`Static` FromArray

`Optional` color?: string

`Optional` descriptionField?: string

`Optional` groupLabel?: string

`Optional` icon?: string

`Optional` idField?: string

`Optional` imageField?: string

`Optional` subtitleField?: string

`Static` FromView

`Optional` EntityName?: string

`Optional` ExtraFilter?: string

`Optional` MaxRows?: number

`Optional` OrderBy?: string