Custom JavaScript screen

Lets you create custom JavaScript in Page Builder.

Figure: Custom JavaScript screen

Custom JavaScript screen

Example

Prerequisites

How to Start

  1. Click Page Builder.
  2. On the Page Builder Home screen, in the left pane, click Library Library icon.
  3. On the Library screen, click JavaScript > [JavaScript file name].

Fields

Field Name Definition

Edit JavaScript Edit JavaScript icon

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

Save And Commit Save And Commit icon

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

Save Save icon

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

Export Export icon

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 Save And Commit icon.
  2. In the right pane, click Ellipses (...).

Delete JavaScript File Delete JavaScript File icon

Opens this Screen:
Delete JavaScript File 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 Edit JavaScript icon.
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 Edit JavaScript icon.
Accepted Values:
A JavaScript code snippet that can be enclosed within a JavaScript function.
Example:
console.log("Bye!")