📋 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 fieldflag_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