Class Name
How This Documentation Works

For admin only

Abstract Editor

Superclass of a set of editor classes that should become the default editors by wm 6.2

Accordion Layers

The Accordion widget is a Layers widget (see the Layers widget) for adding accordion layers. If you decide you don't want to use accordion layers, you can easily switch to another style of layer by changing the layersType property.

Ace Editor

For Studio use only


The Application class is the parent class for all projects.


This widget creates a fixed border between two widgets.

Breadcrumb Layers

The breadcrumb layers widget contains a set of layers, but only shows links across the top to layers that you have visited recently.

Going to a previously visited Layer will hide any layer seen since then.

Layers will be reordered as needed in order to present them in the order in which they have been visited. Using setLayerIndex therefore may be risky.

Busy Button

A button with a status indicator to show whether a particular service call - such as a database query - has completed.


The button widget triggers an action when it is clicked.


Displays a month calendar, allowing user to select a particular date. Where the date widget is a popup calendar, the calendar widget display the calendar at all times.


Allows a user to enter input by checking a box.

Check Box Editor

WARNING: This widget is deprecated; please use CheckBox instead!

Checkbox Set

Color Picker

Allows user to select a color from a palette.


This is the base class of all things your liable to directly interact with in your wavemaker application.

Composite Publisher

The composite publisher allows you to create a single widget that contains other widgets, for example a login widget.


A container is the parent class of all types of page elements used to contain a set of other page elements. A container widget can contain other widgets. Examples include panels, layers and pages.


The content widget can display html content that has been entered into the source code Markup tab.


This is the basic widget class; all page elements that go on the screen are subclasses of Control


Allows user to enter a currency value with two decimal places, such as $76.20. Performs validation so user can only enter a valid number.

Currency Editor

WARNING: this widget is deprecated. Please use Currency instead.

Currency Formatter

Provides options for turning a string into a currency string


Dashboard widgets can create portal-style layout made up of a number of small windows that each display different information, like MyYahoo.

Each portlet is a PageContainer.

You can control the width and height of your portlets by setting the width and height of the layoutBox for the page in the portlet.

Data Form

This widget is designed for the do-it yourself developer. It provides the concept of a dataSet and a dataOutput (aggregating all values of the form into a single object), and provides some properties to help you manage your form. But it provides minimal automation, and is called a DataForm because it deals with data, not services. There is no built-in LiveVariable reading/writing to your database. The purpose in providing this form is to address the problem many users ran into with wm.LiveForm: it tried to do too much, and too often developers had to figure out how to work around all of the built-in behaviors.

DataForm Features:

  • Quickly generate a form simply by setting the type property to any java, webservice, database or custom type
  • Bind your LiveVariable/ServiceVariable to the dataSet to easily populate the editors
  • Bind your LiveVariable/ServiceVariable to the dataOutput to easily send data to the server
  • Bind your form editors dataValue property (LiveForm did not allow binding the editor's dataValue)
  • Bind your DataForm's dataOutput fields (LiveForm did not allow binding the form's dataOutput). This means that the developer can control what the value of the form's dataOutput is, rather than the editors in the form being the only control for setting the dataOutput.
  • populateDataOutput no longer needs to be explicitly called; its now called any time an editor's value changes

Managing DataForm's readonly state

Despite our goal of tooling this as little as possible to leave you with the simplest possible widget, there was a concern that users should not be editing primary keys in your form. As such, there are options to help you change the readonly state of all editors in your form to false EXCEPT for those that should not be editable.

Changing the readonly property at design time, or using this.dataform1.setReadonly(false) at runtime will change all editors to be editable (or uneditable). Use this for direct control over your form's readonly state.

Use this.dataform1.editNewObject() to edit a new object. This method will do the following:

  1. Change the readonly state of all editors that should be editable when doing an insert operation, change all other editors to not be editable.
  2. Clears all editors for inserting new values
  3. Fires any bindings on the dataValues of the editors (if the editor has a binding and its dataValueBindingEvaluated property is set appropriately)
  4. Focuses on the first editor
Use this.dataform1.editCurrentObject() to edit the value currently shown in the form. This method will do the following:
  1. Change the readonly state of all editors that should be editable when doing an update operation, change all other editors to not be editable.
  2. Fires any bindings on the dataValues of the editors (if the editor has a binding and its dataValueBindingEvaluated property is set appropriately)
  3. Focuses on the first editor
Use this.dataform1.cancelEdit() to restore the form to whatever values are coming from its dataSet (grid.selectedItem for example), clearing out all user changes. This also fires the form's onCancelEdit, which even Could be used to update the readonly state of the form. (shown in DataForm example project)

Note that for both editNewObject and editCurrentObject, if the form can determine which field is the primary key, it will make it uneditable. But you can turn off the form's setReadonlyOnPrimaryKeys property to make it change the readonly state for all editors.

Note that any editor that sets its ignoreParentReadonly property will not be changed by any of these methods.

Changing the dataSet when the user has made changes

The confirmChangeOnDirty property lets you control what happens if a new dataSet is given to the form (i.e. a new grid row is selected, and the form that is bound to the grid's selectedItem tries to update its dataSet) when the user has made changes to the form that would be lost. If you leave this property blank, then the form is updated without warning. Else the user is presented the message you provide in this property within a confirm dialog before their changes are lost.

Dealing with Service Calls with DataForm

While LiveForm has a LiveVariable built into it and communicates to the server for you, DataForm is intended to stip out all automation and leave the developer in control. Typically, you will want to bind a ServiceVariable's input or a LiveVariable's sourceData to dataForm.dataOutput, and have a button that fires the service variable. By putting the developer in control, the developer can perform a dozen different tasks prior to actually firing the service call, something much harder to do with a LiveForm.

Usage Notes:

  • After writing to the database, assuming the actual object written is returned (LiveVariables do this, ServiceVariables only do this if the server is designed to do this), its good practice to call this.dataForm.setDataSet(this.serviceVar); This insures that whatever is actually in the server (including the new primary key) now shows up in your form.
  • Any call to setDataSet on a form that has been edited will trigger the confirmChangeOnDirty prompt. To avoid this, call this.dataForm.clearDity() and THEN call this.dataForm.setDataSet(this.serviceVar);
  • Similarly, after trying to write a user's changes to a server, you should call either clearDirty or dataForm.cancelEdit() so that the next change in dataSet knows that the user's changes are no longer "dirty".
  • ServiceVariable/LiveVariable operations are now bindable; you can have a LiveVariable operation of ${dataForm1.noDataSet} ? "insert" : "update"; the editNewObject() method calls setDataSet(null) clearing all editors and also the noDataSet property so that your operation changes from insert to update.

Sample Project

Data Formatter

This class serves only as a superclass for classes that will format different kinds of data. The default formatter is used to display text.

Data Grid

WARNING: This widget is deprecated; please use DojoGrid instead!

Data Grid Column

WARNING: This widget is deprecated; please use DojoGrid instead!

Data Navigator

This is a specialized widget for use with LiveForms and Grids that allows the user to move through a list of records, similar to the record navigation feature of MS Access and FileMaker.

Data Set Editor

The DataSetEditor widget provides a way for users to select an item from a dataSet or options list.


An editor for entering in a date

Date Editor

WARNING: This widget is deprecated; please use Date instead!

Date Formatter

This class provides some options to format a string of text into a date.

Date Time

Provides an editor for entering a date and time, such as 7/29/11 4:00 PM

Date Time Formatter

Provides a superclass for DateFormatter and TimeFormatter; both of which use the same set of properties.


This is a replacement (beta) for LiveForm. Its a subclass of wm.DataForm that provides its own live variable and manages saving to the database for you. What benefits does this have over LiveForm?

  1. Comes with a useLoadingDialog property that automatically grays out the form any time its sending information to the server
  2. Comes with a formBehavior property that lets you automatically setup the form for doing insertOnly, updateOnly or standard (both insert and update) actions
  3. Comes with a readonlyManager property that automatically updates the readonly state of the form for you
  4. Comes with a setup dialog so that when a developer drags a DBForm off the palette, key settings can be quickly setup
  5. You can set bindings for the form's editor dataValue properties. See the editor's dataValueBindingEvaluated property to see when this binding will be applied. This provides an easy way to set the editor's value when the user hits the form's new or edit buttons.
  6. You can set bindings on fields of the form's dataOutput, and use this to change what is written to the database. This is a handy way to control what is written to the database without being limited to using editors to make this change.
  7. onEditNewObject and onEditCurrentObject events allow developers to further customize form behaviors and editor values
  8. onBeforeInsertCall/onBeforeUpdateCall/onBeforeDeleteCall events allow developers to modify what is sent to the server
  9. onInsertSuccess/onUpdateSuccess/onDeleteSuccess/onSuccess allow developers to handle different success events
  10. When saveData is called and the form is invalid, onSaveInvalidated event is fired
  11. When Delete button is clicked and the user hits "Cancel", onCancelDelete event is fired
Sample project:

Designable Dialog

This dialog is a normal dialog at runtime; but at design time, this dialog is treated as part of the designer's canvas. You can drag and drop widgets here, edit their properties and events, and do everything in this dialog that you do to your main page.


A dialog is a popup box or window.

Dijit Designer

A widget for quickly adding dijits to your project that aren't already listed in the palette.

Dojo Chart

The Dojo Chart widget is currently in beta.

Dojo File Upload

Allows a user to upload files to the server, such as images.


WARNING: FileUploadWidget's java service will not work correctly in WaveMaker 6.5.0, 6.5.1 or 6.5.2. Use WaveMaker 6.5.3 or later (or WaveMaker 6.4.6).

Dojo Fisheye

Allows user to select from a set of pictures or icons.

Dojo Flash File Upload

Allows user to upload multiple files to the server.

NOTE: If your users can't selected the desired file type, look at the fileMaskList property.

Dojo Gauge

Creates a gauge for visualizing values

Dojo Grid

Grid widgets show tabular data, such as data from a database table, a query, a Java method or a web service call.

For information on configuring columns, see

Dojo Lightbox

A simple dialog for browsing through a list of images.

Dojo Menu

The DojoMenu widget.

Draggable Tree

This is a tree that lets users drag nodes around. Examples of DraggableTree can be seen in studio's model and in the MenuDesigner.


WARNING: This widget is deprecated; please use specific typed editors instead such as Text Editor!

Edit Panel

The EditPanel Widget is automatically placed inside a LiveForm and holds buttons to perform create, update and delete operations.

Evaluation Formatter

Advanced widget used to format strings such as currency and date strings.

Facebook Activity Feed

A widget for displaying data from facebook describing recent activity such as comments on your website.

More details on properties can be found at

Facebook Like Button

Adds a facebook "Like" button to your page.

Fancy Panel

Also known as Titled Panel. This is a panel with its own titlebar header.

Feed List

Displays information from an RSS feed.

Filtering Lookup

This subclass of wm.Lookup lets you add a wm.Lookup that performs fast with large databases. wm.Lookup is good for up to 50 entries; If you have 100 or more entries you definitely want to use FilteringLookup instead.

Form Panel

What you get is a panel that supports the following form-specific properties:

  • readonly
  • captionSize
  • captionPosition
  • captionAlign
  • editorHeight
  • editorWidth
FormPanel also provides a type property; set it to have all editors for that type generated for you.

Unlike full featured forms, this form is just a panel for generating and laying out forms. It has no dataSet nor dataOutput.

Generic Dialog

A dialog is a popup window that displays text and can be dismissed by the user.

Google Map

A basic widget for loading a Google Map, and placing markers on the map.

A dataSet specifies the location, image and content of each marker to show on your map.


Displays HTML content.


Display web content.

Image List

The ImageList class represents a single image that contains a grid of icons.

Json Status

Indicates network activity generated by your application.


The label displays text on the page.

Large Text Area

Enables a user to enter in multiple lines of text.



The Layers widget is a container for individual layers. Layers are containers similar to pages but with a different scope and more flexible and efficient navigation possibilities (About Pages and Layers).


The Layout widget is a container for other widgets.

Link Formatter

Provides options for how a string will be turned into a link


Displays a list of information. Each row of the list may be selected and is exposes as the selectedItem of the List.

Use the dataSet property to assign the data source for the List. If the source has multiple fields for each item in the list then the list will display multiple fields of information.

Also see: DataGrid widget.

List Item

Represents a row in a wm.List

List Set

List Viewer

The list viewer is a beta widget that provides a very flexible way to present a list of results. It is more flexible than a grid but also more complex to set up.

Live Form

The LiveForm widget automates the creation of forms that create, update and delete data in an underlying data table.

Live Panel

Live Variable

A Live Variable holds the result of a database query.

Loading Dialog

This dialog is an alternative to wm.BusyButton and wm.JsonStatus for showing that something is happening. This dialog is a good way to block access to part of your page while at the same time indicating that data is loading from the server.

Login Variable

Use this Service Variable to log the user in. If you leave useDefaultSuccessHandler set to true, then after login, the standard default navigation will result.

  • If the user is on login.html, they will be sent to index.html
  • If the user is on index.html, then the Application's Main page will be loaded
If you need to change the default behavior, set useDefaultSuccessHandler = false, and build your own custom behavior using wm.LoginVariable's onSuccess event handler.

You can use the onSuccess event handler will be called whether useDefaultSuccessHandler is true or false.

Logout Variable

The LogoutVariable is a pre-defined variable that logs a user out from an application and sends them back to the login page.


A Lookup widget is a select editor for displaying and setting related data in a form. For example, it can be used to select which department an employee works in.

Lookup Editor

WARNING: This widget is deprecated; please use Lookup instead!

Mobile Icon Button

Displays a simple arrow or IOS-like back button.

Navigation Call

This non-visual component navigates between application layers and pages.


Represents a text field for entering numerical data along with range validation and formatting.

Number Editor

WARNING: This widget is deprecated; please use Number instead!

Number Formatter

This class provides options for formatting numerical data


Base class for all wavemaker objects

Object Tree

Generates a tree from from a a list of items and sub-items. The data property is used to specify the items to be displayed.

One To Many

This simple editor is an early version of an editor for showing a list of objects represented by either a one-to-many or many-to-many relationship. In the case of the hrdb database, this editor could show me all employees in the current department.

Future Work (not guaranteed for 6.5):

  • Automatic management of a delete column and LiveVariable for executing delete
  • Automatic generation of form for editing and adding new item to list of related entries
Note in the example project how the Vacations OneToMany provides a delete column and an onRowDeleted event handler.


Represents a page in your application. While pages can appear within other pages, they each contain their own name spaces and can be designed as individual modules.

Page Container

This widget can display other pages. This is a very effective way to manage a large project. Create a tab on the home page and in each tab layer put a page container.

Properties to be aware of:


The PageContainer's pageName determines which page should be loaded


DeferLoad allows you to prevent the page from loading until it is shown. This will allow your application to load faster by not loading and rendering widgets that aren't yet needed.

Page Properties

If your page has published properties (right click on a widget to publish its properties), these properties will show up in the property panel for the PageContainer and allow you to bind and edit the properties for the page.

This allows your pages to be controlled more directly by the parent page, and also makes it easier to reuse a page in different parts of your application.


To programmatically change the pageName:


Page Dialog

This class represents a PageContainer in a Dialog. Any dialog that involves a lot of widgets and code should be placed in its own page and loaded as a Page Dialog. Why? Because it helps to modularize your design and make it cleaner and more maintainable. The main property/method you'll need is pageName/setPageName, which tells the PageDialog what page to load.


The panel is used to group together sets of components.


This widget displays pictures from local images or urls.

Popup Menu

A PopupMenu opens a menu in a new popup window or dialog box.

Popup Menu Button

The popup menu button provides a combination of a select menu and a button. Click the select arrow icon to choose the operation that will be invoked by the button, then click the button to invoke that operation.

Progress Bar

Displays progress bar showing percent complete.


When creating a composite (using the CompositePublisher) each wm.Property represents one property of one component within your page that users of your composite can edit.

Property Tree

This tree lets you display data from a database in a flexible way. For example, a tree widget can show a list of departments along with the employees for each department.

Radio Button

Enables a user to select from a group of choices represented by checkboxes or radio buttons.

Radio Button Editor

WARNING: This widget is deprecated; please use Radio Button instead!

Radio Set

A DataSetEditor subclass that presents the list of options using radio buttons.

Range Slider

This slider allows users to select a start and end range of numerical values.

You can set the value using the property panel, setting the topValue and bottomValue, or programatically:

These will set the bottomValue to 5 and topValue to 10.


this.rangeSlider.getDisplayValue() -> "5,10"
this.rangeSlider.getDataValue() -> [5,10]

Regular Expression Formatter

This class provides options for transforming a string using regular expressions.

Related Editor

The RelatedEditor widget is a container used to represent related data within a LiveForm. For a one-to-many relationship, the Related Editor will contain a grid. For a one-to-one relationship, the Related Editor will contain a lookup editor or sub-form.

Rich Text

An editor that allows users to create formated/styled text similar to entering text into a word processor.

Select Editor

WARNING: This widget is deprecated; please use Select Menu instead!

Select Menu

The Select Menu widget provides a way for users to select an item from a drop-down list of choices.

Service Input Form


Just set the ServiceVariable, and your form will be generated and its output bound to the service variable's inputs.

Sample project:

Service Variable

Service variables hold data from calling web services, database queries and Java methods.

Simple Form

A Simple Form is an automated way to create a form with all of the fields required by the database but without edit panel buttons to create, update and delete new records.


Represents a drag and drop widget for selecting a number in a specified range

Slider Editor

WARNING: This widget is deprecated; please use Slider instead!


This widget is used to put space between other widgets.


This widget creates a movable border between two widgets. The trick with a splitter is that one of the two widgets that are being split needs to have its width or height set to 100% and the other widget needs its width or height set to a specific px value.


Displays stock information for ticker provided.

Sub Form

While wm.LiveForm uses a RelatedEditor to represent subobjects within a form, wm.DataForm and wm.DBForm use wm.SubForm to represent subobjects. SubForms are used to represent non-live types including

  • Composite Keys in your database
  • Java and webservice objects that are subtypes of your form.
If you want to put a subobject in your form that represents a database entity, you should use wm.Lookup, not wm.SubForm. Or you should use a Java Service to write the resulting values rather than a LiveVariable.

Tab Layers

The TabLayers widget is a Layers widget (Layers) for adding tabbed layers. If you decide you don't want to use tabbed layers, you can easily switch to another style of layer by changing the layersType property.


A template is a collection of widgets that can be dragged onto the canvas. There are predefined templates and user-defined templates.

Template Publisher

The Template Publisher provides a way for a user to define their own custom templates.


An editor widget that accepts text input.

Text Area Editor

WARNING: this widget is deprecated. Please use Rich Text instead.

Text Editor

WARNING: this widget is deprecated. Please use Text instead.


Displays text and moves it across the screen. Useful for displaying stock ticker information or other changing data.


An editor for entering in time of day

Time Editor

WARNING: This widget is deprecated; please use Time instead!

Time Formatter

Provides some options for formatting a string into time.


Use the timer component to schedule something to happen after a short delay, or to schedule something to happen periodically.


Creates a popup window that displays a text message for a short period of time.

Toggle Button

This is a button which changes to a clicked or active state when pressed. Pressing the button a second time returns it to the inactive state.

Toggle Button Panel

A Panel full of buttons. The panel insures that only one button is clicked at a time. Only works with standard Button widgets, not Toggle Button widgets.

You can trigger changes to the clicked state using

  • onchange event
  • Binding to the current


WARNING: This widget is deprecated; please use Property Tree or Object Treeinstead!

Tree Node

WARNING: This widget is deprecated; please use Property Tree or Object Treeinstead!

Twitter Feed

Displays the twitter feed for a particular twitter user or topic.

Twitter Follow Button

Provides the following Twitter widget for use in a WaveMaker page:

Twitter Tweet Button

Provides the following twitter widget for use in a WaveMaker page:

Type Definition

Enables a developer to define their own type, for example to display data in a grid.

Type Definition Field

A wm.TypeDefinition consists of a set of wm.TypeDefinitionFields that describe the fields for the type.


wm.Variable is a non-visual component for storing data values.

Why use a wm.Variable instead of a standard javascript variable?

  1. You can bind widgets and non-visual components to the datavalue of a wm.Variable; this is the standard way to get data into grids, Select editors, and other widgets.
  2. wm.Variable is the parent class of all ServiceVariable methods, and is how Service calls store their data
  3. It provides methods that standard javascript variables do not provide

How do you access data in a wm.Variable?

SET data

The data values can be specified as:

  • Simple data type: string, number, boolean, etc.
this.variable.setData({dataValue: "hello world"});
  • Name/Value list for select editor: using json
   	{"name": "January", 	"dataValue": 0}, 
	{"name": "February", 	"dataValue": 1}, 
	{"name": "March", 	"dataValue": 2}
  • Complex data type for database and web service data: using json
       {"firstname": "Harpo", "lastname": "Marx", employeeId: 0}

Note that there are two key properties to determining what data a wm.Variable can store:

  • type The type property specifies what fields this wm.Variable will understand. If its of type Employee, then it expects a firstname, lastname, etc… and giving it "name" and "dataValue" instead will result in failure.
  • isList The isList property determines whether this wm.Variable is expecting a list of items or a single item.
GET data

If the wm.Variable is not a list, then you can access any field using


If the wm.Variable is a list, then there are a number of options:

  1. getData(): This is very easy for people familiar with javascript objects, though for large datasets is less efficient for performance; especially if your only concerned with item 3 out of 3000.
var data = this.variable1.getData();
for (var i = 0; i < data.length; i++) {
   var firstName = data[i].firstName;
2. The equivalent, but without getData():
var count = this.variable1.getCount();
for (var i = 0; i < count; i++) {
   var item = this.variable1.getItem(i); // getItem returns a wm.Variable representing the ith item in the dataset.
    var firstName = item.getValue("firstName");
3. There are a number of methods listed below for iterating over all items; forEach is much like the ones above.


Weather gadget displays forecast for region defined by zip code.

Wizard Layers

This widget simplifies the task of creating layers to implement a multi-step process. For example, wizardlayers provides a way to implement a sign up registration process where there are a number of questions to ask in step 1 before moving on to step 2.

You Tube

Use this widget to show youtube videos. By binding the videoId to a datasource, you can dynamically change the video response to data from the server or user selections.

The demo shows binding a video to a grid selected item.

_Base Editor

WARNING: This widget is deprecated.

_Check Box Editor

WARNING: This widget is deprecated.

_Currency Editor

WARNING: This widget is deprecated.

_Date Editor

WARNING: This widget is deprecated.

_Lookup Editor

WARNING: This widget is deprecated.

_Number Editor

WARNING: This widget is deprecated.

_Radio Button Editor

WARNING: This widget is deprecated.

_Select Editor

WARNING: This widget is deprecated.

_Slider Editor

WARNING: This widget is deprecated.

_Text Area Editor

WARNING: This widget is deprecated.

_Text Editor

WARNING: This widget is deprecated.

_Time Editor

WARNING: This widget is deprecated.

© 2004-  WaveMaker, Inc