App Connect
Your guided index of App Connect tours: reactive model, data components, bindings, events/actions, and common workflows — explained visually in Wappler’s panels and pickers.
Choose an App Connect Area
Use this hub when you are building reactive behavior with App Connect. Start with the first-step tours, then move into categories, forms, state, interactions, and reference hubs.
Choose an App Connect path
Section titled “Choose an App Connect path”Start with first steps, then move into categories, best practices, and reference hubs.
Start here
Add App Connect to Your Pages
Understand when a page needs App Connect and how to introduce reactive behavior without turning a simple page into unnecessary complexity.
Counter (reactivity starter)
A compact App Connect starter in Wappler: a Variable stores state, a button updates it, and a bound text label reflects the new value immediately.
Calculator (expressions + toNumber)
Build a small reactive calculator in Wappler and use it to understand expressions, input scope, and why toNumber() is essential before doing numeric math in bindings.
App Connect Quick Overview
A hands-on intro to App Connect in Wappler: review key components, configure Properties, and attach an event action.
Bootstrap 5 dynamic modals (App Connect)
Control Bootstrap 5 modals reactively with App Connect: bind visibility, call show/hide actions, and handle modal events.
Demo walkthrough: Dynamic Real Estate Site
Guided walkthrough of the renewed Real Estate demo: Server Connect APIs, App Connect Data Views, filters, map, and repeated listings.
Contact list to detail route handoff
Use the real contacts and contact detail pages to see how App Connect turns a repeated list, route parameter, and detail loader into one continuous record flow.
Contact create and success handoff
Use the real contact add page to see how App Connect combines lookup data, submission state, and the success handoff into the new contact detail page.
Contact delete confirmation and return handoff
Use the real contact edit page to see how App Connect keeps the destructive delete flow explicit with confirmation, request state, and a return-to-contacts handoff.
Files library stats, links, and navigation
Use the real files page to see how App Connect turns loaded file rows into summary cards, outbound file links, and project-navigation links.
Browser component (navigation + viewport)
Use the Browser component for navigation, online/offline state, viewport, scroll, and history events.
Flows (multi-step client workflows)
Learn when App Connect flows are worth introducing, how they differ from a single event → action handler, and how to think about multi-step client workflows before building them.
Newsletter: Properties Panel clip
A short Demo Projects HQ tour used to capture the 7.8.0 newsletter clip for the updated Properties panel workflow.
Reactive basics (data → UI)
A beginner-friendly mental model for App Connect: how data, bindings, events, actions, and Dynamic Attributes combine into reactive UI updates.
Core concepts (expressions + bindings)
Understand App Connect’s reactive model, expression rules, scoping, and how to use Wappler’s data/action pickers to build bindings visually.
Browse categories
Core components
Data-oriented building blocks: data components and common data sources.
State management
Keep UI state in URL and browser storage (Query/Cookie/Session/Local).
Data bindings & formatting
Expressions, bindings, pickers, and formatter chains for display-ready values.
Interaction
Wire events to actions, and work with Dynamic Events/Attributes.
Forms
Bind form inputs, configure validation, and build repeatable sections using concrete Demo Projects HQ pages where possible.
Reference hubs
App Connect Reference Index
Gateway to the generated App Connect reference collections, so you can jump into current web and mobile reference coverage without replaying full how-to tours.
Web Framework References
Browse the current web-facing App Connect reference coverage for Bootstrap 5 and shared framework-agnostic surfaces from one searchable collection.
Mobile Framework References
Browse the current mobile-first App Connect reference coverage for Framework7 7.8 and related Capacitor surfaces from one searchable collection.
Best practices
Organization best practices (data-first)
Keep App Connect pages readable and fast: organize non-visual data components (Variables, Data Stores, Server Connect) at the top, named and grouped before UI usage.
Performance: conditional rendering (dmx-if)
Improve App Connect performance by using conditional regions (dmx-if) and placing conditional-only data/components inside them so they don’t render or process until needed.