---
title: "JavaScript Control Using Library"
slug: "javascript-control-using-library"
description: "This document demonstrates how to use a third-party library to add a JavaScript Control to a Form in Decisions. This action can be started by creating a JavaScript Control by creating a Form and selecting Add Script, under the JavaScript category from the Create Form dialog. "
tags: ["JavaScript", "External System"]
updated: 2024-07-18T14:06:13Z
published: 2024-07-18T14:06:13Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.decisions.com/llms.txt
> Use this file to discover all available pages before exploring further.

# JavaScript Control Using Library

## Overview

**JS Script controls** allows users to efficiently reference third-party JS libraries.

Referencing a JS library with a script keeps the library loaded after initial download so it is available for use other[JS data controls](/v9/docs/creating-javascript-form-controls). Without a script control, using a third party library would require embedding its code inside each Data Control which would negatively impact performance.

Since they only supplement other JS controls, scripts do not populate the JS Control Catalog in the Tool. Instead are saved as a JavaScriptControlResource in the Designer Folder.

---

## Add Script Control

The following example demonstrates how to upload a script control to Decisions.

1. In a Designer Folder, select CREATE FORM in the Global Action Panel.
2. Choose the **JavaScript** control tab in the **Create Form**dialog. Select **Add Script.**  
![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-07-18_09h55_21.png)
3. In the **Add JavaScript Control** dialog, enter a name for the library. Other JS controls wishing to reference this library at runtime will match the script's name here.
4. Upload the library **.js file.****![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-07-18_10h05_04.png)**

---

## Looking Inside the Control

Hook the following Decisions JavaScript to ensure the library loads.

```none
ExampleJSLibrary.prototype.initialize = function (host, component) {
  // here "virtualPath" is a global variable in the Decisions client
  $DP.ScriptLoader.LoadScript(
    virtualPath + "/scripts/FormControls/jsFiles/ExampleJSLibrary.js"
  )
    .then(function () {
      // Do initialization of your data control which that depends on the 3rd party library
    })
    .catch(function (e) {
      console.error("Error loading ExampleJSLibrary", e);
    });
};
```

For safety, it’s best to do the same check inside the other Decisions JavaScript Control API methods. e.g.

```none
ExampleJSLibrary.prototype.setValue = function (data) {
  $DP.ScriptLoader.LoadScript(
    virtualPath + "/scripts/FormControls/jsFiles/ExampleJSLibrary.js"
  )
    .then(function () {
      /* Update Control */
    })
    .catch(function (e) {
      console.error("Error loading ExampleJSLibrary", e);
    });
};
```

---

For further information on Forms, visit the [Decisions Forum](https://community.decisions.com/categories/Forms).