Custom JavaScript screen

Lets you create custom JavaScript in Page Builder.

Figure: Custom JavaScript screen

Custom JavaScript screen

Video: Advanced Page Builder Features

Example

Prerequisites

How to Start

  1. Click Page Builder.

    Build Pages
  2. On the Home screen, in the left pane, click Library.

    Click Library
  3. In the left pane, click JavaScript.

    Click JavaScript
  4. On the JavaScript screen, click your JavaScript file.

    Click JavaScript File

Fields

Field NameDefinition

Edit JavaScript

Description:
Changes the JavaScript code.
To Open this Field:
  1. On the custom JavaScript file, click Save And Commit.

Save And Commit

Description:
Saves and checks in the custom JavaScript file.
To Open this Field:
  1. On the custom JavaScript file, click Edit JavaScript.

Save

Description:
Saves the JavaScript file.
To Open this Field:
  1. On the custom JavaScript file, click Edit JavaScript.

Export

Description:
Downloads a custom JavaScript file as a JSON file to the local machine.

You can only import a JavaScript file that is exported from Page Builder — for example, from a different AgilePoint NX tenant

To Open this Field:
  1. On the custom JavaScript file, click Save And Commit.
  2. In the right pane, click Ellipses (...).

Delete JavaScript File

Opens this Screen:
Type CONFIRM To... screen
To Open this Field:
  1. On the Page Builder screen (Settings), turn on the Allow to Delete Pages field.
  2. In the right pane, click Ellipses (...).
Function of this Screen:
Deletes a custom JavaScript file from the JavaScript screen.

onWidgetMount

Description:
Specifes the JavaScript code in the onWidgetMount event. This event executes when the widget loads in the web browser at runtime.
To Open this Field:
  1. On the custom JavaScript file, click Edit JavaScript.
Allowed Values:
A JavaScript code snippet that can be enclosed within a JavaScript function.
Example:
setInterval(function () {
  const date = new Date();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const seconds = date.getSeconds();
  const day = date.getDate();
  const month = date.getMonth() + 1;
  const year = date.getFullYear();
  ev.target.querySelector('#currentDate').innerText = 
    day + '/' + month + '/' + year;
  ev.target.querySelector('#currentTime').innerText = 
    hour + ':' + minute + ':' + seconds;
}, 100);

onWidgetUnmount

Description:
Specifies the JavaScript code in onWidgetUnmount event. This event executes when the widget is unloaded at runtime. Usually this event occurs when the user leaves the web page.
To Open this Field:
  1. On the custom JavaScript file, click Edit JavaScript.
Allowed Values:
A JavaScript code snippet that can be enclosed within a JavaScript function.
Example:
console.log("Bye!")