--- title: "Creating JavaScript Form Controls" slug: "creating-javascript-form-controls" description: "This document discusses the different type of JavaScript Form controls that users can create in Decisions. The document provides examples of JavaScript needed to create these Form Controls." tags: ["Custom Controls", "JavaScript", "Look and Feel"] updated: 2025-05-05T20:45:15Z published: 2025-05-05T20:45:15Z --- > ## 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. # Creating JavaScript Form Controls ## Overview Browser SupportDecisions supports a wide range of web browsers.  For ideal user experience, avoid using incompatible JS syntax. For more information on browser compatibility review [Installation Requirements](https://documentation.decisions.com/v9/docs/installation-requirements#:~:text=projects%20between%20servers-,Browser%20Compatibility,-Chrome%20and%20Microsoft). Users may build their own custom Form controls with**JavaScript (JS)** to use within the platform. Similar to built-in controls, JS controls may contain inputs and outputs. Each type of JS control is configured similarly. Below is a brief explanation of the different control types.Ac | Control Type | Function | | --- | --- | | [**Action Control**](/v9/docs/creating-javascript-form-controls#creating-an-js-action-control) | Action Controls are Form controls to trigger actions i.e. Button, Link. | | [**Data Control**](/v9/docs/creating-javascript-form-controls#creating-a-js-data-control) | This is a Form control that allows users to work with Data like JS Data Grids or Text Boxes | | **Page Control** | These are Page controls which are custom JS controls that are used in the Dashboard/Page Designer | | **Scripts** | This feature allows users to include Custom Scripts to uploaded JS controls | | **Styles** | This feature allows users to include Custom Styles (CSS) to uploaded JS controls | For Action, Data, and Page controls, users must upload a JS file and have the control's Class name declared within Decisions. Scripts and Style JS controls only need to upload the JS file(s). ### Troubleshooting JS Controls Chrome developer tools are necessary to troubleshoot JS controls. To access Chrome developer tools, press F12 on the keyboard and navigate to the 'Network' tab to verify the JS control is running. Alternatively, emptying the cache then reloading the platform may solve JS control related issues. Known IssueIn v9.7, v9.8, and v9.9 the output for any JavaScript Form Control will not appear as expected in the Flow Designer. This issue is resolved in v9.10. After upgrading users will need to open any Forms using JavaScript controls and save them for the outputs to properly appear. --- ## Creating An JS Action Control The following example JS action control creates three Buttons with their own outcome paths from the Form. Save this file as ListButtonControl.js. ```javascript   function ListButtonControl() { }; ListButtonControl.prototype.initialize = function(host, component) { // Keep track of the host; we'll need it later. this.host = host; // Initialize our count data: this.currentCount = 0; this.totalCount = 0; // This one is important when we have input data. See 'consumeData' for details. this.lastConsumed = null; // We're going to put both buttons in a div, then append the div to the host: var control = document.createElement('div'); // Loop through all possible outcome names. for (var outcome of component.PossibleOutcomeNames) { // create button element var button = document.createElement('button'); // add class button.classList.add('myControlButton'); button.type = 'button'; // set the text same as outcome name button.textContent = outcome; var thisControl = this; // To avoid 'this' problems inside the onclick event. button.onclick = function(e){ // to submit the form when button is clicked, selectPath should be called with correct outcome name // the outcome here should be from possibleOutcome names that we define while creating the JS action control // otherwise the flow will throw an error. component.selectPath(this.textContent); }; control.appendChild(button); } host.append(control); // The two buttons appear too close together unless we add some css: var style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = '.myControlButton{ margin: 5px; height: 30px; color: #fff;background-color: #007bff;border-color: #007bff;border: 1px solid transparent;padding: .375rem .75rem;font-size: 1rem;line-height: 1.5; }'; document.head.appendChild(style); }; ListButtonControl.prototype.resize = function(height, width) { if (this.host && height && width && (height > 0) && (width > 0)) { this.host.css({ width: width, height: height }); } }; ``` ### Uploading the JS File 1. Navigate to a Designer Folder. Select CREATE FORM. 2. In the Create Form dialog, choose the **JavaScript Control** menu, and select **Add Action Control****.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-12-03_17h08_57.png)** 3. In the **Add Javascript Control** window, name the control. Ensure the **Control Type** is set to **Action**. This control has no input data; therefore, nothing needs to be added to the **Input Data** section. 4. Create the list of Buttons the JS control will create in the Possible Outcome Paths setting. Enter 'Submit', 'Cancel', and 'Reset'. 5. Declare the **JS Class name** to "ListButtonControl". 6. Select SAVE CONTROL to confirm creation. It will now appear in the Designer Folder as **JavaScriptDataControl.** ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-07-10_12h31_36.png)![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-07-10_12h32_18.png) ### Adding the JS Control into a Form 1. In a Designer Folder, create a new Flow and open it in Flow Designer. 2. Add a **Show Form**step to create a new [Form](/v9/docs/create-forms). It will automatically open in the Form Designer. 3. Expand**JS Controls >****[Current Folder]** drag the **ListButtonControl**to the Form. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-08-20_09h33_40.png) 4. Save and close the Form Designer. Connect the Show Form step to the**End**step. ### Debug 1. Select the Debug Action from the Flow Designer. 2. Click START DEBUGGING. 3. Select a Button to follow its outcome path. Select CREATE NEW SESSION to try each path. --- ## Creating a JS Data Control This following example JS data control consists of a Button with an the output counting the number of times it has been clicked. The control does not require input data. All JavaScript data controls will have these 4 specific functions: ``` interface JSBasedComponentInterface { initialize(host: JQuery, component: any): void; resize(height: number, width: number): void; setValue?(data: any): void; getValue?(): any; } ``` | Functions | Purpose | | --- | --- | | **initialize** | This function will be called one time when the control is being created. | | resize | This function can be used to handle special resizing rules, but most controls will not need to modify this - copying and pasting this 'resize' function should suffice when necessary. | | **setValue** | This function is used when a control takes input data.For an example that includes input data, see the [Creating JavaScript Controls (Advanced)](https://documentation.decisions.com/v9/docs/en/creating-javascript-form-controls-advanced) for this feature. | | **getValue** | This is where the output will be returned. | The completed JavaScript control for this example will look like the code block below. Save this as MyControl.js, ```javascript function MyControl() { }; MyControl.prototype.initialize = function(host, component){ // Here we assign 'host' to a variable on this control, // so that we can access it later: this.host = host; // Our counter starts at 0: this.timesClicked = 0; // Create and configure the button: var button = document.createElement('button'); button.type = 'button'; button.textContent = 'Click me'; var thisControl = this; // To avoid 'this' problems inside the onclick event. // When the button is clicked, increment our counter: button.onclick = function(e){ thisControl.timesClicked++; }; // Add the button to the 'host' jquery object: host.append(button); }; MyControl.prototype.resize = function(height, width) { if (this.host && height && width && (height > 0) && (width > 0)) { this.host.css({ width: width, height: height }); } }; MyControl.prototype.setValue = function(data){ // This control has no inputs, so no code is necessary here. }; MyControl.prototype.getValue = function() { // Output data should be an object with properties that match the // names of our outputs. In this case, our output is named 'TimesClicked'. return { TimesClicked: this.timesClicked }; }; ``` ### Uploading the JS File 1. Navigate to a Designer Folder. Select CREATE FORM. 2. In the Create Form dialog, choose the **JavaScript Control** menu, and select **Add Data Control****.** ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-08-20_09h35_09.png) 3. In the **Add Javascript Control** window, name the control. For **Control Type**, ensure this is set to **Data**. This control has no input data; therefore, nothing needs to be added to the **Input Data** section. 4. Enable the **Different Output Data** checkbox to show the **Output Data** section. 5. Select****ADD under the Output Data section. The control has a numerical output named "TimesClicked". In the **Name** field type "TimesClicked", and pick **Int32 [Number]** for the **Type**field, then select 'Ok'.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-12-05_16h13_07.png) 6. In the **Runtime Information** section, the **JS Class Name** must match the class name inside the .js file. The class name is 'MyControl', type MyControl in the JS Class Name field. Select **Choose File**to upload the MyJsControl.js file.JS Class Name Must MatchUnder the 'Runtime Information' the 'JS Class Name' must match the**class name** in the JavaScript file. If they do not match, the JS control will not function in the Form. 7. Select SAVE CONTROL to create the new Form Control. It will now appear in the Designer Folder as **JavaScriptDataControl.** ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-08-20_09h39_20.png) 8. Repeat steps in the [Adding the JS Control into a Form](/v9/docs/creating-javascript-form-controls#adding-the-js-data-control-into-a-form) subsection to add the JS data control to the new Form. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-08-20_09h40_15.png) ### Debug 1. Select **Debug** in the top action panel of the Flow Designer. 2. Select the 'Click me' button multiple times, then select Submit. 3. Select the **Show Form** step, and then select **View Output Data**. Notice that the output from the Form includes the TimesClicked. --- ## Feature Changes | Description | Version | Release | Developer Task | | --- | --- | --- | --- | | Javascript type picker dialog has been updated. | [9.5](https://documentation.decisions.com/v99/docs/version-95x-release-notes) | November 2024 | [DT-042880] | For further information on Forms, visit the [Decisions Forum](https://community.decisions.com/categories/Forms).