Services
Service List
A backend-first vertical list for services and other browsable items like locations, menu items, and team entries. Each row can show icon, title, subtitle, provider label, and optional price, rating, duration, and category tag. Tapping a row navigates to a shared detail screen and passes rich row data as navigation params.
Fetches live services from AWS/DynamoDB. Static items are only a fallback when backend data is unavailable or has no matching entries.
Use built-in chips with showCategoryFilter, or pre-filter from Service Category Grid via activeCategoryFilter and nav params.
Available on all plans.
Four things worth knowing
Backend-first loading path
Service List fetches live services from AWS/DynamoDB. Business owners manage content in Admin Service Manager. Local/static items act as fallback data only when backend data is not available or has no match.
Two category-filter paths
Internal chip filter uses showCategoryFilter to auto-build category chips from loaded services. External filtering uses activeCategoryFilter or nav params and typically hides the chip bar.
Shared detail-screen navigation
Rows navigate to one shared detailScreenId and pass rich item data (title, subtitle, pricing, provider, metadata, and more), so one detail template can serve many list entries.
Focused MVP editor surface
Only core navigation and visibility controls are user-adjustable. Layout internals and advanced toggles (view-all mode, provider assignment filter, database mode toggle, badges, distance, images, CTA, chevron) stay fixed/hidden for MVP consistency.
Find it, drop it, wire up navigation
Where to find itAdd it to any screen
- Component picker → Services → Service List.
- Add it to a services, browse, or home screen.
- Use one shared detail screen for consistent row-tap navigation.
Before you publishThree things to check
- Set
detailScreenIdso row taps open a detail screen. - If pairing with Service Category Grid, choose same-screen in-place filtering or separate-screen nav-prefilter flow.
- For category-prefilter target screens, disable chips with
showCategoryFilter: falsewhen only one category should show.
app/app/components/builder/services/BuilderServiceList.tsxNavigation, filtering, and header behavior
| Prop | Type | Default | Description |
|---|---|---|---|
headerTitle | string | ’Services’ | Title shown in the header toolbar. |
detailScreenId | screen-select | ” | Screen to navigate to when any item is tapped. |
backAction | select | ’go-back’ | What the back button does: go-back or navigate-screen. |
backScreenId | screen-select | ” | Target screen when backAction is navigate-screen. |
Make it yours
These are the controls intentionally exposed in the property editor for MVP. Hidden/fixed controls are documented in the next section.
| Prop | Default | What it controls |
|---|---|---|
showSubtitle | true | Subtitle visibility. |
showPrice | false | Price block visibility. |
showRating | false | Rating visibility. |
showDuration | false | Duration label visibility. |
showCategory | false | Category tag visibility. |
showHeader | true | Header bar visibility. |
showCategoryFilter | true | Internal category chip bar visibility. |
showProvider | true | Provider label visibility. |
showBorder | true | Row border visibility. |
Common mistakes to avoid
Use one shared detail screen
Keep a single destination screen for row taps where possible. It gives users a consistent drill-down experience and simplifies maintenance.
Use Service Category Grid for guided browsing
Pair Service List with Service Category Grid for clearer discovery. Use same-screen filtering or separate-screen nav-prefilter flows depending on screen design.
Do not expect hidden MVP controls
If a control is fixed/hidden for MVP, it will not appear in the property editor. Update docs first if behavior changes.
Do not rely on static-only path for production
Static data is fallback behavior, not the primary production model. Keep backend-managed service data accurate in Admin Service Manager.