Skip to main content

UI events

UI events fire when the user interacts with a widget (tap, press, focus, text entry) or when a widget-specific callback runs. Wire them in Studio on the widget Events tab or in markup (for example on-tap on a button).

For how UI events relate to page lifecycle and variable callbacks, see Event handling overview. Component behavior events (form submit, list selection) are documented per widget in React Native component docs.

Handler names​

Studio adds a function on the page script when you pick an event. The name combines the widget name and the event:

Page.{widgetName}{EventName}

Examples: Page.submitButtonTap, Page.emailInputChange, Page.employeeListSelect.

Wire a tap handler​

Page.submitButtonTap = function ($event, widget) {
    Page.Widgets.spinner.show = true;

    var output = Page.Widgets.UserCredentialsForm.dataoutput;

    App.Actions.loginAction.dataBinding = {
        j_username: output.email,
        j_password: output.password.value,
        j_rememberme: false
    };

    App.Actions.loginAction.invoke();
};

Common event groups​

GroupTypical eventsUse for
Touch and pressonTap (most widgets); onBackbtnclick, onChipclick, onDraghandleiconclick on navbar, chips, and bottom sheetButtons, anchors, list rows, chips, navbar back, bottom sheet drag handle
FocusonFocus, onBlurInputs, search fields
Value changeonChangeText, number, toggle, select when the value changes
KeyboardonKeypress, onKeyupHardware keyboards or Studio web preview when the widget supports them

Available events depend on the widget. Open the widget Events tab in Studio or the component Storybook Events tab for the full list.

Touch and press​

Page.saveButtonTap = function ($event, widget) {
    Page.Variables.saveEmployee.invoke();
};

Input change and focus​

Page.quantityInputChange = function ($event, widget, newVal, oldVal) {
    Page.Variables.lineTotal.setData(newVal * Page.unitPrice);
};

Page.searchFieldBlur = function ($event, widget) {
    Page.Variables.searchProducts.invoke();
};

List and repeater context​

List, cards, and similar widgets may pass extra arguments (for example the selected item or row widgets):

Page.orderListSelect = function ($event, widget, item, currentItemWidgets) {
    Page.Variables.selectedOrderId.setData(item.id);
};

Viewport size and orientation​

Do not use window.onload or window.addEventListener('resize') in page scripts. Use page lifecycle handlers instead:

The $event and widget arguments​

Most UI handlers receive:

ArgumentDescription
$eventEvent payload from the runtime (type, native event details when present)
widgetThe WaveMaker widget instance that fired the event

Prefer widget (or Page.Widgets.{name}) to read or update UI state. Avoid DOM APIs such as document, window, or element.style in mobile page scripts.

Page.confirmButtonTap = function ($event, widget) {
    if ($event && $event.type) {
        console.log("Event type:", $event.type);
    }
    widget.show = false;
};