# How to build a timeline feature in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 20-25 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Create a dynamic, user-generated timeline in Bubble where users add events through a form, filter entries by date range or category, and view expandable detail cards. Unlike a static timeline, this version grows with user input and supports real-time updates, search, and interactive navigation.

## Overview: Dynamic Timelines in Bubble

A dynamic timeline lets users add, edit, and filter timeline events in real time. This tutorial builds on the basic timeline view by adding form-based event creation, date range filtering, category-based color coding, and expandable cards — ideal for project tracking, content calendars, or activity feeds.

## Before you start

- A Bubble account with user authentication
- Basic understanding of Data Types and Repeating Groups
- Familiarity with custom states and conditional formatting

## Step-by-step guide

### 1. Create the DynamicEvent data type

Go to Data tab and create 'DynamicEvent' with fields: title (text), description (text), event_date (date), category (Option Set: Milestone/Update/Task/Note), created_by (User), image (image, optional). Create the Category Option Set with a color attribute for each option.

**Expected result:** DynamicEvent data type and Category Option Set are ready.

### 2. Build the event creation form

Add a popup or collapsible Group with inputs for title, description, event_date (Date Picker), category (Dropdown), and an optional image uploader. Add a 'Create Event' button with workflow: Create DynamicEvent with all field values and created_by = Current User. Reset inputs after creation.

**Expected result:** Users can add new timeline events via a form that appears in a popup.

### 3. Display the dynamic timeline with filtering

Add a Repeating Group with data source: Do a search for DynamicEvent, sorted by event_date descending. Above it, add two Date Pickers (start/end) and a Category dropdown filter. Use these as constraints on the search. In each cell, show the formatted date, category badge with color from the Option Set, title, and a truncated description.

> Pro tip: Use 'Ignore empty constraints' on the search so empty filters show all results.

**Expected result:** A filterable timeline updates as users add events or change filter criteria.

### 4. Add expandable detail cards

Inside each Repeating Group cell, add a hidden Group below the summary containing the full description and image. Use a custom state 'expanded_id' (type text) on the page. When a cell is clicked: Set state expanded_id = Current cell's DynamicEvent's Unique ID. On the detail Group: Conditional — visible when expanded_id matches this event's Unique ID.

**Expected result:** Clicking a timeline entry reveals its full details.

### 5. Enable editing and deletion of events

In the expanded detail card, add Edit and Delete buttons. Edit opens the creation popup pre-filled with current values and the workflow changes to Make changes to the existing DynamicEvent. Delete triggers Delete a thing with a confirmation alert. Only show these buttons when created_by = Current User.

**Expected result:** Users can edit or delete their own timeline events from the expanded view.

## Complete code example

File: `Workflow summary`

```text
DYNAMIC TIMELINE — WORKFLOW SUMMARY
====================================

DATA TYPE: DynamicEvent
  title (text), description (text), event_date (date),
  category (Option Set: Milestone/Update/Task/Note),
  created_by (User), image (image)

OPTION SET: EventCategory
  Milestone (color: #3B82F6), Update (color: #10B981),
  Task (color: #F59E0B), Note (color: #6B7280)

FILTERS:
  Start Date Picker + End Date Picker + Category Dropdown
  Search with 'Ignore empty constraints' checked

WORKFLOWS:
  Create: popup form → Create DynamicEvent → reset + close
  Edit: popup (pre-filled) → Make changes to DynamicEvent
  Delete: Confirm → Delete DynamicEvent
  Expand: Set state expanded_id = Unique ID
  Collapse: Set state expanded_id = empty

DISPLAY:
  Repeating Group sorted by event_date descending
  Each cell: date | category badge | title | description preview
  Expanded: full description, image, edit/delete buttons
  Edit/Delete visible only when created_by = Current User
```

## Common mistakes

- **Not using Ignore empty constraints on the search** — Empty filter values return zero results instead of all results Fix: Check 'Ignore empty constraints' on the Repeating Group search so empty filters show everything
- **Allowing all users to edit or delete any event** — Without ownership checks users can modify others' entries Fix: Show edit/delete buttons only when created_by is Current User
- **Loading all events without pagination** — Hundreds of entries slow page load Fix: Paginate to 15-20 items per page with a Load more button

## Best practices

- Use Ignore empty constraints for optional filters
- Paginate the timeline to 15-20 items per page
- Color-code categories using Option Set attributes
- Show edit/delete buttons only to the event creator
- Use database-bound Repeating Groups for real-time auto-refresh
- Store a color attribute on the Option Set for consistent styling

## Frequently asked questions

### Can I add drag-and-drop reordering?

Bubble does not natively support drag-and-drop. Use a marketplace plugin or manual order buttons that change an order field.

### Does the timeline update in real time?

Yes. Database-bound Repeating Groups auto-update via WebSocket when any user creates a new DynamicEvent.

### Can I export the timeline as a PDF?

Yes. Use a PDF generation plugin like PDF Conjurer to render the timeline contents as a downloadable PDF.

### How many events can it handle?

With pagination at 15-20 items per page, the timeline performs well with thousands of records.

### Can I add comments to timeline events?

Yes. Create a Comment data type linked to DynamicEvent and display comments in the expanded detail card.

### Can RapidDev build an interactive timeline?

Yes. RapidDev builds custom timelines with advanced interactions, team collaboration, and project management integration.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/create-a-dynamic-timeline-feature-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/create-a-dynamic-timeline-feature-in-bubble