Member Junction
    Preparing search index...

    Interface TimelineCardConfig

    Configuration for how timeline cards are displayed. Can be set at the group level (applies to all events in group) or overridden per-event via EventConfigFunction.

    const cardConfig: TimelineCardConfig = {
      showIcon: true,
      showDate: true,
      dateFormat: 'MMM d, yyyy h:mm a',
      collapsible: true,
      defaultExpanded: false,
      descriptionMaxLines: 3,
      summaryFields: [
        { fieldName: 'Status', icon: 'fa-solid fa-circle' },
        { fieldName: 'Priority', icon: 'fa-solid fa-flag' }
      ],
      actions: [
        { id: 'view', label: 'View', variant: 'primary' },
        { id: 'edit', label: 'Edit', variant: 'secondary' }
      ]
    };
    interface TimelineCardConfig {
        actions?: TimelineAction[];
        actionsOnHover?: boolean;
        allowHtmlDescription?: boolean;
        collapsible?: boolean;
        cssClass?: string;
        dateFormat?: string;
        defaultExpanded?: boolean;
        descriptionField?: string;
        descriptionMaxLines?: number;
        expandedFields?: TimelineDisplayField[];
        imageField?: string;
        imagePosition?: ImagePosition;
        imageSize?: ImageSize;
        maxWidth?: string;
        minWidth?: string;
        showDate?: boolean;
        showIcon?: boolean;
        showSubtitle?: boolean;
        summaryFields?: TimelineDisplayField[];
    }
    Index

    Properties

    actions? actionsOnHover? allowHtmlDescription? collapsible? cssClass? dateFormat? defaultExpanded? descriptionField? descriptionMaxLines? expandedFields? imageField? imagePosition? imageSize? maxWidth? minWidth? showDate? showIcon? showSubtitle? summaryFields?

    Properties

    actions?: TimelineAction[]

    Action buttons to display at the bottom of the card.

    actionsOnHover?: boolean

    If true, actions are only visible on hover/focus.

    false
    allowHtmlDescription?: boolean

    Whether to render HTML in the description. WARNING: Only enable if content is trusted to prevent XSS.

    false
    collapsible?: boolean

    Whether this card can be expanded/collapsed.

    true
    cssClass?: string

    Additional CSS class(es) to apply to the card container.

    dateFormat?: string

    Date format string (Angular DatePipe format).

    'MMM d, yyyy'

    'short', 'medium', 'MMM d, yyyy h:mm a'
    defaultExpanded?: boolean

    Whether the card starts in expanded state.

    false
    descriptionField?: string

    Field name for the description/body text. If not set, uses the group's DescriptionFieldName.

    descriptionMaxLines?: number

    Maximum number of lines to show before truncating. Set to 0 for no limit.

    3
    expandedFields?: TimelineDisplayField[]

    Fields to display only when the card is expanded. These appear in the detail section below the description.

    imageField?: string

    Field name containing the image URL. If not set, no image is displayed.

    imagePosition?: ImagePosition

    Position of the image within the card.

    • left: Image on the left side of the header
    • top: Image above the content (full width)
    • none: No image displayed
    'left'
    imageSize?: ImageSize

    Size preset for the image.

    • small: 48x48px
    • medium: 80x80px
    • large: 120x120px
    'small'
    maxWidth?: string

    Maximum width for the card.

    '400px'
    minWidth?: string

    Minimum width for the card.

    '200px', '15rem'
    showDate?: boolean

    Whether to show the date in the card header.

    true
    showIcon?: boolean

    Whether to show the icon in the card header.

    true
    showSubtitle?: boolean

    Whether to show the subtitle below the title.

    true
    summaryFields?: TimelineDisplayField[]

    Fields to always display (even when collapsed). These appear as compact field:value pairs.

    Settings

    Member Visibility

    On This Page

    Properties