Skip to main content

App and Page Lifecycle Events

App Events​

Application events allow developers to run logic at the app scope along with logic tied to specific pages or components. These events are triggered at predefined stages of the application lifecycle and are used to implement logic that applies across the entire application.

Application events are typically used for tasks like global configuration, initializing shared variables, setting up services, handling authentication, or performing app wide cleanup. This ensures common logic is centralized and reused across the entire application instead of being duplicated across pages.

WaveMaker Studio defines application event functions in App.js. The application supports the following app events:

  • onAppVariablesReady
  • onSessionTimeout
  • onPageReady
  • onServiceError

onAppVariablesReady​

The onAppVariablesReady callback is invoked after all application variables are initialized and available for use. This callback should be used to perform actions that depend on application variables.

    /* perform any action on the variables within this block(on-page-load) */
    App.onAppVariablesReady = function () {
        /*
            * variables can be accessed through 'App.Variables' property here
            * e.g. App.Variables.staticVariable1.getData()
        */

        // ex-1: Load user profile data after login
        App.Variables.GetUserProfile.invoke();

        // ex-2: Initialize global configuration values
        App.appConfig = App.Variables.AppConfigVariable.getData();
    };

onSessionTimeout​

The onSessionTimeout callback is invoked when the user session expires due to timeout. This callback allows the application to handle session expiration events.

    /* perform any action on session timeout here, e.g clearing some data, etc */
    App.onSessionTimeout = function () {
        /*
            * NOTE:
            * On re-login after session timeout:
            * if the same user logs in(through login dialog), app will retain its state
            * if a different user logs in, app will be reloaded and user is redirected to respective landing page configured in Security.
        */
            
        // ex-1: Clear sensitive application data
        App.Variables.UserProfile.setData(null);
        App.Variables.CartData.setData([]);

        // ex-2: Show session timeout notification
        App.Variables.appNotification.setMessage(
            "Your session has expired. Please login again."
        );
    };

onPageReady​

The onPageReady callback is invoked after the execution of the page onPageReady function. This callback is intended for implementing logic that must execute across all pages.

    App.onPageReady = function (activePageName, activePageScope, $activePageEl) {
        /*
            * This application callback function will be invoked after the invocation of PAGE onPageReady function.
            * Use this function to write common logic across the pages in the application.
            * activePageName : name of the page
            * activePageScope: scope of the page
            * $activePageEl  : page jQuery element
        */
        // ex-1: Track page navigation (analytics/logging)
        console.log("Page loaded:", activePageName);

        // ex-2: Apply common UI behavior across pages
        activePageScope.showHeader = true;
    };

onServiceError​

The onServiceError callback is invoked when a service or variable invocation results in an error. This callback enables centralized handling of service errors across the application.

    App.onServiceError = function (errorMsg, xhrObj) {
        /*
            * This application level callback function will be invoked after a Variable receives an error from the target service.
            * Use this function to write common error handling logic across the application.
            * errorMsg: The error message returned by the target service. This message will be displayed through appNotification variable
            * You can change this though App.Variables.appNotification.setMessage(YOUR_CUSTOM_MESSAGE)
            * xhrObj: The xhrObject used to make the service call
            * This object contains useful information like statusCode, url, request/response body.
        */
        // ex-1: Handle unauthorized access (401)
        if (xhrObj.status === 401) {
            App.Variables.appNotification.setMessage(
                "Session expired. Please login again."
            );
        }

        // ex-2: Log error details for debugging
        console.error("Service Error:", {
            message: errorMsg,
            status: xhrObj.status,
            url: xhrObj.responseURL
        });
    };

Page Events​

In a WaveMaker application, each page is composed of Markup, Script, and CSS files. Page events are defined and managed within the page script file, which allows developers to implement logic specific to an individual page.

Page.onReady​

The Page.onReady lifecycle method is invoked after the page has been fully rendered and initialized. This method is used to write initialization logic that must execute when the page is ready for interaction.

Invocation Timing:

  • Triggered once each time the page is loaded

  • Invoked after all widgets and variables on the page are available

        Page.onReady = function () {
            /*
                * variables can be accessed through 'Page.Variables' property here
                * e.g. to get dataSet in a staticVariable named 'loggedInUser' use following script
                * Page.Variables.loggedInUser.getData()
                
                * widgets can be accessed through 'Page.Widgets' property here
                * e.g. to get value of text widget named 'username' use following script
                * 'Page.Widgets.username.datavalue'
            */
            
            // ex-1: Track page navigation
            console.log("Page loaded:", activePageName);

            // ex-2: Invoke cardData variable
            Page.Variables.CardData.invoke();
        };

Page resources can be accessed within Page.onReady as follows:

  • Variables: Accessed using Page.Variables, include reading datasets, invoking service variables, or setting default values. 
    Page.Variables.getEmployeeDataset.invoke();
  • Components: Accessed using Page.Widgets, Components can be read or modified to control UI behavior and display values. 
    Page.Widgets.UserButton.Caption = "Lucas";

onDestroy​

The page lifecycle event onDestroy event that is triggered when a page is about to be destroyed, typically when the user navigates to another page, app unloads the current page or page component is removed from memory.

    Page.mainpageDestroy = function ($event, widget) {
        // ex-1: Reset Page Variables
        Page.Variables.tempData.setData(null);
        Page.Variables.cartData.setData({});

        // ex-2: Clear Timers / Intervals
        if (Page.autoRefreshInterval) {
            clearInterval(Page.autoRefreshInterval);
            Page.autoRefreshInterval = null;
        }
    };