Formyoula Guides 📖
Formyoula Guides 📖
/
Update Repeat Group Field Attributes Based on Custom Logic

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 🙂