In this blog post, we’re going to look at how to make “clickable” links to select records and create a dynamic Salesforce picklist right within your web form! This is a great use case when wanting to Select a specific record to work with on a successive form, build out smarter (cleaner) workflows, and create a more dynamic form fill experience.
The example we’ll be working with today is to select a contact to edit from an account in Salesforce. On the first form, we’re going to give users as many options as meet our criteria and when they click one of the links to select, we’ll prefill the second form with that chosen contact’s information.
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. Though our Success Team does not support custom code help, we work with a number of partners who may be able to assist you, please email us at [email protected].
Prerequisites
First, let’s create the two forms and give them names. For this example, I created forms titled “Clickable Link Selection” and “Clickable Link Prefill and Edit”. Keep the URLs for these two forms handy.
First Form Setup
The first form we’ll build for this tutorial has only a few requirements on the construction side. At its core is the repeatable section where we’ll push Salesforce information and build out the links.
The first step is to create a new fieldset and make it repeatable.
Give your fieldset a name, and then add in whichever fields you want to display out of Salesforce (for this example, we’ll just do Full Name of a Contact). You’ll also need to add a hidden field to take the URL parameter you want to push into the next form (the Salesforce ID in our example).
Here’s what that fieldset will look like in the form builder.
Now, we’re going to add a Text element (Add Content > Text & Image > Text).
Once added and selected, click the “HTML” button. Delete the text and paste in the following HTML structure:<a href=”https://instanceName.tfaforms.net/secondFormID?urlParam=#” class=”clickableLink”>Text to display for your link</a>
Of course, replace:
- “instanceName” with your FormAssembly account instance
- “secondFormID” with the numerical ID of the form you want to push to
- “urlParam” with the prefill parameter for the next form’s prefill connector
- “Text to display for your link” with whatever you’d like to use
Also:
- Leave the “#” sign in place. This is what we target with replacement
- Leave “clickableLink” as the CSS class
Our example looks like this:<a href=”https://enterprise-demo.tfaforms.net/394?cid=#” class=”clickableLink”>Clickable link</a>
Now it’s time to paste in some custom code. Before we do, we’ll need to know the field ID of the value we want to include in the URL (“Prefilled Value From Salesforce,” in my example). You can find that by going to https://instanceName.tfaforms.net/forms/definition/formID on an Enterprise account or https://app.www.formassembly.com/forms/definition/392
Open Custom Code, and paste in the following:<style>.removeLink, .duplicateLink, .wForm .primaryAction { display: none; }</style> <script src="https://code.jquery.com/jquery-3.2.0.min.js" integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I=" crossorigin="anonymous"></script> <script> $(document).ready(function(){ //declares function to replace href in hyperlink text with value of a field in repeat section function dynamicLinks(linkClass, fieldId) { //creates selector statement with fieldId var selection = 'input[id^="' + fieldId + '"]'; //intializes array to store new links var linkArr = []; //adds links to array from field in repeat section $(selection).each(function() { linkArr.push($(this).val()); }); //replaces the class of hyperlinks with values from the link array $(linkClass).attr("href", function(i, origLink) { return origLink.replace(/#/, linkArr[i]); }); }; // This is the field ID to update with your value from Salesforce field ID dynamicLinks(".clickableLink","tfa_2"); }); </script>
tfa_2 is my field, so replace that with whichever field’s value you want to push into the URL.
Now that we have the forms set up, let’s have a look at which connectors we’re using.
First Form Connector Setup
On the first form, we only need a Prefill Connector, since we won’t actually be submitting anything through this form, just using it to select a record. Navigate to Connectors and add a Salesforce Prefill Connector:
In this connector, map in whichever fields you’d like to display and set the URL parameter accordingly. For our example of Contacts on an Account, we’ll pass in the Account ID and then prefill all (repeatedly) Contacts that match that Account ID:
Make sure that your repeatable section is chosen and decide your sort order. From here, we can move on to the second form.
Second Form Setup
For the second form, the setup is as simple or complex as you want it to be. When working with Contacts, you may only need a few fields. When working with long applications, as Baltimore Corps does (huge shoutout to Billy Daly at Baltimore Corps, who was critical in optimizing this use case!), you may need a few more fields. For this example, I’ll keep it simple with just basic Contact information prefilling:
Second Form Connector Setup
Again, it depends on your use case for the Submit Connector, but we’ll definitely cover the Prefill connector.
Make sure that the URL parameter that you specified in your clickable link is the same URL parameter that your prefill connector takes:
You’ll notice ‘accid’ as my URL parameter in the prefill connector and ‘cid’ used in my clickable link URL.
From here, we have everything we need to test! So let’s give that a whirl:
You’ll notice the Account ID as a prefill parameter in the first form and then prefilling all Contacts. I choose a contact, load the second form that has the Contact ID dynamically built in the URL and then can edit that specific contact!
Want some more Salesforce use cases? We’ve combined our top tutorials into one eBook. Download it today!
