In this guide, we will share an example JavaScript code to update repeat group field attributes based on custom logic.
For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂
In this guide, we will share an example JavaScript code to update repeat group field attributes based on custom logic.
For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂
// Array of field IDs to listen for changes
var tracked_field_ids = [
'c04f-9aef-cc20', /* Text Field */
'129a-a2f7-e985', /* Date Field */
'a136-dc8f-8eb1', /* Select Field */
'9c78-f96a-b8f0' /* Number Field */
];
var tracked_repeat_group_id = '50e0-0974-0b3a'; /* Repeat Group */
// Update field attributes after field is changes
function update_field_attributes( options ) {
// Check field values and update field attributes
// Check for a specific tracked field
if ( options.changed_field.get( 'component_id' ) == 'c04f-9aef-cc20' ) {
// Check for a specific field value
if ( options.changed_field.get( 'value' ) == true ) {
// Update fields in the repeat group entry
var target_field = options.repeat_fields.findWhere( {
component_id: '129a-a2f7-e985'
} );
// Set target field HTML attributes
target_field.get( 'attributes' ).options = [
{
attribute: 'disabled',
type: 'input',
value: 'disabled'
},
{
attribute: 'style',
type: 'label',
value: 'color: black'
}
];
// Set target field root attributes
target_field.set( {
value: new Date(),
required: true
} );
}
}
// Trigger repeat group save for field changes
formyoula.form_fields[ tracked_repeat_group_id ].trigger( 'repeat:save' );
}
// Listen to new repeat entry field
for ( tracked_field_ids of tracked_field_id ) {
// Add field listener
window.formyoula.form_fields[ tracked_field_id ].on( 'input:set:success', function() {
// Update attributes
update_field_attributes( {
changed_field: this,
repeat_fields: window.formyoula.form_fields[ tracked_repeat_group_id ].get( 'components' ),
is_existing_entry: false
} );
} );
}
// Listening to all field changes in an existing repeat group item
formyoula.form_fields[ tracked_repeat_group_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 ( tracked_field_ids.includes( component.get( 'component_id' ) ) ) {
// Update date fields
update_field_attributes( {
changed_field: component,
repeat_fields: data.updated_repeat_item,
is_existing_entry: true
} );
}
} );