Update Repeat Group Field Attributes Based on Custom Logic

In this guide, we will share an example JavaScript code to update repeat group field attributes based on custom logic.

// 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
    } );
  }
} );

For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂