App and page lifecycle events
Application and page lifecycle events run logic at app scope or on a single screen. Define app handlers in App.js and page handlers in each page Script tab. For how events fit with variables and UI handlers, see Event handling overview.
App events
Use app events for global configuration, shared variables, authentication flows, and centralized error handling. Studio generates stub functions in App.js for:
onAppVariablesReadyonSessionTimeoutonPageReadyonServiceError
onAppVariablesReady
Runs after application variables are initialized and available.
App.onAppVariablesReady = function () {
App.Variables.GetUserProfile.invoke();
App.appConfig = App.Variables.AppConfigVariable.getData();
};
Access variables through App.Variables, for example App.Variables.staticVariable1.getData().
onSessionTimeout
Runs when the user session expires.
App.onSessionTimeout = function () {
App.Variables.UserProfile.setData(null);
App.Variables.CartData.setData([]);
App.Variables.appNotification.setMessage(
"Your session has expired. Please login again."
);
};
On re-login after timeout, the same user may keep app state. A different user typically reloads the app and lands on the security landing page you configured.
onPageReady
Runs after a page’s own Page.onReady handler completes. Use it for logic that should run on every page (logging, shared UI flags, analytics).
App.onPageReady = function (activePageName, activePageScope) {
console.log("Page loaded:", activePageName);
activePageScope.showHeader = true;
};
| Parameter | Description |
|---|---|
activePageName | Name of the page that finished loading |
activePageScope | Page scope object (Page instance for that screen) |
onServiceError
Runs when a service variable invocation fails. Use it for shared error messages and status handling.
App.onServiceError = function (errorMsg, error) {
if (error?.response?.status === 401) {
App.Variables.appNotification.setMessage(
"Session expired. Please login again."
);
}
console.error("Service error:", errorMsg, error?.response?.status);
};
| Parameter | Description |
|---|---|
errorMsg | Message from the target service (often shown via appNotification) |
error | Error object from the HTTP client (includes response.status, URL, and body when present) |
Override the default notification with App.Variables.appNotification.setMessage("Your message").
Page events
WaveMaker exposes page-level lifecycle and viewport events so you can run custom logic at the right time. These are implemented in the runtime for React Native builds.
Each page has Markup, Script, and Style. Page lifecycle handlers live in the page script file.
| Event | When it runs |
|---|---|
Page.onReady | Page rendered; widgets and page variables are available |
Page.onAttach | Screen gains navigation focus (including return to a cached page) |
Page.onDetach | Screen loses focus before the page may stay in cache |
Page.onDestroy | Page instance is disposed |
Page.onOrientationchange | Orientation changes (portrait vs landscape) |
Page.onResize | Viewport size changes |
Wire on Resize and on Orientation Change on the page root in markup, not on child widgets. Page cache behavior affects on Attach and on Detach; see Page properties.
Page.onReady
Runs once each time the page loads, after widgets and page variables are ready.
Page.onReady = function () {
Page.Variables.CardData.invoke();
};
In Page.onReady you can use:
- Variables:
Page.Variables.getEmployeeDataset.invoke() - Widgets:
Page.Widgets.username.datavalue
Page.onAttach
Runs when the page becomes active again, including when you navigate back to a cached page and the screen receives focus.
Page.onAttach = function ($event, widget) {
Page.Variables.GetOrders.invoke();
};
Page.onDetach
Runs when the page loses focus before the page may stay in cache during navigation away. Use it to pause timers or clear in-memory state held on Page.
Page.onDetach = function ($event, widget) {
if (Page.dashboardRefreshTimer) {
clearInterval(Page.dashboardRefreshTimer);
Page.dashboardRefreshTimer = null;
}
Page.Variables.selectedEmployee.setData(null);
Page.Variables.filterCriteria.setData({});
};
Page.onDestroy
Runs when the page instance is disposed, for example when navigating away without cache or when the app tears the screen down.
Page.onDestroy = function ($event, widget) {
if (Page.customSubscription) {
Page.customSubscription();
Page.customSubscription = null;
}
};
Page.onOrientationchange
Fires when the viewport orientation changes (portrait versus landscape). The third argument data includes screenWidth and screenHeight when present, same as on Resize.
Page.onOrientationchange = function ($event, widget, data) {
if (!data) {
return;
}
Page.isLandscape = data.screenWidth > data.screenHeight;
};
Use Page.isLandscape in scripts or bindings to branch UI logic after rotation.
Page.onResize
Fires when the viewport size changes (for example device rotation or a resized preview window in Studio). The callback receives screenWidth and screenHeight on data. Wire this event on the page root in markup, not on child widgets.
Page.onResize = function ($event, widget, data) {
if (!data) {
return;
}
Page.lastScreenWidth = data.screenWidth;
Page.lastScreenHeight = data.screenHeight;
};
Store dimensions on Page and use them in bindings or scripts when layout depends on the current viewport.