Existing Repeat Entry Expanded Flag

📋 Overvie

Automatically set a flag field when users expand existing repeat entries, enabling workflows and conditional logic based on user interaction. This JavaScript solution tracks when users expand existing repeat entries and sets a flag field to true within the same entry. This enables you to trigger workflows, show/hide fields, or perform other actions when users interact with repeat data.

Example form template:

Repeat Expand Indicator.json12.2 KB

✅ What it does:

Detects when existing repeat entries are expanded
Sets a designated flag field to 'true'
Triggers change events for workflow integration
Works only with existing repeat entries (not new ones)

🛠️ Setup Requirements

Required Components:

Repeat Field - Your main repeat group
Flag Field - A field inside the repeat entry (can be Hidden, Text, Checkbox, etc.)
JavaScript Field - To contain the tracking script

Field IDs Needed:

repeat_field_id - Component ID of your Repeat field
flag_field_component_id - Component ID of the flag field inside repeat entries

⚙️ Implementation Steps

Step 1: Add JavaScript Field

Add a JavaScript component to your form (same page as the Repeat)
Set load delay to 100ms (recommended)

Step 2: Configure Script Variables

Update these two variables in the script:

// Replace with your Repeat field's component_id
var repeat_field_id = 'YOUR_REPEAT_COMPONENT_ID';
// Replace with your flag field's component_id
var flag_field_component_id = 'YOUR_FLAG_FIELD_COMPONENT_ID';

Step 3: Add Complete Script

Copy the full script from the JavaScript Code section below.

Step 4: Test Implementation

Save your form
Create some existing repeat entries (prefilled or previously saved)
Click to expand an existing entry
Verify the flag field updates to 'true'

💻 JavaScript Code

// Set the repeat group component id that this script should respond to
var repeat_field_id = 'REPLACE_WITH_REPEAT_FIELD_COMPONENT_ID';
// Set the field component id inside the repeat entry that should be set as a flag when expanded
var flag_field_component_id = 'REPLACE_WITH_FLAG_FIELD_COMPONENT_ID';
// Set the field flag value to true on the provided input element and trigger change so repeat logic saves
function set_flag_value_on_input( flag_input_element ) {
  // Get the input type to handle different element types
  var input_type = ( flag_input_element.attr( 'type' ) || '' ).toLowerCase();
  // Get the tag name to determine how to set the value
  var tag_name = ( flag_input_element.prop( 'tagName' ) || '' ).toLowerCase();
  // Check if the input is a checkbox that needs a checked state
  if ( tag_name === 'input' && input_type === 'checkbox' ) {
    // Set the checkbox as checked
    flag_input_element.prop( 'checked', true );
    // Trigger the change event to ensure repeat entry logic captures this update
    flag_input_element.trigger( 'change' );
    // Stop further processing because the checkbox case is complete
    return;
  }
  // Set the flag value to 'true' for generic input, textarea, and select elements
  flag_input_element.val( 'true' );
  // Trigger the change event to ensure repeat entry logic captures this update
  flag_input_element.trigger( 'change' );
}
// Find the flag field input inside the provided repeat entry panel using stable selectors
function find_flag_input_in_repeat_panel( repeat_entry_panel ) {
  // Try the stable wrapper id that includes the component id in the format #component-<component_id> and select the input content
  var flag_input = repeat_entry_panel.find( '#component-' + flag_field_component_id + ' .input_content' );
  // Fall back to scanning common form controls within the same wrapper id if input_content is not present
  if ( !flag_input.length ) flag_input = repeat_entry_panel.find( '#component-' + flag_field_component_id + ' input, #component-' + flag_field_component_id + ' textarea, #component-' + flag_field_component_id + ' select' );
  // Fall back to data-component_id wrapper with the standard input_content child if the id-based selector fails
  if ( !flag_input.length ) flag_input = repeat_entry_panel.find( '[data-component_id=\'' + flag_field_component_id + '\'] .input_content' );
  // Fall back to data-component-id (hyphen) wrapper with the standard input_content child if the underscore attribute is not present
  if ( !flag_input.length ) flag_input = repeat_entry_panel.find( '[data-component-id=\'' + flag_field_component_id + '\'] .input_content' );
  // Fall back to scanning all inputs and matching by the closest wrapper that carries either data-component id attribute or the #component- id
  if ( !flag_input.length ) flag_input = repeat_entry_panel.find( '.input_content, input, textarea, select' ).filter( function() {
    // Get the current element as a jQuery object
    var el = $( this );
    // Find the closest wrapper that has a component identifier attribute or a matching id pattern
    var wrapper = el.closest( '[data-component_id],[data-component-id],[id^=\'component-\']' );
    // Get the wrapper id or an empty string when not present
    var wrapper_id = wrapper.attr( 'id' ) || '';
    // Return true if the wrapper matches the flag component id using any supported attribute or id format
    return wrapper.attr( 'data-component_id' ) === flag_field_component_id ||
      wrapper.attr( 'data-component-id' ) === flag_field_component_id ||
      wrapper_id === ( 'component-' + flag_field_component_id );
  } );
  // Return the found flag input element or an empty jQuery object for the calling code to handle
  return flag_input;
}
// Determine whether the provided repeat entry panel belongs to the configured repeat group
function is_target_repeat_panel( repeat_entry_panel ) {
  // Find the closest repeat wrapper for this entry
  var repeat_wrapper = repeat_entry_panel.closest( '.formyoula-Repeat' );
  // Return false when the repeat wrapper is not found, which should not happen in normal cases
  if ( !repeat_wrapper.length ) return false;
  // Get the repeat wrapper id which is formatted as component-<repeat_component_id>
  var repeat_wrapper_id = repeat_wrapper.attr( 'id' ) || '';
  // Return whether the current wrapper matches the configured repeat component id
  return repeat_wrapper_id === ( 'component-' + repeat_field_id );
}
// Handle the action that sets the flag when a repeat entry is interacted with
function handle_repeat_entry_flag( repeat_entry_panel ) {
  // Ensure this panel belongs to the configured repeat group before proceeding
  if ( !is_target_repeat_panel( repeat_entry_panel ) ) return;
  // Find the flag field input inside this repeat entry panel
  var flag_input = find_flag_input_in_repeat_panel( repeat_entry_panel );
  // If the flag input is found, set its value to 'true' and trigger a change event
  if ( flag_input.length ) {
    // Set the flag value on the input and trigger change
    set_flag_value_on_input( flag_input.first() );
    // Stop processing after a successful update
    return;
  }
  // Collect available component wrapper identifiers to help with troubleshooting when the field is not found
  var available_wrappers = repeat_entry_panel.find( '[id^=\'component-\'],[data-component_id],[data-component-id]' ).map( function() {
    // Return the most useful identifier for each wrapper in priority order
    return $( this ).attr( 'id' ) || $( this ).attr( 'data-component_id' ) || $( this ).attr( 'data-component-id' ) || '';
  } ).get();
  // Log a helpful message when the flag field is not found inside the repeat entry
  console.log( 'Field not found in repeat entry for component id: ' + flag_field_component_id + '. Available component wrappers in this entry: ', available_wrappers );
}
// Listen to clicks on existing repeat entry headers
$( document ).on( 'click', '.existing_repeat_entry_panel .panel-heading', function( event ) {
  // Get the current repeat entry panel container from the clicked header
  var repeat_entry_panel = $( this ).closest( '.existing_repeat_entry_panel' );
  // Handle the repeat entry flag logic for this panel
  handle_repeat_entry_flag( repeat_entry_panel );
} );
// Listen to the Bootstrap collapse shown event
$( document ).on( 'shown.bs.collapse', '.existing_repeat_entry_panel .panel-collapse', function( event ) {
  // Get the current repeat entry panel container from the opened collapse section
  var repeat_entry_panel = $( this ).closest( '.existing_repeat_entry_panel' );
  // Handle the repeat entry flag logic for this panel
  handle_repeat_entry_flag( repeat_entry_panel );
} );

🔗 Workflow Integration

Using with Field Updates

Add Field Update Button inside the same repeat entry
Configure visibility: Only show inside existing repeat entries
Add condition: Show when flag field = 'true'
Map updates: Configure field mappings as needed
Enable silent updates: Set "Update Fields Silently" if available

Event Flow:

User expands entry → Flag set to 'true' → Field Update triggers → Other fields update

🐛 Troubleshooting

Common Issues:

❌ "Field not found" console error

Verify flag_field_component_id is correct
Ensure flag field is inside the repeat entry
Check that field wrapper has proper component ID attributes

❌ Script doesn't trigger

Confirm repeat_field_id matches your repeat component
Ensure you're testing with existing entries (not new ones)
Check browser console for JavaScript errors

❌ Flag field not updating

Verify field is not read-only or disabled
Check that field supports the value type being set
Ensure change events are not blocked by other scripts

Debugging Tips:

Open browser console to see error messages
Check the logged available wrapper IDs for mismatches
Test with a simple text field before using hidden fields

📚 Field Type Support

Field Type	Set Method	Value
Text	`.val('true')`	`'true'`
Hidden	`.val('true')`	`'true'`
Checkbox	`.prop('checked', true)`	`checked`
Textarea	`.val('true')`	`'true'`
Select	`.val('true')`	`'true'`

💡 Use Cases

Conditional Logic: Show additional fields when entries are expanded
Workflow Triggers: Run Field Updates based on user interaction
Analytics: Track which repeat entries users are viewing
Progressive Disclosure: Load additional data when entries are opened
Validation: Apply rules only to entries that have been reviewed

⚠️ Important Notes

Only works with existing repeat entries (prefilled or saved data)
Requires jQuery (standard in FormYoula forms)
Flag field must be inside the same repeat entry
Change events are triggered for proper workflow integration
Compatible with Bootstrap collapse events used by repeat entries