Scripting Scratchpad

Below is a list of commonly used scripts.  Scripts here are intended to easily copy and paste into your applications for simplifying specific tasks.  You may need to alter component names (API Keys) to fit your specific forms.

Format a date in a Text Component

If you are looking for basic, manual date input, using a Text Component is often the simplest approach.  It can be helpful to assign an input mask to the component (99/99/9999) and a minimum length of 8.

//Take in a date string and insert slashes
if(data.dob && data.dob.length == 8)
{
    var userDate = data.dob;
    value = userDate.slice(0,2) + '/' + userDate.slice(2,4) + '/' + userDate.slice(4,8);
}
else
    value = data.dob;

Capture a date based on signature input to a Text Component

If you wish to capture a date based on a user making a mark in a signature component, add a Text Component with an API Key of dateSigned and mark it disabled to prevent user manipulation of the field.  Add a Signature Component with an API Key of signature.

//Assign a system calculated date based on data entry in another component.
var current = new Date(data.dateSigned);
if(data.signature && current.toString() === 'Invalid Date')
{
    var d = new Date();
    value = d.toLocaleDateString();
}
else
    value = data.dateSigned;

Add state control to check boxes to mimic radio button behavior

This script uses a Text Component (checkState) to preserve the last selected Checkbox Component.  Use two or more checkboxes (this example shows 3) and adjust the script accordingly.  In general, you should use a Radio Component to achieve this functionality.  This is an advanced script and it's very easy to miss updating a checkbox name, which can cause unexpected behavior.  Be sure to carefully inspect your script for errors when deploying.  A working form example is available here.

//Add state control to checkboxes to mimic radio button behavior.
if(data.check1 === true  && (data.checkState == '2' || data.checkState == '3'))
    {
        value = '1';
        data.check2 = false;
        data.check3 = false;
    }
else if (data.check2 === true && (data.checkState == '1' || data.checkState == '3'))
{
    value = '2';
    data.check1 = false;
    data.check3 = false;
}
else if (data.check3 === true && (data.checkState == '1' || data.checkState == '2'))
{
    value = '3';
    data.check1 = false;
    data.check2 = false;
}
else if (data.check1 === true)
    value = '1';
else if (data.check2 === true)
    value = '2';
else if (data.check3 === true)
    value = '3';
else
    value = '';

Populate Username or Email Address of Logged in User

You can populate the Name or Email Address of a logged in user by placing the below code in the Calculated Value Rule area on the Data Tab.

//Capture the email of the current logged in user into the value of the selected control
value = Formio.getUser().data.email


//Capture the name of the current logged in user into the value of the selected control
value = Formio.getUser().data.name

You can couple this rule with an if statement in a workflow to ensure it only fires once and does not overwrite the name/email if the form is loaded in additional workflow steps.

Populate Today's Date in a Text Field

You can populate today's date in a field for the purposes of tracking when a form was initally submitted and more.  Its recommended you use this rule as a Custom Default value if you only want it to fire once.

var d = new Date();
value = d.toLocaleDateString();

You can modify the date format in any way you want, for example:

var d = new Date();
var options = {
	year: "2-digit",
	month: "2-digit",
	day: "2-digit"
};
value = d.toLocaleDateString('en', options);