Events & actions

Learn how App Connect turns user interactions into declarative behavior: choose an event, attach one or more actions, apply modifiers, and let bindings react to the updated state.

Events & actions

This tour builds the event-to-action mental model that underpins most App Connect interactions. You will trace how a user event is configured in Properties, how Wappler stores the action list behind that event, and how the rest of the page reacts when the action runs.

Event → action

The goal is to read an event configuration like a simple sentence: when this happens, run these actions, then let bindings and components respond. Once that clicks, click, submit, and keyup handlers all follow the same pattern.

Event

When something happens.

Action

What should run.

Reactivity

Actions update data → UI updates automatically.

Where you configure it

Events, actions, and modifiers are configured in the Properties panel for the selected component.

Working with the Click event and modifiers

The Click event is the most common event. Modifiers control default behavior and add conditions.

Actions Picker (Click)

The Actions Picker defines what runs when the button is clicked. This step matters because Actions Picker (Click) is part of Selection Panels Properties Click, and understanding that context makes the next action easier to repeat in your own project.

Use modifiers

Use prevent/stop/once/capture and key/button modifiers to control behavior without manual code. This step matters because Use modifiers is part of Selection Panels Properties Clickmods, and understanding that context makes the next action easier to repeat in your own project.

Conclusion

Next, go deeper into collections and traversal.

Pick your next tour

Continue learning App Connect.