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.
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.
Control Bootstrap 5 modals reactively with App Connect: bind visibility, call show/hide actions, and handle modal events.
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.
Demo walkthrough: Dynamic Real Estate Site
Guided walkthrough of the Demo Dynamic Real Estate Site, focusing on App Connect data loading, filtering, and UI bindings.
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.
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.
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.
Go to