Skip to main content

 

Traditional Web

 

Applies only to Traditional Web Apps

 

OutSystems

Timeline Reference

  • Edit
  • Layout and classes

    Advanced Use Case

    Use the Timeline Pattern 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:

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

    7. Publish and test.

    • Was this article helpful?