Wappler documentation
Demo walkthroughs: Demo Projects HQ
Beginner-to-advanced walkthroughs using the Demo Projects HQ project, connecting Server Connect Actions to the frontend pages that call them.
Use this hub when you want real project examples of Server Connect in action. Start with the walkthrough that matches the page, action, or backend handoff you want to inspect.
Start here
Demo walkthrough: Route, page, and action handoffUse Demo Projects HQ to connect route-aware pages, layouts, and the real Server Connect actions that power them.Create a working login formThe complete connection between a Security Provider, a login action and the page’s success/error states.Current User: Page Data BindingUse Demo Projects HQ to load /api/auth/current_user with a page-level dmx-serverconnect component and bind it safely in App Connect.Demo walkthrough: Clients list (API → Page)Trace the Clients list page end-to-end: a Server Connect SELECT action feeds a dmx-serverconnect component and a repeater.Demo walkthrough: Client forms (Create/Edit/Delete)Learn how Server Connect Actions power forms: POST validation, dbupdater INSERT/UPDATE/DELETE, and client-side error/success states.Demo walkthrough: Contact edit (update + delete)Use the real contact edit page and its update/delete actions to connect restored form state, validated inputs, and the backend updater steps.Demo walkthrough: Task edit (update + delete)Use the real task edit page and its update/delete actions to connect edit-form state, dbupdater steps, and result handling.Demo walkthrough: Files upload (repeat + refresh)Use the real files page and upload action to connect multipart upload, repeat-driven inserts, and the frontend refresh loop.Demo walkthrough: Files library (query + links)Use the real files page and list action to connect the files library query, its project/client joins, and the links the page exposes downstream.Demo walkthrough: User update (routing + session + security)Use the real users/update.json action in Demo Projects HQ to connect route params, session context, permissions, and a secure database update.
Related deep dives
Security: Restricting Access to Your PageUse the App Root security properties to understand shared layout protection, page-specific access rules, and the inspector fields that control login and permission redirects.Server Connect Editor: Database actions (hub)Start here for database steps in Server Connect Actions: SELECT queries with the Query Builder and INSERT/UPDATE/DELETE with the Updater dialog.Database: Query Builder (SELECT)Use the Database Query Builder dialog (opened from a dbconnector SELECT step) to inspect tables, columns, conditions, sorting, and preview the generated SQL.