Server data first
`sc_listings` loads the catalog from the server.
Demo walkthrough: Real Estate listings page
Focused walkthrough of the renewed Real Estate listings page: Server Connect source, Data View filters, synchronized map, charts, and repeated listing cards.
Listings page mental model
The listings page is the clearest App Connect page in the renewed demo. A Server Connect action loads the catalog, a Data View reshapes it, and several outputs stay synchronized from that one shaped collection.
One shaping layer
`listing_results` applies filter and sort logic in the browser.
Shared outputs
Cards, charts, and the map all reflect the same active result set.
Server Connect loads the raw list.
Data View filters and sorts it.
Map and card grid both consume the shaped result.
Listings page opens
The listings walkthrough starts on views/listings.ejs, where the renewed demo shows the full filter pipeline on one page.
Listings editor is ready
The listings page is now active in Design View, so the Structure and Properties panels can follow the live page context.
Listings API source
sc_listings calls /api/listings/list and exposes the raw collection for the page. Everything else on this screen builds on that server response.
Listings Data View
listing_results is the shaping layer. It reads the API result, reacts to the input controls, and owns the current filtered and sorted result set.
Filter controls surface
This filter bar is where App Connect becomes practical for users: the controls are ordinary inputs, but their values feed the Data View expression directly.
Market filter control
inp_market is one of the controls inside the Data View filter. It narrows the result set without another request because the filtered collection already lives on the page.
Sort direction control
inp_sort_dir shows that the Data View also owns sorting. The page does not need separate card and map logic for sort order because both outputs read the same shaped collection.
Insights and charts
The listings page mixes shaped result outputs with supporting value components and charts, which makes it a strong example of App Connect feeding multiple visual layers at once.
Map bound to the filtered result
listing_map reads listing_results.data directly, so map markers stay synchronized with the same filtered dataset that drives the visible cards.
Repeated listing cards
repeat_listings is the second consumer of the shaped collection. This is the page’s core lesson: one Data View can drive multiple outputs cleanly.
Wrap-up
The listings page turns the renewed demo into a reusable pattern: load once from Server Connect, shape once through Data View, then let several UI outputs consume the same result.
Next steps
Continue into the detail page, the inquiry form, or the broader App Connect tours from here.