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 { MJTaskEntity } from '@memberjunction/core-entities';

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

Example: With full configuration

const group = new TimelineGroup<MJTaskEntity>();
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 = any>(): TimelineGroup<T>
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.
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: "standard" | "custom" = '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', 'MJ: 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: T) => TimelineEventConfig

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

Type Declaration

- (record: T): TimelineEventConfig
- Parameters
  - record: T
    The source record
  Returns TimelineEventConfig
  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: T) => string

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

Type Declaration

- (record: T): string
- Parameters
  - record: T
    The source record
  Returns string
  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: T): Date
Gets the date from a record.
Parameters
- record: T
  The source record
Returns Date
The date object
- Defined in timeline-group.ts:410

getDescription

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

getEffectiveCardConfig

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

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

getEventConfig

getEventConfig(record: T): 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 timeline-group.ts:477

getId

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

getImageUrl

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

getSubtitle

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

getTitle

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

getValue

getValue(record: T, fieldName: string): 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 timeline-group.ts:379

`Static`FromArray

FromArray<T = any>(
    data: T[],
    config: {
        color?: string;
        dateField: string;
        descriptionField?: string;
        groupLabel?: string;
        icon?: string;
        idField?: string;
        imageField?: string;
        subtitleField?: string;
        titleField: string;
    },
): 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
Returns TimelineGroup<T>
A configured TimelineGroup
Example
```
const group = TimelineGroup.FromArray(myEvents, {
  titleField: 'name',
  dateField: 'eventDate',
  descriptionField: 'details'
});
```
- Defined in timeline-group.ts:568

`Static`FromView

FromView<T = any>(
    params: {
        EntityName?: string;
        ExtraFilter?: string;
        MaxRows?: number;
        OrderBy?: string;
        [key: string]: unknown;
    },
): 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
Returns Promise<TimelineGroup<T>>
A configured TimelineGroup with loaded data
Example
```
const group = await TimelineGroup.FromView<MJTaskEntity>({
  EntityName: 'Tasks',
  ExtraFilter: "Status = 'Open'",
  OrderBy: 'DueDate DESC'
});
group.TitleFieldName = 'Name';
group.DateFieldName = 'DueDate';
```
- Defined in 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

OptionalCardConfig

DataSourceType

Default

DateFieldName

Required

OptionalDescriptionFieldName

OptionalDisplayColor

Example

DisplayColorMode

Default

OptionalDisplayIcon

Example

DisplayIconMode

Default

OptionalEntityName

Example

EntityObjects

OptionalEventConfigFunction

Type Declaration

Parameters

Returns TimelineEventConfig

Example

OptionalFilter

Example

OptionalGroupLabel

Example

OptionalIdFieldName

OptionalImageFieldName

OptionalMaxRecords

Default

OptionalOrderBy

Example

OptionalSubtitleFieldName

OptionalSummaryFunction

Type Declaration

Parameters

Returns string

Example

TitleFieldName

Required

Methods

getDate

Parameters

Returns Date

getDescription

Parameters

Returns string | undefined

getEffectiveCardConfig

Returns TimelineCardConfig

getEventConfig

Parameters

Returns TimelineEventConfig

getId

Parameters

Returns string

getImageUrl

Parameters

Returns string | undefined

getSubtitle

Parameters

Returns string | undefined

getTitle

Parameters

Returns string

getValue

Parameters

`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

`Static`FromView