← Kairos MBA MasterclassAll programsHomeSearch
Kairos MBA Masterclass·1:20:00

Filtering, Dynamic Data and the Listing Page: Bind the Repeating Group, Category Filters, Dynamic Dropdowns, Map + List, and URL Parameters Between Pages

Mayank Build trainer - co-founder of Epic, a Delhi no-code/low-code product studio (80+ products); builds the real-estate marketplace in Bubble on camera
▶LMS lesson
← PreviousHow to Set Up Google API Keys for Bubble (Bubble Academy tutorial)
Lesson 15 of 48 in Kairos MBA Masterclass
Next →Login, Sign-up and Reset Password Workflows, and the 404 Page (heavily garbled transcript)

The short version

  1. Bind the repeating group: type Listing, data source Do a search for Listings, 2 rows x 3 columns, collapse when hidden; inside, every nested group gets type Listing and source Parent group's Listing, then Insert dynamic data for image, location, bedrooms, bathrooms (option set :display), area, type, price (0:02-0:18).
  2. Category filter texts each run Display list in the repeating group with constraint property type = category; 'All' with no constraint; add show = yes everywhere so a listing can be hidden from App data. Dropdowns go dynamic: types from the option set, cities from 'Search for Listings:each item's location:unique elements', budgets from prices (0:19-0:35).
  3. Listing page: clone of home with header and footer, the repeating group without fixed rows, a Map of all listings (list markers, show = yes). Home search passes city/type/budget as URL parameters (the only alternatives are URL or cookies; Bubble has no native cookies); the listing page reads them with Get data from page URL as defaults, and the Search button re-filters with 'Ignore empty constraints', location within 100 km. Known bug: the city dropdown default did not take - deferred to QA (0:33-1:19).

At a glance, three clicks deep

Skim here first: the closed row is the glance, open is the study card with the key points and timestamps, and the ↓ link drops to that concept's full write-up below.

01Binding the repeating group to the databaseType + source on the parent;›

Type + source on the parent; Parent group's X on the children.

Binding (0:02-0:18)

↓ Full write-up of this concept

02Category filters with Display list, and the show = yes switchDisplay list + constraint;›

Display list + constraint; show = yes everywhere.

Filters (0:19-0:28)

↓ Full write-up of this concept

03Dynamic dropdown choices from the dataChoices = search:each item's field:unique elements.›

Choices = search:each item's field:unique elements.

Three dropdowns (0:28-0:35)

↓ Full write-up of this concept

04The listing page, and passing filters between pages as URL parametersURL params out;›

URL params out; Get data from page URL in; Ignore empty constraints.

Listing page + map (0:33-0:46)

URL parameters (0:44-0:53)

Filter bar and search (0:53-1:19)

↓ Full write-up of this concept

The concepts in full

01

Binding the repeating group to the database

Set the parent's type and source once, then every child says 'Parent group's Listing's ...'.

PROCEDURE: repeating group -> Type of content Listing -> Data source 'Do a search for Listings' -> fixed 2 rows x 3 columns for six cards -> collapse when hidden on the group, its content and the repeating group; remove the border. Inside, each nested group: type Listing, source Parent group's Listing; then Insert dynamic data: cover image, location, 'number of bedrooms' + ' bedroom' in rich text, bathrooms (an option set - use :display), area, property type, price. Fix distorted images with stretch/fit.

Why it matters

Data flows parent to child; once you see it, every list in Bubble is the same.

02

Category filters with Display list, and the show = yes switch

Each filter word is a one-step workflow: display this list, constrained to that category.

For Residential, Commercial, Industrial, Agriculture: workflow on the text -> Element action > Display list in the repeating group -> Do a search for Listings with constraint property type = (category). 'All properties' is the same action without the category. Add constraint show = yes to every search, including the initial data source, so setting show = no in Data > App data hides a listing everywhere. Copy workflows with Ctrl+right-click.

Why it matters

Filtering without a line of code, and a kill-switch per listing.

03

Dynamic dropdown choices from the data

Change one listing's city to Chandigarh and the dropdown grows a Chandigarh. No list to maintain.

Dropdown > Choices style: Dynamic choices. Property type: type text, source the Listing-type option set. City: type geographic address (or text), source 'Do a search for Listings:each item's location:unique elements'. Budget: type number, 'each item's price:unique elements', optionally sorted. Editing a listing updates the choices instantly.

Why it matters

Removes a whole class of stale-list bugs.

This idea elsewherebuilds onThe static dropdowns from the hero
04

The listing page, and passing filters between pages as URL parameters

Look at an Amazon URL: everything you filtered is in it. Bubble has no cookies, so the URL is your only pocket.

New page 'all listings' cloned from home: header, footer, the repeating group without fixed rows, and a Map above it (max width 90%, min height 400, max 500, margins 40; markers = list of Listings with show = yes; address = location, title = name; Apple style; custom icon). Navigation from the header search, logo and 'Explore all' via Go to page. Passing filters: on the home search -> Go to page all listings -> 'Send more parameters to the page' with keys city, type, budget bound to the dropdowns (URL pattern city=New York, type=industrial, budget=650). Name the dropdown elements first. On the listing page, a filter bar (H3 'Find property', three dropdowns, Search) whose defaults use 'Get data from page URL' (city, type, budget); the Search button runs Display list with constraints show = yes, type, price, location within 100 km of the city, with 'Ignore empty constraints' ticked so blanks do not return nothing; the map's markers follow via a condition with the same search. Known bug: the city dropdown would not show the URL default (geographic-address mismatch) - deferred to the QA session.

Why it matters

Filters survive a page change, which is what a listing site is.

This idea elsewhereparallelBasecamp 2 on where state lives

Tools referenced

ToolCoverageMomentContext
Bubbledemonstrated
Google MapsdemonstratedList-marker map

Action items

    Resources mentioned

    Resources
    • docLesson page on the platform

    Extraction notes

    This page was built from an auto-generated transcript, which garbles product and people's names. Those were corrected silently in everything above and logged here for transparency. The warnings flag claims that were true on the recording day but change fast.

    Transcript corrections applied

    The transcript saysThe trainer actually means
    real start date / real aesthetics / real staticreal estate
    Type / Cypress / Skype / SykesStripe
    Mando / Mandrope / MangroveManrope (font)
    repeating loop / repeating rowrepeating group
    paid listings nameCurrent page Listing's name

    True on recording day — verify before relying

    ← PreviousHow to Set Up Google API Keys for Bubble (Bubble Academy tutorial)Next →Login, Sign-up and Reset Password Workflows, and the 404 Page (heavily garbled transcript)