Visibility control
Understand whether the modal is driven by direct actions, bound state, or a combination of both.
Bootstrap 5 dynamic modals (App Connect)
Control Bootstrap 5 modals reactively with App Connect: bind visibility, call show/hide actions, and handle modal events.
Introduction
Section titled “Introduction”This tour introduces Bootstrap 5 modals as reactive UI components inside App Connect. You will look at how the modal is represented in Structure, which bindings and actions control its visibility, and how modal events fit into a larger client-side workflow.
Tour goals
Section titled “Tour goals”By the end of this tour, you should be able to explain the full modal control loop in Wappler: what opens the modal, what closes it, which state or event drives that change, and where you inspect those bindings and actions in the UI.
Event flow
See how modal open and close events can trigger follow-up UI behavior without custom boilerplate.
Inspection points
Know where to select the modal and where its Properties reveal the relevant actions and bindings.
Inspect the modal component and the controls that trigger it
Trace how show and hide behavior is configured in App Connect
Use that mental model to build modal workflows without hand-written DOM code
Where you configure it
Section titled “Where you configure it”Use App Structure to select modal elements and Properties to configure bindings, events, and actions.
Wrap-up
Section titled “Wrap-up”Review what you did and choose a next tour.
Next steps
Section titled “Next steps”Pick a related tour to continue.
Bind modal show/hide state
Trigger modal actions
Handle modal events