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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “Next steps”Continue into the inquiry workflow, back to the listings page, or the wider App Connect index.
Return to the Dynamic Real Estate Site walkthrough when you want the full demo context again.
Open the listings page tour next when you want the collection, filter, and map side of the same demo.
Continue with the inquiry form when you want the submission flow that the detail page hands off into.