Route-driven load
`sc_listing` reads the page query id and loads one property record.
Demo walkthrough: Real Estate listing detail page
Focused walkthrough of the renewed listing detail page: route-driven Server Connect loading, gallery and lightbox, related repeats, map, and inquiry call-to-action bindings.
Listing detail page mental model
The listing detail page shows how the renewed demo handles one routed record. A route parameter loads the listing, then App Connect binds that detailed record into galleries, repeated sections, maps, and call-to-action links.
Rich detail UI
Swiper, lightbox, repeats, and maps all bind to the same loaded record.
Action handoff
The page links cleanly into the inquiry flow without duplicating data.
Load one record from the route.
Bind the detail record into several UI surfaces.
Pass the current listing into the inquiry workflow.
Listing detail page opens
The walkthrough starts on views/listing.ejs, where the renewed demo turns one routed listing record into a complete detail page.
Listing detail editor is ready
The detail page is now active in Design View, so the Structure and Properties panels can follow the live page context.
Route-driven Server Connect
sc_listing calls /api/listings/get and binds query.id into the request, which is how the detail page resolves one record from the routed URL.
Shared lightbox component
property_lightbox is a good example of page-level App Connect infrastructure: several gallery links can reuse it without duplicating popup logic.
Listing gallery swiper
The swiper uses the loaded record’s listing_images collection, so one API record can immediately power a richer presentation component.
Room-by-room repeat
listing_rooms shows a common detail-page pattern: subquery data from the main record becomes a repeat region for structured secondary content.
Photo notes repeat
gallery_notes turns the same image collection into a second presentation. This is the same App Connect lesson as elsewhere in the demo: one collection can feed multiple UI layers.
Detail map
detail_map binds one listing’s coordinates into a focused Leaflet map and marker, which keeps the location tied directly to the loaded record.
Amenities repeat
amenities is another repeated slice from the same loaded record, reinforcing how the detail page decomposes one record into several focused UI sections.
Inquiry handoff button
The Request Showing button passes the current listing id into the inquiry page. That is the workflow bridge between this routed detail page and the form page.
Wrap-up
The detail page completes the renewed demo pattern: route-driven loading, one detailed record, and several App Connect consumers built on top of it.
Next steps
Continue into the inquiry workflow, back to the listings page, or the wider App Connect index.