How To: Display and Select Salesforce Opportunity Records Based on Multiple Criteria Search

Intro

In this blog post, we are going to expand upon a previous tutorial to look at how to implement a multiple-criteria search of Salesforce records using FormAssembly. Implementing this search functionality makes locating the right record in Salesforce a much easier task for form respondents, and creates cleaner and better-flowing forms.
In the example below, we’ll be working with the Opportunity object. Our two search criteria are the Opportunity name and its amount.
Note: this is somewhat advanced use of FormAssembly. If you’re not comfortable editing custom code, you might want to build up those skills before attempting this tutorial. Here is some information from our documentation to get you started. Please note that our Success Team does not support custom code help, however, we do work with a number of partners who may be able to assist you, please email us at partners@formassemblycom.

Prerequisites

Before we start, we need to create three forms and give them names. For simplicity purposes, the forms in this tutorial are called “Multiple-Criteria Search – Part 1/2/3”. Note: You’ll need to use the URL for form three in the setup for form two.

First form setup

The first form is just an interface to enter the criteria for our search. Go ahead and add two fields to the form as shown in the screenshot below:
1 - salesforce opportunity record

Second form setup

For this form, we need a way to show the results of our search. We’ll do that by creating a repeatable fieldset with the records we get from Salesforce.
The first step is to create a new fieldset and make it repeatable. Recreate the following:
2 - salesforce opportunity record
To create the “Select” hyperlink, follow these steps:
1. Add a new Text element on the page
3 - salesforce opportunity record
2. Click on HTML in the menu above the new Text element:
4 - salesforce opportunity record
3. Paste the following into the pop-up:
<a class=”htmlContent” href=”LINK”>Select</a>
4. Click “Save HTML” and “Done”
Once you are done with the Text field, navigate to Properties -> Custom Code and insert the following:
<script src=”https://code.jquery.com/jquery-3.2.0.min.js” integrity=”sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I=” crossorigin=”anonymous”>
</script>
This will give us access to use jQuery framework, which makes manipulating HTML elements a lot easier.
Once we have jQuery available to us, add the following AFTER the previous script. Replace tfa_XXX with the alias of the ID field, YOUR_INSTANCE with your instance name, and THIRD_FORM_URL with the URL of the form we’re about to create!
<script>
$(document).ready(() => {
 const htmlArr = $(‘.htmlContent > a’);
 const linkArr = $(‘input[id^=tfa_XXX]’);
 for (var i=0; i<htmlArr.length; i++) {
      htmlArr[i].href = ‘https://YOUR_INSTANCE.tfaforms.net/THIRD_FORM_URL?id=’+linkArr[i].value;        
 }
});
</script>
This code snippet will modify where each “select” link on the page takes us.

Third form setup

This setup is completely up to you! We’re only using this form to display the Opportunity information that users select in the second form.
Example:
5 - salesforce opportunity record
Hint: Use the Salesforce Import Tool to speed up this process and automatically configure the Salesforce Connector.

Setting up connectors

There are no connectors on the first form.
For the second form, we are going to use the Salesforce Prefill Connector. (Learn more about our Salesforce Prefill Connector.) Once the Prefill Connector is created, we need to enable it and set it up.
6 - salesforce opportunity record
The setup is very simple! Since we have two search terms, we need to pass them both to the connector.
7 - salesforce opportunity record
Notice that we are using the LIKE operator for the first parameter and GREATER THAN for the second.
Since we need a way to display multiple Opportunity records in a repeatable section, we need to set up the multiple records setting.
8 - salesforce opportunity record
Lastly, we need to map the fields.
9 - salesforce opportunity record
The third form will also have a simple Salesforce Prefill Connector. We are going to prefill the form based on the id of the record. Your mappings might vary here.
10 - salesforce opportunity record

Passing data between forms

Next, we’ll be using form redirects to pass the search terms from the first form to the second.
1. Go to the Notifications page for our first form.
11 - salesforce opportunity record
2. In the second field of the acknowledgment section, put the following:
12 - salesforce opportunity record
https://YOUR_INSTANCE.tfaforms.net/SECOND_FORM_ID?name=%25%%tfa_NAME%%%25&amount=%%tfa_AMOUNT%%
3. Replace YOUR_INSTANCE with your instance name, SECOND_FORM_ID with the id of the second form, tfa_NAME with the opportunity name search term field and tfa_AMOUNT with the other field on the first form. Notice that we’re using %25 around the first parameter – that is because the LIKE operator in Salesforce expects % around the term. We need to encode, hence %25 represents %.
4. Click Apply.

The results

Once you’ve completed the setup, you should test your forms. The flow should go like so:
Enter a search term and a “greater than” figure for the amount field.
13 - salesforce opportunity record
2. You should see all records that match those search terms displayed on the next form.
14 - salesforce opportunity record
3. When you choose a record by clicking on Select, you should be taken to the third form.
15 - salesforce opportunity record
4. The third form will show additional information about the selected opportunity.


If you liked this Salesforce & FormAssembly tutorial, we have plenty more on our blog. Check out this tutorial on updating information in Salesforce without a license.
Don’t have a FormAssembly account? Sign up today!

Share

Join our newsletter!

Receive the latest data collection news in your inbox.