Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.joyfill.io/llms.txt

Use this file to discover all available pages before exploring further.

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

​
Available Events

EventWhen TriggeredPurpose
onFieldChangeField value changesTrack form changes
onFocusField gains focusHandle field focus
onBlurField loses focusHandle field blur
onUploadFile upload requestedHandle file uploads
onCaptureBarcode scan requestedHandle 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 or a page gains focus: 
onFocus = { event ->
    println("Page focused: ${event.pageId}")
    println("Field focused: ${event.fieldId}")
    // Your focus handling logic here
}

​
onBlur

Triggered when a field or a page loses focus: 
onBlur = { event ->
    println("Page lost focus: ${event.pageId}")
    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.