Filtering Repeat Group Entries

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

1. 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.

2. 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

3. Configuring The “Select” Field:

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

4. 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.

5. 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.

6. 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.

7. 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.

8. 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>

9. 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.

11. 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:

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