Component Events

In WaveMaker, every UI component (such as Buttons, Forms, Dialogs, etc.) exposes a set of lifecycle methods and event callbacks. These events allow developers to respond to user interactions and component state changes by executing custom logic. UI component events provide a way to extend component behavior without modifying the component itself.

For example, Handling Button Click to Trigger Login Action, the following would be the code:

    Page.submitButtonClick = function ($event, widget) {
        // Display a loading spinner to indicate processing
        Page.Widgets.spinner.show = true; 

        // Retrieve the submitted data from the User Credentials form
        var output = Page.Widgets.UserCredentialsForm.dataoutput;

        // Bind form values to the login action parameters
        App.Actions.loginAction.dataBinding = {
            "j_username": output.email,
            "j_password": output.password.value,
            "j_rememberme": false
        };

        // Invoke the login action to authenticate the user
        App.Actions.loginAction.invoke();
    };

info

For Component Life Cycle Events and Methods refer to the specific Component Documentation.

Events can be grouped by the type of user interaction or browser action that triggers them:

• Mouse Events: click, double click, mouse enter, mouse leave, and so on.

      // WM Script for button double click
      Page.UserButtonDblclick = function ($event, widget) {
          // Enable edit mode
          Page.Widgets.employeeForm.isEditMode = true;
  
          // Set focus to the first input field
          Page.Widgets.firstNameInput.setFocus();
      };

• Keyboard Events: keypress, keydown, keyup, etc.

      // WM Script for button key press
      Page.UserButtonKeypress = function ($event, widget, item, currentItemWidgets) {
          // Prevent action for restricted keys
          if ($event.key === 'Tab') {
              $event.preventDefault();
          }
      };

• Window/Document Events: load, unload, resize, scroll, DOMContentLoaded, etc.

      window.onload = function () {
          //  Register global event listeners
          window.addEventListener('resize', function () {
              console.log('Window resized');
          });
      };

UI Event Object

For every event handler function, a parameter is often defined with names such as $event , event , or e. This parameter is referred as event object. It is automatically passed to event handlers and provides additional information and functionality related to the event that was triggered. This object contains useful properties and methods related to the event

• event.type: Returns the type of the event as a string (e.g., 'click', 'keydown').

• event.target: Refers to the element that triggered the event.

• event.preventDefault(): A method to stop the browser's default action for that event (e.g., preventing a form from submitting).

      Page.UserButtonclick = function ($event, widget) {
          
          // $event.type: Identify the event type
          if ($event.type === 'click') {
              console.log('Button clicked');
          } else if ($event.type === 'keydown') {
              console.log('Key pressed');
          }
  
          // $event.target: Access the element and apply UI change to the triggering element
          var sourceElement = $event.target;
          console.log("Triggered by element:", sourceElement);
          sourceElement.style.border = "2px solid #4CAF50";
  
          // $event.preventDefault(): Prevent default browser behavior
          if ($event.type === 'click') {
              $event.preventDefault();
              console.log("Default click behavior prevented");
          }
      };