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

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

Save And Commit

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

Save

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

Export

Function:
Downloads a custom JavaScript file as a JSON file to your 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 Settings screen, 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

Function:
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.
Accepted 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

Function:
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.
Accepted Values:
A JavaScript code snippet that can be enclosed within a JavaScript function.
Example:
console.log("Bye!")