Skip to main content

Code Examples

Let help you get started with some code examples

Updated over 2 weeks ago

Tip: For JavaScript calculations, click “Let AI do the coding” in the code editor and describe what you need.

It’s quicker (and smarter for code) than asking Fin.

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

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

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

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

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

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

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

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

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

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

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

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

⚠️ 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

Description

Code

Disable a field based on the value of a number field

schema = {
    disabled: true
}

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

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;
}

Related Articles
Date/Time Component
Custom actions on a button
Automatically Set a Date Field
Automatically collect the date/time a form is started and submitted
Populate a data-grid based on a data-source
Did this answer your question?