Custom JavaScript Introduction

Premium Checkbox Feature

Usage of this feature requires account access to Premium Checkbox features. For queries related to your licence agreement, ask your account administrator to contact your Checkbox Account Manager.

SKIP AHEAD TO 
When should you use Javascript in Checkbox?
What is the difference between using JS snippets in FORM and JS blocks?
What are the 3 key components of setting up JavaScript in Checkbox?
Do you need to code to add extra JS functionalities in Checkbox?
How to set up a JavaScript snippet in Checkbox


When should you use Javascript in Checkbox?

Checkbox allows users to upload JavaScript (JS) snippets in FORM and JS blocks to extend the existing functionalities of Checkbox Apps by enabling:

  • Complex programmatic logic beyond standard Checkbox capabilities with conditions
  • API calls to public or custom endpoints to enable custom functionality & integration
  • Control over the content of a FORM page through an event-based AP

 

What is the difference between using JS snippets in FORM and JS blocks?


FORM Block

When JS snippets are used in FORM blocks, the JS functions will be executed in the front-end (i.e. on the FORM page). JS snippets uploaded and embedded in FORM blocks can be executed through changes in user input fields, clicking “Next” or “Submit” or once a page has been loaded.

Common use cases include:

  • ABN Lookup
  • ACN Lookup
  • Auto-population of fields
  • Redirect after completing an Assessment


JS Block

When JS snippets are used in JS blocks, the JS functions are executed in the back-end.

Common use cases include:

  • Variable manipulation (e.g. variable overwrite)
  • Integrations (e.g. push/pull data from Xakia, Salesforce etc)
  • Complex calculations

 

What are the 3 key components of setting up JavaScript in Checkbox?

There are 4 key components that are part of setting up a JS snippet in Checkbox to add extra functionalities and integrations. However, depending on the JS snippet, not all components are necessary for a JS snippet to be executed.

  1. JS File
    This is the file that will include all the JS code to allow the function to be executed through the FORM or JS block.

  2. Input Mapping

    a. Variable in Checkbox (only if required)
    This is the variable name of a Checkbox field which will be treated as an input value to execute the extra functionality or integration in the JS snippet. Therefore, JS functionalities and integrations can be executed by end user inputs during an Assessment. The Checkbox variable name must be used in conjunction with the Input JS variable name.

    b. Variable in JavaScript (only if required)
    This is the name of the variable within the JS snippet that will be assigned the input value of the provided Checkbox variable to execute the extra functionality or integration in the JS snippet. Therefore, this is where the Checkbox App can become connected to the JS snippet.

  3. Output Mapping

    a. Variable in Checkbox (only if required)
    This is the variable which will be treated as the output variable that can be referenced inside a Checkbox App. This variable will have an auto-generated variable name by default but can be edited. The Checkbox variable must be used in conjunction with the variable used in JavaScript.

    b. Variable in JavaScript (only if required)
    This is the name of the output variable of the JS snippet that holds the output value. This output value is then assigned to a Checkbox variable in the FORM/JS block to use within the App or inside a document.


The possible combinations of using the above components to set up JavaScript include:

  1. Only the JS file is required
  2. The JS File, Checkbox variable name and input JS variable name are required
  3. Only the JS file and output JS variable name is required
  4. All four components are required


Do you need to code to add extra JS functionalities in Checkbox?

No. You do not need to code to include extra JS functionalities in Checkbox. Go to our plug-and-play JS Library where you can use pre-made JS snippets that can be quickly incorporated in your App to extend existing Checkbox functionalities and integrations.

However, if you are confident in your coding skills and wish to add any other custom JS snippets to your App, that is still possible. Please see the instructions below on how to set up a JS snippet. 

 

How to set up a JavaScript snippet in Checkbox

JS Block

  1. Drag in a JS Block into the Studio and click on it

  2. Click on “UPLOAD JAVASCRIPT” to upload a custom JavaScript snippet file

    JavaScript_Library_Section__1__2020-12-07_13-08-46.png


    If input variable(s) of the JavaScript are required, continue following Steps 3-5. If output variable(s) of the JavaScript are required, skip to steps 6-9:

  3. Click “+Add variable” to add input variables to connect the Checkbox platform with the JS snippet

  4. Insert the Checkbox variable and the corresponding input JavaScript variable name

    v1.22_Release_Notes_and_Wiki_2021-02-11_18-52-20.png


  5. Click “SAVE” once changes have been made

     

    The following instructions are for implementing output variable(s) of the JavaScript are required

  6. Using the drop-down, select the output variable type (i.e. Text, Number, List or User) and click "+Add variable" to add the output variable from the JS snippet

    v1.22_Release_Notes_and_Wiki_2021-02-11_18-56-02.png


  7. Insert the variable name used in the JS snippet in the "Variable in JavaScript" field

    Note: The variable name that will be used in Checkbox for the output JS variables can be renamed (i.e., TXT86 in the screenshot below can be renamed)

    v1.22_Release_Notes_and_Wiki_2021-02-11_18-57-02.png


  8. [Optional] Expose the output JS variable by checking the checkbox in the same row

    v1.22_Release_Notes_and_Wiki_2021-02-11_18-58-01.png

  9. Click “SAVE” once changes have been made

 

FORM Block

Enabling JavaScript in the FORM Block is very similar. Just a few extra steps in the beginning.

  1. Click onto a FORM block and click onto the “JAVASCRIPT” tab in the right panel

    JavaScript_Library_Section__1__2020-12-07_13-14-33.png


  2. Check the “Enable JavaScript" option

    JavaScript_Library_Section__1__2020-12-07_13-15-02.png

  3. Follow the steps from the JS Block instructions above as required.


Related Articles/Sections: