Defining JavaScript Event Page Element Properties

This section describes how to define JavaScript events as page element properties in the Mobile Application Platform.

This section provides an overview of defining JavaScript events in the Mobile Application Platform.

Page Elements for JavaScript Events

You can add JavaScript events to enhance your mobile application for many page elements, including these:

  • Check box.

  • Container.

  • Flip toggle.

  • HTML area.

  • Image/Static text.

  • Input.

  • List view.

  • Mobile grid.

  • Push button.

  • Radio button.

  • Select box.

  • Slider.

  • Static text.

  • URL.

Default JavaScript Events

These JavaScript events are provided by default:

  • onblur

  • onchange

  • onclick

  • onbclick

  • onfocus

  • onkeydown

  • onkeypress

  • onkeyup

  • onmousedown

  • onmousemove

  • monouseout

  • onmouseover

  • onmouseup

  • onselect

To define a JavaScript event as a page element property, code the JavaScript on the Layout Designer – JavaScript page and then define the JavaScript event and function name on the properties page for the element.

As an example, you could define the following JavaScript on the Layout Designer – JavaScript page.

Image: Layout Designer – JavaScript page

This example illustrates sample JavaScript code in the Layout Designer – JavaScript page.

Example: Defining JavaScript on the Layout Designer - JavaScript page

Then on the properties page for the element, you define the JavaScript event and JavaScript value in the JavaScript Event section shown in this example.

Image: JavaScript Events section of the page element properties page

This example illustrates the JavaScript Events section of a page element properties page, with a JavaScript event and value defined.

JavaScript Events section of the page element properties page

In this example, the JavaScript event is onclick and the value is the function name, UpdateField(), that you coded on the Layout Designer – JavaScript page. In the example shown, no arguments are passed. Be sure to add the argument list to a function, as necessary.

To define a JavaScript event for a page element property:

  1. Write the JavaScript function on the Layout Designer – JavaScript page (PeopleTools > Mobile Application Platform > Layout Designer and click the JavaScript tab) or ensure that it is defined on a template that is assigned to the layout or page.

  2. Access the page properties for the page element for which you want to define the JavaScript.

    1. On the Layout Designer, click the Layout tab.

    2. In the Layout grid, click the Properties link for the page element.

  3. In the JavaScript Events section, select an event from the JavaScript Event drop-down list

  4. In the JavaScript Value field, enter the name of the JavaScript function.

  5. Click the Add a Row button (+) to add another row to define additional JavaScript.

  6. Click the OK button.

    The Layout Designer - Layout page appears.