Timeline

Live demo

Renders a timeline.

Node name : timeline

Attributes

Attribute	Type	Required	Default value	Description
source	object[]	true		An array of elements to display.
orientation	string (horizontal, vertical)	vertical		Orientation of the timeline.
align	string (left, top, bottom, right, alternate)	left		Position of the timeline bar relative to the content.

Example

<timeline source="@Fields.Events" orientation="vertical" align="alternate">
  <timeline-content>
    <text>$Item.Caption</text>
  </timeline-content>
</timeline>

Content template

It's necessary to define the content template by using the timeline-content node.

To use the template item which is the the array element being iterated, use the variable $Item.

<timeline source="@Fields.Events" orientation="vertical" align="alternate">
  <timeline-content>
    <text>$Item.Caption</text>
  </timeline-content>
</timeline>

Also, you can set an alias for the template item by setting the attribute item on the timeline-content node.

<timeline source="@Fields.Events" orientation="vertical" align="alternate">
  <timeline-content item="Event">
    <text>$Event.Caption</text>
  </timeline-content>
</timeline>

Marker template

It's possible to redefine the marker template by using the timeline-marker node.

To use the template item which is the the array element being iterated, use the variable $Item.

<timeline source="@Fields.Events" orientation="vertical" align="alternate">
  <timeline-content>
    <text>$Item.Caption</text>
  </timeline-content>
  <timeline-marker>
    <image name="$Item.ImageName">
  </timeline-marker>
</timeline>

Like the timeline-content node, you can set an alias for the template item by setting the attribute item on the timeline-marker node.

Opposite template

It's possible to define the opposite template by using the timeline-opposite node.

To use the template item which is the the array element being iterated, use the variable $Item.

<timeline source="@Fields.Events" orientation="vertical" align="alternate">
  <timeline-content>
    <text>$Item.Caption</text>
  </timeline-content>
  <timeline-opposite>
    <text>$Item.Date</text>
  </timeline-opposite>
</timeline>

Like the timeline-content node, you can set an alias for the template item by setting the attribute item on the timeline-opposite node.