Creating JavaScript Form Controls (Advanced)

Last Updated: 05/16/2018 Introduced in Version:

The first part of this documentation showed the basics of creating & using JS controls. Now we’ll look at how to create a control that takes input data, and how to add CSS styles to a control.

This time, our example will be slightly different:

The control will consist of two buttons:  a main button, which increases the click count, and a reset button, which sets the click count back to zero.

It’ll output two pieces of data:  The current click count (since the reset button was clicked), and the total click count (which isn’t affected by the reset button).

This control will also have two inputs:  You’ll be able to set the text on the main button, and also provide a starting count (in case you want to start counting at a number other than zero).

Let’s take another look at the JS data control interface that we’ll be implementing:

We’ll start with a blank text document and name our control class ‘MyResetButtonControl’. Our initialize function looks like this:

The resize function is unchanged, so once again we copy & paste it:

Next is setValue. Input data is sent into our control with this function – it’s called during form initialization and every time the input data changes. Let’s say that our inputs are ‘StartingCount’ and ‘ButtonText’:

Finally, getValue now returns 2 values in its output data:

Putting it all together:

Save as MyJsResetControl.js, and it’s ready to be added as a new form control.

Instructions for creating the new form control can be found in the first part of this documentation. Just make sure that the Input Data section has the correct info, in addition to the Output Data section:

Additional Resources