Filtering Repeat Group Entries

This guide will explain how to filter Repeat Group entries on your form.

Initial Setup:

Drag and drop a “Header” (optional), “Salesforce Select”, “Select”, and a “Hidden” field onto your form.
Rename the fields as needed.

Drag and drop an “HTML” and six “Hidden” fields inside a “Repeat” field.
Rename the fields as needed.

Drag and drop an “HTML” and a “JavaScript” field.
Rename the fields as needed.

Configuring The “Salesforce Select” Field:

Click the pencil icon of the “Salesforce Select” field.
Set “Object” and “Display Additional Fields” as shown below.
Add “Record Filter” - Type != null

Configuring The “Select” Field:

Click the pencil icon of the “Select” field.
Add “Select Options” as shown below.

Configuring The “Hidden” Field:

Click the pencil icon of the “Hidden” field.
Add merge field as Value.
Here, 4bd3-14ec-7178 is the field ID of the “Select“ field labelled “Opportunity Stage Name”.
Enable the merge fields option.

Configuring The “Repeat” Field:

Click the pencil icon of the “Repeat” field.
Click “Salesforce Pre-Fill”.

Set “Object”, “Formyoula Parent Field” and “Salesforce Parent Field” as shown below.

Set “Autofill connection” as shown below.
Note: We will create a connection in step 10.

Configuring The “HTML” Field:

Click the pencil icon of the “HTML” field.
Paste the code.

Please use this code.
Please make sure to update the field IDs as per your form.
Here,

aa1d-9c98-b724 is the field ID of the field labelled “Opportunity Name”.
7005-7c8b-6e9a is the field ID of the field labelled “Opportunity Stage Name”.
81a7-0610-8e6b is the field ID of the field labelled “Opportunity Close Date”.
a0df-f41f-f870 is the field ID of the field labelled “Opportunity Amount”.
c814-6c4e-e460 is the field ID of the field labelled “Hidden Stage Name For Filtering”.

<b>{{aa1d-9c98-b724}}</b> <br>
<b> {{7005-7c8b-6e9a}}</b><br>
<b> {{81a7-0610-8e6b}}</b>  
<br>
<b> {{a0df-f41f-f870}}</b>
<br>
<b>{{c814-6c4e-e460}}</b>  
<br>

Enable the Reload on Merge Field Change option.

Configuring The “Hidden” Field:

Click the pencil icon of the “Hidden” field.
Add merge field as Value.
Here, 7005-7c8b-6e9a is the field ID of the “Hidden“ field labelled “Opportunity Stage Name”.
Enable the merge fields option.

Configuring The “HTML” Field:

Click the pencil icon of the “HTML” field.
paste the code.

Please use this code.
Please make sure to update the field IDs as per your form.
Here,

9a2a-1b7d-76dd is the field ID of the Opportunity Repeat Group field.

<style>

#component-9a2a-1b7d-76dd .new_repeat_entry_panel {
  display: none;
}

#component-9a2a-1b7d-76dd tr td:nth-child(3), 
#component-9a2a-1b7d-76dd th:nth-child(3) {
  display: none;
}

#component-9a2a-1b7d-76dd tr td:nth-child(2), 
#component-9a2a-1b7d-76dd th:nth-child(2) {
  display: none;
}

.formyoula-Repeat thead {
  display: none;
}

</style>

Configuring The “JavaScript” Field:

Click the pencil icon of the “JavaScript” field.
Paste the code.

Please use this code.
Please make sure to update the field IDs as per your form.
Here,

4bd3-14ec-7178 is the field ID of the “Select” field labelled “Opportunity Stage Name”.
cfda-14a1-3081 is the field ID of the “Hidden” field labelled “Hidden Field”.
c814-6c4e-e460 is the field ID of the field labelled “Hidden Stage Name For Filtering”.

Save the changes.

// Attach an event listener to the form field with ID '4bd3-14ec-7178' for the 'input:set:success' event
formyoula.form_fields[ '4bd3-14ec-7178' ].on( 'input:set:success', function() {
  // Get the value of the form field, convert it to lowercase, and store it in selected_value
  var selected_value = formyoula.form_fields[ 'cfda-14a1-3081' ].get( 'value' ).toLowerCase();
  // Iterate over each element with the class 'existing_repeat_entry_panel'
  $( '.existing_repeat_entry_panel' ).each( function() {
    // Find the first child element with the class 'repeat_group_components' within the current panel
    var temp_field_value_element = $( this ).find( '.repeat_group_components' )[ 0 ];
    // Find the input element with ID 'component-c814-6c4e-e460' within the found repeat group and get its value, converted to lowercase
    var field_value_element = $( temp_field_value_element ).find( '#component-c814-6c4e-e460 .input_content' ).val().toLowerCase();
    // Determine if the current panel should be shown based on whether the selected value matches the field value
    var should_show = selected_value === field_value_element;
    // Set the display property of the current panel to 'block' if it should be shown, otherwise set it to 'none'
    $( this ).css( 'display', should_show ? 'block' : 'none' );
  } );
} );

10. Creating The Salesforce Connection:

Create a Salesforce Connection to prefill the Repeat field.
Note: Please check out this guide to create Salesforce Connection in detail: https://guides.formyoula.com/public-guides/creating-form-connections

Select “Salesforce” from the available connections list.

Select the “Opportunity” object.

Map the form fields with the Object fields as shown below.

Test Your Form:

Try the form.

Select an Account.
It will display the Opportunities.

Selecting the Opportunity Stage Names will filter the records.

Example Form:

Example Form [Filter Repeat Group Entries].json15.5KB

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