In this guide, we will share an example JavaScript code that will listen to all field events to understand all changes happening for the specific field.
For any questions, please contact us - at [email protected] or the Formyoula in-app chat 🙂
// Set field id to monitor
var field_id = '123-123-123';
// Set repeat id to monitor if the field is inside the repeat group
var repeat_id = '';
// Enable or Disable UI alerts for field changes
var enable_field_alerts = false;
// For new repeat group fields
formyoula.form_fields[ field_id ].on( 'all', function( event, data ) {
// Log field information
log_field_changes( {
field: this,
event: event,
data: data
} );
} );
// Check if repeat id is provided
if ( repeat_id ) {
// Listening to all field changes in an existing repeat group item list
formyoula.form_fields[ repeat_id ].on( 'all', function( event, data ) {
// Check if field updates are available
if ( !data || _.isEmpty( data.updated_sub_component ) ) return;
// Get actual field that was changed
var component = data.updated_sub_component;
// Check if repeat field component changes should be tracked
if ( component.get( 'component_id' ) != field_id ) return;
// Log field information
log_field_changes( {
field: component,
event: event,
data: data
} );
} );
}
// Listen to all component initialize events
formyoula.event_on( 'component:initialize', function( options ) {
// Get field component
var component = options.view.model;
// Check for field and repeat Ids
if ( component.get( 'component_id' ) == field_id || component.get( 'component_id' ) == repeat_id ) {
// Log field information
log_field_changes( {
field: component,
event: 'component:initialize',
data: options
} );
}
});
// Listen to all component on render events
formyoula.event_on( 'component:onRender', function( options ) {
// Get field component
var component = options.view.model;
// Check for field and repeat Ids
if ( component.get( 'component_id' ) == field_id || component.get( 'component_id' ) == repeat_id ) {
// Log field information
log_field_changes( {
field: component,
event: 'component:onRender',
data: options
} );
}
});
function log_field_changes( options ) {
// Log all options
console.log( ' --------- ' + options.field.get( 'label' ) + ' --------- ' );
console.log( 'Field Value: ', options.field.get( 'value' ) );
console.log( 'Event: ', options.event );
console.log( 'Repeat Entry Id: ', options.field.get( 'attributes' ).repeat_entry_id );
console.log( 'Field: ', options.field );
console.log( 'Data: ', options.data );
}