Custom Display Javascript Format

In Arcadia Instant, you can customize the display format of fields in visuals using Javascript. The Javascript editor includes auto-complete functionality, and checks for valid code.

Availability Note.

This feature is available when the following conditions are satisfied:

In addition to other categories, Arcadia Instant has a Custom Javascript option that enables a wide range of custom display configurations.

The following steps outline how to use the Display Format: Custom Javascript interface.

  1. Click on the field you plan to modify, to open the Field Properties menu.
  2. Under Field Properties, click the Display Format option.

  3. In the Display Format interface, select Custom Javascript from the Category menu.

  4. In the Customize JS Format Function code entry box, enter valid JavaScript code.

    display format in Custom mode
  5. Click Save.

Specifying Text Color Based on a Scalar Threshold

In the following example, we adapted the custom JS format to more clearly identify which US States have a Hispanic population above or below the national average of 16%.

function myFunc(value) {
    // change display color based on value 
    // being below or above national average of 16%
    // expressed as percentage, with two decimal places
    if (value < .16) {
        // below 16% is blue
        return `<div style="color: blue">${Number(value * 100).toFixed(2)}%</div>`;
        } 
    else {
        // 16% is or higher is green
        return `<div style="color: green">${Number(value * 100).toFixed(2)}%</div>`;
        }
  }

Compare the results in the % Hispanic column (uses Percentage Display and the Rel. to 16 National Average column, that uses custom Javascript code in this example.

display format in Custom mode