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.
Prerequisites
- 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
Create the DynamicEvent data type
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.
Build the event creation form
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.
Display the dynamic timeline with filtering
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.
Add expandable detail cards
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.
Enable editing and deletion of events
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 working example
1DYNAMIC TIMELINE — WORKFLOW SUMMARY2====================================34DATA TYPE: DynamicEvent5 title (text), description (text), event_date (date),6 category (Option Set: Milestone/Update/Task/Note),7 created_by (User), image (image)89OPTION SET: EventCategory10 Milestone (color: #3B82F6), Update (color: #10B981),11 Task (color: #F59E0B), Note (color: #6B7280)1213FILTERS:14 Start Date Picker + End Date Picker + Category Dropdown15 Search with 'Ignore empty constraints' checked1617WORKFLOWS:18 Create: popup form → Create DynamicEvent → reset + close19 Edit: popup (pre-filled) → Make changes to DynamicEvent20 Delete: Confirm → Delete DynamicEvent21 Expand: Set state expanded_id = Unique ID22 Collapse: Set state expanded_id = empty2324DISPLAY:25 Repeating Group sorted by event_date descending26 Each cell: date | category badge | title | description preview27 Expanded: full description, image, edit/delete buttons28 Edit/Delete visible only when created_by = Current UserCommon mistakes when building a timeline feature in Bubble
Why it's a problem: Not using Ignore empty constraints on the search
How to avoid: Check 'Ignore empty constraints' on the Repeating Group search so empty filters show everything
Why it's a problem: Allowing all users to edit or delete any event
How to avoid: Show edit/delete buttons only when created_by is Current User
Why it's a problem: Loading all events without pagination
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a dynamic user-generated timeline in Bubble.io with categories, date filters, and expandable cards. Can you design the data model and page layout?
Create a dynamic timeline feature with a DynamicEvent data type. Build a form for adding events, a filterable display with expandable cards, and edit/delete for event owners.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation