Widget reference

Timeline widget: volledige instelling reference

Timeline toont events chronologisch en ondersteunt layout-keuze, alignment, icon/marker mapping, opposite-kolommen, compare-kleuren en itemlimieten.

Datavelden Layout en sortering Weergaveopties Voorbeeld

1. Datavelden en defaults

Timeline widget settings — Timeline widget editor met veldmapping en layout instellingen.

Defaults

dateField=date, titleField=title, trackByField=id.
layout=vertical, align=alternate, sortOrder=desc.
dateFormat=mediumDate, showOpposite=true, showComparisonColor=true.

Key	Type	Beschrijving
`filter`	object	Widgetspecifiek filterobject.
`dateField`	string	Primair datumveld (verplicht in outputcontext).
`titleField`	string	Titel per event-item.
`subtitleField`	string	Subtitel onder titel.
`descriptionField`	string	Body tekst per event.
`chipField`	string	Badge/tag veld per item.
`trackByField`	string	Stabiele identificatie bij rerender.
`iconField`, `staticIcon`	string	Dynamische of statische icon klasse.
`markerColorField`, `staticMarkerColor`	string	Dynamische of statische markerkleur.
`oppositeField`, `oppositeDateFormat`	string	Extra waarde/datum aan tegenoverliggende zijde.

2. Layout, volgorde en limieten

Instelling	Waarden	Effect
`layout`	`vertical`, `horizontal`	Hoofdstructuur van de timeline.
`align`	vertical: left/right/alternate, horizontal: top/bottom/alternate	Uitlijning per layout-type.
`sortOrder`	`desc`, `asc`	Nieuwste eerst of oudste eerst.
`reverse`	boolean	Extra omkering op de uiteindelijke lijst.
`limit`	positive int	Maximaal aantal events in de widget.
`height`	CSS string	Vaste hoogte met interne scroll.

3. Weergave-opties

Date formats

dateFormat ondersteunt presets zoals shortDate, mediumDate, longDate, short, medium.
Custom Angular date formats zijn ook toegestaan.

Toggle gedrag

showOpposite toont/verbergt opposite kolom.
showComparisonColor neemt compare-set kleuraccent mee in timeline-items.

Validatiegedrag

filter moet geldig JSON object zijn.
Lege kernvelden vallen terug op defaults (date, title, id).
Bij layoutwissel normaliseert de editor automatisch ongeldige align waarden.

4. Voorbeeld timeline options JSON

{
  "dateField": "event_time",
  "titleField": "event_title",
  "subtitleField": "event_type",
  "descriptionField": "event_description",
  "chipField": "severity",
  "iconField": "icon_class",
  "markerColorField": "marker_color",
  "layout": "vertical",
  "align": "alternate",
  "sortOrder": "desc",
  "limit": 100,
  "dateFormat": "yyyy-MM-dd HH:mm",
  "oppositeField": "owner",
  "showOpposite": true,
  "showComparisonColor": true,
  "height": "420px"
}