Skip to main content

 

Patterns

 

Applies only to Traditional Web Apps

 

OutSystems

Timeline

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • Indicates related events in chronological order.

    Use the Timeline to show related events in chronological order such as an end user’s upcoming, current and past activities.

    How to use

    1. Drag the Timeline pattern into the preview.

    2. Set the content in the placeholders. By default, the pattern comes with a circular icon in the Icon placeholder. To change it, drag an icon widget to this placeholder.

    3. Drag as many TimelineItems as required.

    Input Parameters

    Timeline

    Input Name Description Type Mandatory Default Value
    ExtendedClass Add custom style classes to this Block. Text False none

    Timeline Item

    Input Name Description Type Mandatory Default Value
    Color Background color of the icon. Color Identifier False Entities.Color.Primary
    ExtendedClass Add custom style classes to this Block. Text False none

    Layout and Classes

    Advanced Use Case

    Use Timeline with ListRecords

    1. Drag the Timeline Pattern into the preview.
    2. In the Content placeholder, drag a ListRecords widget.
    3. In the ListRecords widget, drag a TimelineItem.
    4. In the TimelineItem, use expressions to display the database content you need.
    5. To disable the vertical line on the last TimelineItem, write the following CSS code in the application Theme:

      css .ListRecords .timeline-item:last-of-type .timeline-item-separator { display: none; } 1. In the ListRecords Widget, set Line Separator to None to avoid additional margin between elements.

    6. Publish and test.

    • Was this article helpful?