value = data.fieldName 

value = data.fieldName + ' some additional text'

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

value = Math.round(data.numberField)

value = Math.ceil(data.numberField)

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

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

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

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

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

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

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

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

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

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

value = data.sharePointSelect.columnName

value = row.sharePointSelect.columnName

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

value = data.dataGridRepeatingTable.length

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

value = TF_USER().email

value = TF_USER().name

value = rowIndex + 1

value = TF_RESPONSE_ID()

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

value = TF_USER().email

value = TF_USER().name

value = crypto.randomUUID()

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

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

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

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

fetch('urlOfEndpoint')

instance.emit('submitButton')

instance.emit('myCustomEvent')

form.nextPage()

form.prevPage()

form.setPage(2)

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

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

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

fetch('urlOfEndpoint')

instance.emit('submitButton')

instance.emit('myCustomEvent')

form.nextPage()

form.prevPage()

form.setPage(2)

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

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

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

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

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

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

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

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

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

date = moment().toDate()

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

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

show = item.columnName === 'supervisor'

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

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

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

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

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

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

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

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

show = !_.isEmpty(data.sharePointSelect)

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

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

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

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

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

valid = data.numberField < 1000

valid = instance.getValue().length < 3

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

result = data.number > 1000

result = data.dropDownList === 'option1'

schema = {
    disabled: true
}

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

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

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

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

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

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

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


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

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

.form-pdf {
    color: red;
}

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

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

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

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