Breadcrumbs

Combining Values

Combine the values of several components into one, for example to build a full name from first name, middle initial and last name. A combined value is useful when a PDF or another system expects a single field, and it avoids gaps or overlapping text when the parts are mapped separately.

Set up the components

  1. Add the components users fill in, for example First Name, Middle Initial and Last Name. On each one's API tab, note its property name, for example firstName, middleInitial and lastName.

  2. Add a Text Field to hold the result, for example Full Name.

  3. If users don't need to see the result, mark the Full Name component Hidden after you've tested it. Hidden components are still saved with the submission and can be mapped to PDFs and other systems.

Write the calculated value

  1. Open the settings of Full Name and select the Data tab.

  2. Expand Calculated Value, then JavaScript Value.

  3. Enter:

    JavaScript
    var parts = [data.firstName, data.middleInitial, data.lastName];

// Keep only the parts that have been filled in, separated by spaces.
value = parts.filter(function (part) { return part; }).join(' ');

  4. Save the component and test the form.

A calculated value script must set the value variable. The data variable holds every component's value by property name.

The same result written step by step, which may be easier to adapt:

JavaScript
var fullName = '';

if (data.firstName) {
  fullName = data.firstName + ' ';
}
if (data.middleInitial) {
  fullName += data.middleInitial + ' ';
}
if (data.lastName) {
  fullName += data.lastName;
}

value = fullName.trim();

More examples

Last name first

JavaScript
if (data.firstName && data.lastName) {
  value = data.lastName + ', ' + data.firstName;
} else {
  value = '';
}

Address on one line

JavaScript
var cityState = [data.city, data.state].filter(function (p) { return p; }).join(', ');
value = [data.street, cityState, data.zip].filter(function (p) { return p; }).join(' ');

Things to know

  • A calculated value updates every time the form changes, and overwrites anything the user types in that component. To let users edit the combined value, generate it once with a button instead. See Using Buttons for Custom Actions.

  • Turn on Calculate on server to recalculate the value when the form is submitted, so it can't be changed in the browser. On the server, the script can use only data, row, value, component, moment and standard JavaScript.

  • Components with a calculated value show a blue lightning-bolt icon in the form builder. See Form Builder Tools.