Skip to content
Team Forms Team Forms Docs

Code Examples

Tip: Open the form in the builder, select Ask AI, and describe the calculation or behaviour you need. Identify the target field when possible so the assistant can load the correct JavaScript context before updating the form.

Calculated Value

Section titled “Calculated Value”

Description

Code

Display response to another field

value = data.fieldName

Display response to another field with text appended

value = data.fieldName + ' some additional text'

Adding two number fields

value = (data.field1 || 0) + (data.field2 || 0)

Display the value of a number field rounded

value = Math.round(data.numberField)

Display the value of a number field rounded up

value = Math.ceil(data.numberField)

Display the value of a number field rounded to two decimal places

value = Math.round(data.numberField * 100) / 100

Display some text in a textfield when a checkbox is ticked

value = data.checkbox ? 'You ticked the checkbox' : ''

Display days between two date/time field

const startDate = moment(data.startDate)
const endDate = moment(data.endDate)
value = startDate.diff(endDate, 'day')

Display hours between two-date/time fields

const startDate = moment(data.startDate)
const endDate = moment(data.endDate)

value = startDate.diff(endDate, 'hour')

Display years since a date/time field

const dateOfBirth = moment(data.dateOfBirth)
const currentDate = moment()

value = currentDate.diff(dateOfBirth, 'year')

Display hours between two-time fields

const time1 = moment(data.t1, "hh:mm:ss")
const time2 = moment(data.t2, "hh:mm:ss")
value = time1.diff(time2, 'minute')

Display 5 days from a data/time field inside a text field

value = moment(data.startDate).add(5, 'days').format('YYYY/MM/DD')

Display 5 days from a data/time field inside a date/time field

value = moment(data.startDate).add(5, 'day').toISOString()

Display share-point data source column

value = data.sharePointSelect.columnName

Display share-point data source column when inside a data-grid

value = row.sharePointSelect.columnName

Add two numbers on a row in a data-grid

value = (row.field1Name || 0) + (row.field2Name || 0)

Display the number of rows in a datagrid

value = data.dataGridRepeatingTable.length

Total of a column in a data-grid

value = _(data.dataGridRepeatingTable).sumBy('columnNamne')

Display the current users email

value = TF_USER().email

Display the current users name

value = TF_USER().name

Display the current row number in a data-grid

value = rowIndex + 1

Custom Default Value

Section titled “Custom Default Value”

Description

Code

Display text based response Id

value = TF_RESPONSE_ID()

Display the current date in a text field in a specific format

value = moment().format('YYYY-MM-DD')

Display the current users email

value = TF_USER().email

Display the current users name

value = TF_USER().name

Display a generated GUID

value = crypto.randomUUID()

Custom Drop-Down Values

Section titled “Custom Drop-Down Values”

Description

Code

Values from a flat array

value = ['person1', 'person2', 'person3']

Values from an array of objects

value = [
{name: person1, age:21}, 
{name: person2, age: 30},
{name: person2, age: 25},
]

Values manually populated from a SharePoint DataSource

TF_DATASOURCE('dataSourceId').then(d =>
    instance.setItems(d, true)
)

Custom Button Action

Section titled “Custom Button Action”

Description

Code

launch a URL in another tab

open('https://teamforms.app')

trigger a flow endpoint or webhook

fetch('urlOfEndpoint')

Submit your form

instance.emit('submitButton')

Fire a custom event from button JavaScript

instance.emit('myCustomEvent')

Move to the next page in a wizard

form.nextPage()

Move to the previous page in a wizard

form.prevPage()

Jump to a specific page in a wizard

form.setPage(2)

Incrementing a value in a number field

const nextNumber = (data[numberFieldKey] || 0) + 1

instance.root.getComponent("numberField").setValue(nextNumber);

Data/Edit Grid Conditional Add Button

Section titled “Data/Edit Grid Conditional Add Button”

Description

Code

Show "Add Another" button only when form has been submitted

show = data.submit

Show "Add Another" button only when a checkbox is checked

show = data.checkbox

Datetime Custom Disabled Dates

Section titled “Datetime Custom Disabled Dates”

Description

Code

Disable dates in the past

disabled = date < moment()
    .startOf('day')
    .toDate()

Disable dates 7 days in the future

disabled = date > moment()
    .startOf('day')
    .add(7, 'day')
    .toDate()

Disable dates before another date/time field

disabled = date < moment(data.startDate).toDate()

Disable all Fridays

disabled = moment(date).day() === 5

Disable specific date (1st January 2025)

const dateToDisable = new Date(2025,0,1)
disabled = date.getTime() === dateToDisable.getTime()

Only enable the current week

disabled = moment(date).week() !== moment().week()

Datetime Shortcut Buttons

Section titled “Datetime Shortcut Buttons”

Description

Code

Create a shortcut to select 7 days from now

date = moment().add(7, 'day').toDate()

Create a shortcut to select today

date = moment().toDate()

Create a shortcut to select the start of the work week

date = moment().day(1).toDate()

SharePoint Data Advanced Filter Query

Section titled “SharePoint Data Advanced Filter Query”

Description

Code

Filter SharePoint drop-down based on the selection of another SharePoint drop-down

show = item.field1 === data.parentSharePointSelect.field1

Filter items based on column value

show = item.columnName === 'supervisor'

Filter items based on column A or column B

show = item.columnName === 'supervisor' || item.age > 50

On Change

Section titled “On Change”

Description

Code

Set the value of another text field on change

instance.root.getComponent("otherTextField").setValue('Hello from ' + data.textField)

Set the value of a SharePoint drop-down to the first option on Change

TF_DATASOURCE('ld5r8fmfmded9zdzi4').then(rows => {
    const firstMatch = rows.find(row => row.Make === 'Toyota')
    instance.root.getComponent("vehicleMake").setValue(firstMatch)
})

Increment the value of a number field

instance.root.getComponent("number").setValue((data.number || 0) + 1)

Set the value of a date/time component on change (e.g. when a user signs a signature component)

instance.root.getComponent("dateTime").setValue(moment().toISOString())

Disable another field

instance.root.getComponent('number').disabled = !!data.checkbox
instance.root.redraw()

Advanced Conditional

Section titled “Advanced Conditional”

Description

Code

Show component based on checkbox and drop-down menu selection

show = data.checkbox && data.dropDownList === 'option1'

Show component based on specific option in a SharePoint drop down selection

show = data.sharePointSelect.column1 === 'someValue'

Show component only when an option is selected in a SharePoint drop-down

show = !_.isEmpty(data.sharePointSelect)

Show component based on survey component answer

show = data.survey.option1 === 'a'

Show component based on select box answer

show = data.selectboxes.option1 || data.selectboxes.option3

Show component based on a drop-down menu which has been configured to allow "multiple values".

show = data.dropDownList1.includes('option1')

Show in PDF for a specific user

show = instance.isHtmlRenderMode() && TF_USER().email == 'contact@teamforms.app'

Show component only when the form as been submitted

show = data.submit

Custom Validation

Section titled “Custom Validation”

Description

Code

Validation based on checkbox and drop-down menu selection

valid = data.checkbox && data.dropDownList === 'option1'

Validate number is less than 1000

valid = data.numberField < 1000

Validate the number of files uploaded to a file component

valid = instance.getValue().length < 3

Show component based on select box answer

valid = data.selectboxes.option1 || data.selectboxes.option3

Logic Trigger

Section titled “Logic Trigger”

Description

Code

Trigger logic when number field exceeds 1000

result = data.number > 1000

Trigger logic based on drop-down selection

result = data.dropDownList === 'option1'

Logic Action: Custom Value

Section titled “Logic Action: Custom Value”

⚠️ Custom value set using the “logic action” feature uses the same method as standard calculated values. Please refer to calculated values examples above.

Logic Action: Merge Schema

Section titled “Logic Action: Merge Schema”

Description

Code

Disable a field based on the value of a number field

schema = {
    disabled: true
}

Custom Class

Section titled “Custom Class”

Description

Code

Set class based on number field value

customClass = data.number > 1000 ? 'alert-danger' : 'alert-success'

Set class based on text field response

customClass = data.textField === 'some text' ? 'custom-class-1' : 'cusomt-class-2'

Set class based on checkbox on the same row of a data-grid

customClass = row.checkbox ? 'bg-danger' : 'bg-success'

CSS examples

Section titled “CSS examples”

Description

Code

Change the font of all labels

label {
    font-weight: bold;
    font-size: 20px;
    color: red;
}

Change the font of text fields

input[type="text"]{
    font-weight: bold;
    font-size: 20px;
    color: red;
}

Change the background colour of all number fields

input[pattern="[0-9.]*"]{
    background-color: red;
    color: white;
}

Change the colour and width of a column in a data grid for both the form and pdf

td:nth-child(3) {
    background: #ffb0a1;
    min-width: 300px;
}


.form-pdf td:nth-child(3) {
    background: #ffb0a1;
    min-width: 300px;
}

Change the colour of a panel header

.card-header{
    background-color: #cceaba;
}

Change the colour of all text in the generated pdf

.form-pdf {
    color: red;
}

Change the background colour of a text field in the pdf and form

.customTextField {
    background-color: red;
    color: white;
}

*add "customTextField" class to your component under the display tab

Change the color of a row in a data-grid

.table tbody tr:nth-child(1) td {
    background-color: #81DAF5;
}

Remove the page border for a page in the pdf

.form-pdf .border{
    border: none !important;
}

Disable the remove row button in data-grids

.formio-button-remove-row {
    pointer-events:none;
}

Section titled “Related articles”