WaveMaker Docs

WaveMaker Docs

  • Get started
  • Widgets
  • Mobile
  • How-to
  • Enterprise
  • Releases
  • Blog
  • Sign-in

›Events

Getting started

  • Introduction
  • Walkthrough

Pages

  • Pages Overview
  • Creating a Page
  • Layout and Styles

    • Page Layout
    • Templates
    • Themes
    • Accessibility

    Page Configure

    • Page Artefacts
    • Page Cache
    • Partial Page
    • Page Parameters
    • Examples

    Page Actions

    • Navigation
    • Events

    Custom Development

    • Theme Editor
    • Manual Theme
    • Create Template

SSPA

  • Micro Frontend App

Databases

  • Database Services Overview
  • Database Tools
  • Database Designing

    • Working with Databases
    • Data Modelling
    • DataBase Schema Modes
    • Working with DB Schema
    • Database Views
    • Temporal Support

    Accessing Database

    • Accessing Database

    Queries and Procedures

    • Working with Queries
    • Working with Stored Procedures
    • Version Queries & Procedures
    • Blob Queries and Procedures
    • Queries & Procedures - Java Services

    Database Variables & API

    • Database CRUD
    • CRUD Event Listeners
    • Database APIs
    • Database Service APIs

REST & SOAP

  • Web Services Overview
  • Restful

    • REST Services
    • Secure Server-side Properties
    • REST Request Timeouts
    • REST Services using OAuth 2.0

    SOAP

    • Working with SOAP Services
    • Imported SOAP APIs

    Websocket

    • Working with WebSockets

    APIs

    • API Designer
    • Mocking APIs
    • Mocking REST API
    • Swagger Import

    Variables

    • CRUD Variable
    • Service Variable
    • WebSocket Variable

Java Services

  • Java Service
  • Java Services

    • Java Integration Services
    • DB Service Integration
    • API Composition
    • Variables for Invocation
    • Generated REST APIs (API Designer)

    Java Services Variables & API

    • Variable for Java Service
    • Java Service APIs

    Source Files

    • Resources and Third-party Libraries
    • Using 3rd party JavaScript files
    • Using 3rd party jar files

Variables & Actions

    Variables

    • Variables Overview
    • Model Variable
    • Device Variables

    Binding

    • Variable Binding
    • Custom Formatter

    Actions

    • Actions
    • Navigation Action
    • Login Action
    • Logout Action
    • Timer Action
    • Notification Action

    Events

    • Events
    • JavaScript Access

Security

    App Security

    • Overview
    • Authentication
    • Authorization
    • Access Levels & Permissions
    • Login Configuration
    • Session Persistence
    • SSL Encryption
    • XSS antisamy policy configuration
    • OWASP
    • XSS Prevention
    • Central Authentication System
    • Token Based Authentication
    • SAML Integration
    • Secure Connection for Deployed Apps
    • Concurrent Sessions
    • HostHeader Injection

    Security Variable and API

    • Security Variables
    • Remember Me
    • Variable for Security Service
    • Security Service APIs

Developer options

  • Test and Run (Preview) Apps
  • Chrome Extension: Devtool
  • Debugging
  • Inspection Framework
  • Build Options
  • WaveMaker Mobile Apps Automation
  • Developer Integration

    • Project User Management
    • Developer Collaboration
    • Extending the Application using IDEs
    • Import, Export & Update Apps
    • Project Shells

    Add-ons

    • Localization
    • Artifacts Repository

Deployment

  • Overview
  • Deployment Profile
  • One-click Deployment
  • WaveMaker CI/CD Pipeline

    • Overview
    • Configuration Profiles
    • Configuration Management
    • Pipelines and Phases

    Pipeline Configuration

    • Default Pipelines in WMO
    • Configure Pipeline in WME

    Deploy to Cloud Providers

    • AWS
    • Azure
    • Google Cloud
    • DigitalOcean

    Pipeline Configuration cont.

    • Phase configurations
    • Webhooks Integration
    • Tests Integration

    Manage Deployed Apps

    • Manage Deployed Apps

    Integrate with your CI/CD Providers

    • Push Code to External repo
    • Custom VCS Integration
    • Export WaveMaker Application
    • Building Project with Maven
    • Build with Docker
    • Jenkins Integration
    • Deploy using Docker Compose
    • Deployment to Heroku

    WaveMaker apps Interation with CDN

    • App Integration with AWS CDN
    • App Integration with Azure CDN

    Deployment to external web servers

    • Application Server Overview
    • Deploy to Tomcat
    • WebSphere
    • JBoss - WildFly
    • WebLogic Server

Connectors

  • Introduction
  • Architecture
  • Import Connectors
  • List of Connectors
  • Build a New Connector

Teams

  • Overview
  • Team Setup
  • Dashboard
  • Manage Users
  • Manage Projects
  • Manage Prefabs
  • Project Branches
  • Manage Roles
  • Code Repository
  • Import VCS Project
  • Team Profile
  • Manage Subscription
  • FAQs
Edit

Accessing Elements via JavaScript


A Page in WaveMaker application consists of Markup, Script & CSS files. In this document, we will go through the various functions/methods that are available in the script file. We will see how these methods can be created and modified.

Page script can be accessed from the script tab on your project workspace. Using JavaScript, the functionality of your project can be enhanced. The various methods and properties associated with each of the Studio elements can be found in the API Documentation.

Page Lifecycle

When a Page is created, it has a single context object (singleton instance) called "Page" in the JavaScript. You can attach lifecycle methods, events, and callbacks to this object. When a new page is created it creates the "onReady" lifecycle methods where you can write the code to be invoked after the page is rendered completely.

There are two more singleton instances used in the platform named "Partial" & "Prefab" which are used in Partial pages and Prefab page respectively.

note

_onPageReady _function has been deprecated since 10.0 release, use Page.onReady instead.

In the following sections, we will be seeing how each element of the project can be accessed using the Script.

Widget Lifecycle

For every Widget, there are a set of lifecycle methods and event callbacks that can be accessed from the JavaScript.

The events can be accessed from the properties panel for the specific Widget and assigned to a JavaScript or any other actions. JavaScript can be written from the Script tab, as per the app requirements. For example, to display an alert message on click of a button, the following would be the code:

Page.button1Click = function($event, widget) {
    alert("Hello")
};

For Widget Life Cycle Methods usage examples refer to the specific Widget Documentation.

Custom Methods

You can write your own custom functionality and access the methods from anywhere in the page.

Page.myMethod = function(parameters) {
// your code here
};

App Variables

Variables created with Owner set to App can be accessed from all Pages, Partials, and Prefabs

App.Variables.<variable-name>.<fields/methods>

Accessing the Page/Partial/Prefab Widgets and Variables

The Widgets and Variables of a page can be accessed through the page script. The widgets and variables operate within the scope they are created in. Additionally, the widgets and variables defined in a Page can be accessed within the partial pages and vice versa.

The Widgets and Variables of a page can be accessed through the page script. They are exposed as 'Widgets' and 'Variables' properties in the respective page scope.

To access variables and widgets of a page named "Main" use following scripts in Main page controller:

/** to set "caption" property of a label widget (eg 'label1') **/
Page.Widgets.label1.caption = "New Caption";
/** to change a variable (eg 'userInfoVariable') dataSet property, use the script: **/
Page.Variables.userInfoVariable.dataSet = {dataValue": "new value"};
note

Replace Page with Partial or Prefab when working with in Partial or Prefab, respectively.

Accessing the Widgets and Variables of Partial from Parent Page through Scripting

The Widgets and Variables inside a partial page can be accessed from the parent page script through the 'Widgets' and 'Variables' property exposed in the scope of the partial container widget.

Page.Widgets.[container_name].Widgets.[widget_name].[widget_property];
Page.Widgets.[container_name].Variables.[variable_name];

Example To access variables and widgets of a partial page loaded in a page named "Main".

/** to set the "caption" of a label widget (eg label1) of a partial page loaded as a content of panel widget (eg panel1) **/
Page.Widgets.panel1.Widgets.label1.caption = "New Caption";

/** to access partial page's Variable (say staticVariable1) in the parent page 'Main' **/:
Page.Widgets.panel1.Variables.staticVariable1.dataSet = {"dataValue": "new value"};

App Level Access

As with the Pages, App lifecycle events and variables can be accessed from the app.js file. This file can be accessed from the File Explorer.

The following methods are available:

  • onAppVariablesReady - this refers to the Variables created with App as Owner. Variables can be accessed through 'App.Variables' property: e.g. App.Variables.staticVariable1.getData()
  • onSessionTimeout - perform any action on session timeout here, e.g clearing some data, etc
  • onPageReady - This application level callback function will be invoked after the invocation of PAGE level onPageReady function
  • onServiceError - 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
Last updated on 9/9/2020 by Naresh Ravulapalli
← EventsOverview →
  • Page Lifecycle
  • Widget Lifecycle
  • Custom Methods
  • App Variables
  • Accessing the Page/Partial/Prefab Widgets and Variables
  • Accessing the Widgets and Variables of Partial from Parent Page through Scripting
  • App Level Access
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2023 WaveMaker, Inc. All rights reserved.