Event Handling

This guide covers the event callbacks available in Joyfill forms and when they’re triggered.

Available Events

Event	When Triggered	Purpose
onFieldChange	Field value changes	Track form changes
onFocus	Field gains focus	Handle field focus
onBlur	Field loses focus	Handle field blur
onUpload	File upload requested	Handle file uploads
onCapture	Barcode scan requested	Handle barcode scanning

onFieldChange

Triggered when any field value changes:

Form(
    editor = rememberDocumentEditor(json),
    onFieldChange = { event ->
        println("Field '${event.fieldId}' changed")
        
        // Handle different event types
        when (event) {
            is ComponentEvent.FieldEvent -> {
                println("Regular field changed")
            }
            is ComponentEvent.CellEvent -> {
                println("Table cell changed in row: ${event.rowIds?.firstOrNull()}")
            }
        }
    }
)

onFocus

Triggered when a field gains focus:

onFocus = { event ->
    println("Field focused: ${event.fieldId}")
    // Your focus handling logic here
}

onBlur

Triggered when a field loses focus:

onBlur = { event ->
    println("Field lost focus: ${event.fieldId}")
    // Your blur handling logic here
}

onUpload

Triggered when file upload is requested:

onUpload = { event ->
    // Return list of URLs for uploaded files
    listOf("https://picsum.photos/200/300")
}

onCapture

Triggered when barcode scanning is requested:

onCapture = { event ->
    // Return scanned barcode value
    "123456789"
}

Event Properties

All events provide context information:

onFieldChange = { event ->
    println("Document ID: ${event.id}")
    println("Field ID: ${event.fieldId}")
    println("Field Title: ${event.source?.component?.title}")
    println("Page ID: ${event.pageId}")
}

Note: Events are not triggered when mode = Mode.readonly.