> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/lwc-components/data-driven-components/timeline.md).
# Timeline
`avonni-dd-timeline`
The Avonni Data Driven Timeline displays records in a timeline view.
## Overview
**Timeline** is a data-driven Lightning Web Component that displays records in a chronological timeline view, placing each item on a time axis by its date.
The Timeline works in two modes. In **query mode**, you provide a `query` and a `mapping`, and the component fetches records and maps their fields to timeline items automatically—complete with filters, search, pagination, and header actions. In **static mode**, you pass a fixed array of `items` directly; the component then ignores `query` and `mapping` and renders exactly what you give it.
### Use Cases
* **Activity history:** Show Tasks, Events, or other activities for a record in chronological order.
* **Project milestones:** Display a fixed set of milestones with status and custom icons.
* **Account or contact timelines:** Surface related records ordered by their created or activity date.
* **Release roadmaps:** Render planned releases grouped by month or year.
* **Audit trails:** Present a paginated, searchable history of changes.
* **Case lifecycles:** Track the progression of a case across key dated events.
***
## Use Case Examples
### Example 1: Query mode
**Scenario:** Display a record's Tasks in a vertical timeline grouped by month, with search, filters, pagination, and per-item actions.
```html
```
```js
// taskTimeline.js
import { LightningElement } from 'lwc';
export default class TaskTimeline extends LightningElement {
taskQuery = {
objectApiName: 'Task',
orderBy: 'ActivityDate DESC',
limit: 50
};
taskMapping = {
label: '{{Record.Subject}}',
name: '{{Record.Id}}',
description: '{{Record.Description}}',
startDate: '{{Record.ActivityDate}}'
};
taskFields = ['Status', 'Priority'];
taskFilters = ['Status', 'Priority'];
taskSearchFields = ['Subject'];
itemDateFormat = { format: 'custom', custom: 'LLLL dd, yyyy' };
orientationAttributes = {
groupBy: 'month',
groupByAttributes: { collapsible: true }
};
actions = [
{ label: 'See more', name: 'seeMore', iconName: 'utility:preview' },
{ label: 'Delete', name: 'delete', iconName: 'utility:delete' }
];
handleItemClick(event) {
const { item, itemSObject } = event.detail; // mapped item + raw record
}
handleActionClick(event) {
const { name, item, itemSObject } = event.detail;
}
handleError(event) {
const message = event.detail.message;
}
}
```
**Result:** A vertical, collapsible timeline of Task records grouped by month. Each item shows the Subject, Description, Status, and Priority, with search, filters, pagination, and a "See more"/"Delete" action menu. Clicking an item or action fires the corresponding event with both the mapped item and the raw record.
### Example 2: Static mode
**Scenario:** Render a fixed release roadmap from a hardcoded array of milestones—no query needed.
```html
```
```js
// releaseTimeline.js
import { LightningElement } from 'lwc';
export default class ReleaseTimeline extends LightningElement {
items = [
{
label: 'Kickoff',
name: 'kickoff',
description: 'Project kickoff and scope definition.',
startDate: '2024-01-15T09:00:00.000Z',
iconName: 'utility:event'
},
{
label: 'Beta release',
name: 'beta-release',
description: 'First beta shipped to pilot customers.',
startDate: '2024-03-22T16:30:00.000Z',
hasCheckbox: true,
iconName: 'utility:upload'
},
{
label: 'GA release',
name: 'ga-release',
description: 'General availability launch.',
startDate: '2024-05-01T08:00:00.000Z',
isActive: true,
iconName: 'utility:success'
}
];
itemDateFormat = { format: 'custom', custom: 'LLLL dd, yyyy' };
orientationAttributes = {
groupBy: 'month',
groupByAttributes: { collapsible: true }
};
actions = [
{ label: 'See more', name: 'seeMore', iconName: 'utility:preview' }
];
handleSelect(event) {
const { item, selected, selectedItemsNames } = event.detail;
}
}
```
**Result:** A vertical timeline of three milestones grouped by month with custom icons. The Beta release item shows a selection checkbox, and the GA release item is marked active. Because no query runs, `itemSObject` is `null` in the events.
***
## Specifications
### Attributes
| Name | Description | Type | Default | Required |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | -------------- | -------- |
| `actions` | Array of actions. They are displayed at the top right of each item. | DdTimelineAction\[] | — | |
| `allow-item-click` | If true, the timeline items are displayed as clickable, and a click on an item fires the `itemclick` event. | Boolean | `false` | |
| `fields` | Array of field API names that belong to the queried object. The fields will be displayed in the timeline items, with their corresponding values. | string\[] | — | |
| `fields-attributes` | Object defining the fields layout. | DdTimelineFieldsAttributes | — | |
| `filters` | Array of field API names that belong to the queried object. These fields will be displayed as user filters. | string\[] | — | |
| `filters-attributes` | Object defining the filters-specific attributes. | DdElementFiltersAttributes | — | |
| `header-actions` | Array of actions to display at the top right of the header. On click on a header action, the `headeractionclick` event is fired. | DdElementAction\[] | — | |
| `header-avatar` | Avatar displayed at the top left of the header. | DdElementAvatar | — | |
| `header-caption` | Header caption, displayed above the title. | String | — | |
| `header-help-text` | If present, a help text icon is displayed next to the header title. On focus or hover on the icon, the header help text is displayed in a tooltip. | String | — | |
| `header-help-text-attributes` | Object defining the help text-specific attributes. | DdElementHelpTextAttributes | — | |
| `header-title` | Main title displayed in the header. | String | — | |
| `header-visible-actions-count` | Number of header actions that appear as regular buttons. Remaining actions appear in a dropdown menu. | integer | — | |
| `hide-no-results-image` | If true, the image displayed when the query returns no results is hidden. | Boolean | `false` | |
| `hide-no-results-message` | If true, the message displayed when the query returns no results is hidden. | Boolean | `false` | |
| `item-date-format` | Object defining the item date format. | DdTimelineItemDateFormat | — | |
| `item-icon-size` | The size of the icon. Valid values are `xx-small`, `x-small`, `small`, `medium` and `large`. | String | `"small"` | |
| `items` | Array of static items displayed in the timeline. When this property is set, the timeline ignores the `query` and `mapping` properties and displays the items directly. | DdTimelineItem\[] | — | |
| `items-per-page` | If the pagination is enabled, number of items per page. Otherwise, number of items loaded at once. | integer | `100` | |
| `mapping` | Object defining the way the records returned by the query should be mapped to the timeline item properties. To insert the value of a field, use the syntax `{{Record.FieldApiName}}`. For example, to use the value of the Name field, use `{{Record.Name}}`. | DdTimelineMapping | — | |
| `no-results-message` | Message displayed when the query returns no results. | String | — | |
| `orientation` | Orientation of the activity timeline. Valid values are `vertical` and `horizontal`. | String | `"horizontal"` | |
| `orientation-attributes` | Object defining the orientation-specific attributes. | DdTimelineOrientationAttributes | — | |
| `pagination-attributes` | Object defining the pagination-specific attributes. | DdElementPaginationAttributes | — | |
| `query` | Definition of the query to execute to get the records that will be mapped. | DdElementQuery | — | |
| `refresh-emp` | Object describing a platform event that should be subscribed to in order to refresh the component when an event is published. | DdElementRefreshEmp | — | |
| `search-attributes` | Object defining the search-specific attributes. | DdElementSearchAttributes | — | |
| `search-fields` | Array of field API names that can be used by the search box to filter the records. The fields must belong to the queried object, and they must be filterable. | string\[] | — | |
| `selected-items-names` | Array of selected item names. These represent the unique names of items that are currently selected in the timeline. Updated automatically when items are selected or unselected. | string\[] | — | |
| `show-pagination` | If true, a pagination is displayed at the bottom of the timeline. If false and the timeline has a height limit, the items will be loaded dynamically as the user scrolls. If false and the timeline does not have a height limit, a "show more" button will be displayed at the bottom of the timeline. | Boolean | `false` | |
| `side-panel-attributes` | Object defining the side panel-specific attributes. | DdElementSidePanelAttributes | — | |
### Mapping
In query mode, `mapping` tells the Timeline how to turn each queried record into an item. Insert a field value with the `{{Record.FieldApiName}}` syntax.
| Mapping key | Maps to |
| ------------- | ------------------------------------------------------------------ |
| `label` | Item title. |
| `name` | Unique item identifier (usually `{{Record.Id}}`). **Required.** |
| `description` | Item description text. |
| `startDate` | Date used to position the item on the timeline. |
| `endDate` | Optional end date of the item. |
| `avatar` | Avatar object (`src`, `initials`, `fallbackIconName`, `presence`). |
| `hasCheckbox` | If true, shows a selection checkbox before the item label. |
| `href` | URL the item links to. |
| `linkify` | If true, links the label to the record page (overrides `href`). |
| `isActive` | If true, marks the item as active. |
```js
const TASK_MAPPING = {
label: '{{Record.Subject}}',
name: '{{Record.Id}}',
description: '{{Record.Description}}',
startDate: '{{Record.ActivityDate}}'
};
```
### Methods
| Name | Description | Argument Name | Argument Type | Argument Description |
| --------- | ------------------------------------------------------------- | ------------------- | ------------- | ----------------------------------------------------------------- |
| `refresh` | Refresh the query and the records displayed in the component. | `stayOnCurrentPage` | Boolean | If true, the component will refresh but stay on the current page. |
### Custom Events
#### `actionclick`
Event fired when an item action is clicked.
The `actionclick` event returns the following parameters.
| Parameter | Type | Description |
| ------------- | ------ | -------------------------------------------------------------------------------------------------------------------------- |
| `name` | string | Name of the action clicked. |
| `item` | object | Timeline item the action belongs to, with the mapped `label`, `name`, `description`, `startDate` and `endDate` properties. |
| `itemSObject` | object | Record corresponding to the item the action belongs to. In static mode, no record is associated and this is `null`. |
The event properties are as follows.
| Property | Value | Description |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles | false | This event does not bubble. |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed | false | This event does not propagate outside of the component in which it was dispatched. |
#### `error`
The event fired when an error occurs in the component.
The `error` event returns the following parameters.
| Parameter | Type | Description |
| --------- | ------ | --------------------- |
| `message` | string | Message of the error. |
The event properties are as follows.
| Property | Value | Description |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles | false | This event does not bubble. |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed | false | This event does not propagate outside of the component in which it was dispatched. |
#### `filter`
The event fired when the user filters the records.
The `filter` event returns the following parameters.
| Parameter | Type | Description |
| --------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `value` | object | Object containing the filters applied by the user. Its keys correspond to the field API names of the selected filters. The values are arrays of strings, corresponding to the values selected for the filter. |
The event properties are as follows.
| Property | Value | Description |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles | false | This event does not bubble. |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed | false | This event does not propagate outside of the component in which it was dispatched. |
#### `headeractionclick`
The event fired when a header action is clicked.
The `headeractionclick` event returns the following parameters.
| Parameter | Type | Description |
| --------- | ------ | --------------------------- |
| `name` | string | Name of the action clicked. |
The event properties are as follows.
| Property | Value | Description |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles | false | This event does not bubble. |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed | false | This event does not propagate outside of the component in which it was dispatched. |
#### `itemclick`
Event fired when an item is clicked.
The `itemclick` event returns the following parameters.
| Parameter | Type | Description |
| ------------- | ------ | --------------------------------------------------------------------------------------------------------------------- |
| `item` | object | Timeline item that was clicked, with the mapped `label`, `name`, `description`, `startDate` and `endDate` properties. |
| `itemSObject` | object | Record corresponding to the item that was clicked. In static mode, no record is associated and this is `null`. |
The event properties are as follows.
| Property | Value | Description |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles | false | This event does not bubble. |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed | false | This event does not propagate outside of the component in which it was dispatched. |
#### `nbitemschange`
The event fired when the number of items displayed in the component changes.
The `nbitemschange` event returns the following parameters.
| Parameter | Type | Description |
| --------- | ------- | ------------------------------------------- |
| `value` | integer | Number of items displayed in the component. |
The event properties are as follows.
| Property | Value | Description |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles | false | This event does not bubble. |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed | false | This event does not propagate outside of the component in which it was dispatched. |
#### `pagechange`
The event fired when the page changes.
The `pagechange` event returns the following parameters.
| Parameter | Type | Description |
| --------- | ------- | ---------------- |
| `value` | integer | New page number. |
The event properties are as follows.
| Property | Value | Description |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles | false | This event does not bubble. |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed | false | This event does not propagate outside of the component in which it was dispatched. |
#### `select`
Event fired when the item selection is updated. If items are checked by default, this event will be fired when the query is first executed. It is also fired when items are checked or unchecked by the user.
The `select` event returns the following parameters.
| Parameter | Type | Description |
| -------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| `item` | object | Timeline item that was checked or unchecked, with the mapped `label`, `name`, `description`, `startDate` and `endDate` properties. |
| `itemSObject` | object | Record corresponding to the item that was checked or unchecked. In static mode, no record is associated and this is `null`. |
| `selected` | boolean | True if the item was checked, false if it was unchecked. |
| `selectedItemsNames` | string\[] | Array of item key names, corresponding to the current selection. |
The event properties are as follows.
| Property | Value | Description |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles | false | This event does not bubble. |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed | false | This event does not propagate outside of the component in which it was dispatched. |
### Styling Hooks
| CSS Variable | Type | Default |
| ----------------------------------------------------------------------- | --------- | --------- |
| `--avonni-dd-timeline-footer-color-background` | color | — |
| `--avonni-dd-timeline-footer-color-border` | color | — |
| `--avonni-dd-timeline-footer-radius-border` | string | — |
| `--avonni-dd-timeline-footer-sizing-border` | string | — |
| `--avonni-dd-timeline-footer-styling-border` | string | — |
| `--avonni-dd-timeline-header-actions-color-background` | color | — |
| `--avonni-dd-timeline-header-actions-color-background-active` | color | — |
| `--avonni-dd-timeline-header-actions-color-background-hover` | color | — |
| `--avonni-dd-timeline-header-actions-color-border` | color | — |
| `--avonni-dd-timeline-header-actions-color-border-active` | color | — |
| `--avonni-dd-timeline-header-actions-color-border-hover` | color | — |
| `--avonni-dd-timeline-header-actions-text-color` | color | — |
| `--avonni-dd-timeline-header-actions-text-color-active` | color | — |
| `--avonni-dd-timeline-header-actions-text-color-hover` | color | — |
| `--avonni-dd-timeline-header-caption-font-family` | string | — |
| `--avonni-dd-timeline-header-caption-font-size` | dimension | — |
| `--avonni-dd-timeline-header-caption-font-style` | string | `normal` |
| `--avonni-dd-timeline-header-caption-font-weight` | number | `400` |
| `--avonni-dd-timeline-header-caption-letter-spacing` | string | — |
| `--avonni-dd-timeline-header-caption-line-height` | string | — |
| `--avonni-dd-timeline-header-caption-text-color` | color | `#000000` |
| `--avonni-dd-timeline-header-color-background` | color | — |
| `--avonni-dd-timeline-header-color-border` | color | — |
| `--avonni-dd-timeline-header-color-border-bottom` | color | `#c9c9c9` |
| `--avonni-dd-timeline-header-icon-color-background` | color | — |
| `--avonni-dd-timeline-header-icon-color-foreground` | color | — |
| `--avonni-dd-timeline-header-icon-color-foreground-default` | color | — |
| `--avonni-dd-timeline-header-icon-radius-border` | string | — |
| `--avonni-dd-timeline-header-margin-block-end` | dimension | — |
| `--avonni-dd-timeline-header-radius-border` | string | — |
| `--avonni-dd-timeline-header-sizing-border` | string | — |
| `--avonni-dd-timeline-header-sizing-border-bottom` | dimension | `1px` |
| `--avonni-dd-timeline-header-spacing-block-end` | dimension | `0.75rem` |
| `--avonni-dd-timeline-header-spacing-block-start` | dimension | `0.75rem` |
| `--avonni-dd-timeline-header-spacing-inline-end` | dimension | `1rem` |
| `--avonni-dd-timeline-header-spacing-inline-start` | dimension | `1rem` |
| `--avonni-dd-timeline-header-styling-border` | string | — |
| `--avonni-dd-timeline-header-styling-border-bottom` | string | `solid` |
| `--avonni-dd-timeline-header-title-font-family` | string | — |
| `--avonni-dd-timeline-header-title-font-size` | dimension | `1rem` |
| `--avonni-dd-timeline-header-title-font-style` | string | `normal` |
| `--avonni-dd-timeline-header-title-font-weight` | number | `400` |
| `--avonni-dd-timeline-header-title-letter-spacing` | string | — |
| `--avonni-dd-timeline-header-title-line-height` | number | `1.25` |
| `--avonni-dd-timeline-header-title-text-color` | color | `#080707` |
| `--avonni-dd-timeline-icon-color-background` | color | — |
| `--avonni-dd-timeline-icon-color-foreground` | color | — |
| `--avonni-dd-timeline-icon-color-foreground-default` | color | — |
| `--avonni-dd-timeline-icon-radius-border` | string | — |
| `--avonni-dd-timeline-item-color-background` | color | `#c9c7c5` |
| `--avonni-dd-timeline-item-description-line-clamp` | number | `3` |
| `--avonni-dd-timeline-item-fields-color-background` | color | — |
| `--avonni-dd-timeline-item-fields-color-border` | color | `#e5e5e5` |
| `--avonni-dd-timeline-item-fields-radius-border` | dimension | `0.25rem` |
| `--avonni-dd-timeline-item-fields-sizing-border` | dimension | `1px` |
| `--avonni-dd-timeline-item-fields-spacing-block` | dimension | `0.75rem` |
| `--avonni-dd-timeline-item-fields-spacing-inline` | dimension | `1rem` |
| `--avonni-dd-timeline-item-fields-styling-border` | string | — |
| `--avonni-dd-timeline-pagination-active-button-color-background` | color | `#0176d3` |
| `--avonni-dd-timeline-pagination-active-button-color-background-active` | color | `#014486` |
| `--avonni-dd-timeline-pagination-active-button-color-background-hover` | color | `#014486` |
| `--avonni-dd-timeline-pagination-active-button-color-border` | color | `#0176d3` |
| `--avonni-dd-timeline-pagination-active-button-color-border-active` | color | `#014486` |
| `--avonni-dd-timeline-pagination-active-button-color-border-hover` | color | `#014486` |
| `--avonni-dd-timeline-pagination-active-button-text-color` | color | `#fff` |
| `--avonni-dd-timeline-pagination-active-button-text-color-active` | color | `#fff` |
| `--avonni-dd-timeline-pagination-active-button-text-color-hover` | color | `#fff` |
| `--avonni-dd-timeline-pagination-button-color-background` | color | `#fff` |
| `--avonni-dd-timeline-pagination-button-color-background-active` | color | `#f3f3f3` |
| `--avonni-dd-timeline-pagination-button-color-background-disabled` | color | `#fff` |
| `--avonni-dd-timeline-pagination-button-color-background-hover` | color | `#f3f3f3` |
| `--avonni-dd-timeline-pagination-button-color-border` | color | `#747474` |
| `--avonni-dd-timeline-pagination-button-color-border-active` | color | `#747474` |
| `--avonni-dd-timeline-pagination-button-color-border-disabled` | color | `#747474` |
| `--avonni-dd-timeline-pagination-button-color-border-hover` | color | `#747474` |
| `--avonni-dd-timeline-pagination-button-sizing-border` | dimension | `1px` |
| `--avonni-dd-timeline-pagination-button-styling-border` | string | `solid` |
| `--avonni-dd-timeline-pagination-button-text-color` | color | `#0176d3` |
| `--avonni-dd-timeline-pagination-button-text-color-active` | color | `#014486` |
| `--avonni-dd-timeline-pagination-button-text-color-disabled` | color | `#c9c9c9` |
| `--avonni-dd-timeline-pagination-button-text-color-hover` | color | `#014486` |
| `--avonni-dd-timeline-show-more-button-neutral-color-background` | color | — |
| `--avonni-dd-timeline-show-more-button-neutral-color-background-active` | color | — |
| `--avonni-dd-timeline-show-more-button-neutral-color-background-hover` | color | — |
| `--avonni-dd-timeline-show-more-button-neutral-color-border` | color | — |
| `--avonni-dd-timeline-show-more-button-neutral-color-border-active` | color | — |
| `--avonni-dd-timeline-show-more-button-neutral-color-border-hover` | color | — |
| `--avonni-dd-timeline-show-more-button-neutral-radius-border` | string | — |
| `--avonni-dd-timeline-show-more-button-neutral-sizing-border` | string | — |
| `--avonni-dd-timeline-show-more-button-neutral-spacing-block-end` | dimension | — |
| `--avonni-dd-timeline-show-more-button-neutral-spacing-block-start` | dimension | — |
| `--avonni-dd-timeline-show-more-button-neutral-spacing-inline-end` | dimension | — |
| `--avonni-dd-timeline-show-more-button-neutral-spacing-inline-start` | dimension | — |
| `--avonni-dd-timeline-show-more-button-neutral-text-color` | color | — |
| `--avonni-dd-timeline-show-more-button-neutral-text-color-active` | color | — |
| `--avonni-dd-timeline-show-more-button-neutral-text-color-hover` | color | — |
| `--avonni-dd-timeline-title-font-size` | dimension | `1rem` |
| `--avonni-dd-timeline-title-font-style` | string | `normal` |
| `--avonni-dd-timeline-title-font-weight` | number | `400` |
| `--avonni-dd-timeline-title-text-color` | color | `#080707` |
## Key Considerations
* **Mode is exclusive:** Setting `items` switches the component to static mode and the `query`/`mapping` properties are ignored. Leave `items` unset to use query mode.
* **Date drives position:** The `startDate` mapping (query mode) or item `startDate` (static mode) determines where each item sits on the time axis; an item without a date won't be placed correctly.
* **Grouping is vertical-only:** `orientation-attributes.groupBy` and its collapsible/closed options apply only when `orientation="vertical"`.
* **Pagination vs. scroll:** Without `show-pagination`, items load dynamically on scroll if the timeline has a height limit, or via a "show more" button if it does not.
* **Static events have no record:** In static mode, the `itemSObject` payload in events is `null` because no Salesforce record backs the item.
* **Best Practice:** In query mode, always set the `startDate` mapping (and the `query` `orderBy`) to a date field so items are positioned correctly on the time axis. Use `vertical` orientation with `groupBy` for long histories so users can scan and collapse groups.
***
## Troubleshooting Common Issues
* **Items not appearing in order or off the axis:** Verify the `startDate` mapping points to a valid date/datetime field and that the `query` `orderBy` uses the same field.
* **Query mode shows nothing:** Confirm `query.objectApiName` is correct, the running user has access, and `mapping.name` resolves to a unique value such as `{{Record.Id}}`.
* **Grouping or collapse not working:** Ensure `orientation="vertical"`; `groupBy` has no effect in horizontal orientation.
* **If issues persist:** Contact our support team at for assistance.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.avonnicomponents.com/lwc-components/data-driven-components/timeline.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.