(Example) Custom JavaScript in Page Builder

This example shows how to create and use a custom JavaScript snippet in Page Builder.

Background and Setup

Other Examples

Prerequisites

Good to Know

  • The Raw HTML widget is required to use custom JavaScript in Page Builder.
  • Only a JavaScript file that is created in Page Builder can be used in the Raw HTML widget. You can not enter JavaScript code directly in the widget.
  • You can reference elements in the JavaScript file in the Raw HTML widget with this format. This concept is similar to HTML.

    Format:

    <[HTML element] id="[your JavaScript ID]"/>

    Example:

    <div id="currentTime"/>

  • These elemets are not supported in the Raw HTML widget:
    • <html>
    • <body>
    • <head>
    • <style>
    • <meta>
    • <link>
    • <title>
  • This example shows how to create a custom JavaScript to show the current date and time.
  • This is a simple example. It is not intended as a real-world use case.

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 Add JavaScript.

    Add JavaScript

Step 1: Create a JavaScript File

  1. On the Add New JavaScript Page, in the Display Name field, enter Current Date and Time.

    When you click the Internal Name field, this field completes by default based on the value you enter in Display Name field. You can also specify your own internal name. After the internal name is created, you can not change it.


    Add New JavaScript Page screen
  2. Click Add.

    The Current Date and Time file is added to the JavaScript library.


    Add JavaScript File

Step 2: Enter the Current Date and Time JavaScript Code

  1. Click Edit JavaScript Edit JavaScript icon.

    Enter JavaScript
  2. On the rigt pane, add your JavaScript code to custom JavaScript snippet.

    This example uses the following code:

    function init() {
  return {
  onWidgetMount: function (ev) { 
  // write your code here....
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 (ev) {
  // write your code here...
  console.log("Bye!")
  }
 };
}

    In this example code, the IDs of the standard JavaScript querySelector() function provide reference IDs that can be used in a Raw HTML widget.

    The custom JavaScript code must be enclosed within these built-in functions:

    Field NameDefinition

    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!")

    JavaScript Content
  3. Click Save And Commit Save And Commit icon.

    Save JavaScript file

Step 3: Add the JavaScript to a Custom Page

Add the custom JavaScript to Raw HTML widget custom page.

How to Start

  1. Do one of these:
  2. On the Custom Page Design screen, click Add Row.

    Custom Page screen
  3. Click Add Widget.

    Custom Page Design screen

Procedure

  1. On the Pick A Widget screen, click the Content tab.

    Pick A Widget screen
  2. On the Content tab, click Raw HTML Raw HTML icon.

    Raw HTML Widget
  3. On the New Widget - Raw HTML screen, in HTML Content field, enter the codes from screen.

    The IDs currentTime and currentDate come from the Current Date and Time example JavaScript file.


    New Raw HTML Widget
  4. In the JavaScript Files list, select Current Date and Time file.

    This associates the JavaScript file with the Raw HTML widget.


    JavaScript File field
  5. Click Add.

    Page Builder shows the Raw HTML widget.


    Raw HTML widget Custom Page

Step 4: Publish the Custom Page

  1. On the Custom Page Design screen, click Check In Check In icon.

    CheckIn Custom Page
  2. Click Publish.

    Publish Custom Page
  3. On the Publish screen, click Publish.

    Click Publish

    The Page Builder shows the published custom page screen.


    Published Custom Page

Step 5: View the Published Page

  1. On the custom page, click Publish History

    Publish History
  2. On the Publish History screen, click View View icon

    View Page

    Your custom page opens in a new browser tab.

    This view gives the production URL for the page. You can copy this URL to use in other locations, such as menus or links on other web sites.


    Published Page