Exact matches only
Search in title
Search in content
Search in posts
Search in pages

[AppExchange – 123FormBuilder] Prefill dropdown with picklist values

Let’s assume you want to bring all the available values from a specific Salesforce picklist, without having to manually add those values in 123FB field and the pre-selected value on the form needs to be the one selected in SF on that specific record.

This setup is useful especially if the values in the SF picklist will change often or if you have a large list of values and find it difficult to manually add them as choices on the form.

In order to walk you through the setup, let’s consider this scenario:

I want to prefill on the form the Lead Source dropdown, but also list all the other available choices from the SF picklist, in case the person filling out the form needs to change the selected option.

  • SF Object -> Contact
  • SF Picklist -> Lead Source

Let’s get started. Follow this step by step guide:


Step 1. Create Lookup in the Picklist object and prefill form dropdown with SF values


In your form’s settings go to Salesforce integration and choose Object Lookup.

Start by creating a new lookup, name it (we called it lookup1) and select the object to be Picklist Value Info.

123Formbuilder Salesforce prefill

Next click on Add New Filter where: the Salesforce Field is Entity Particle ID, operation Equals and Form field is Custom Value with the value as the ‘FieldDefinitionId’

In Salesforce field to return select the Value field.

123Formbuilder Salesforce prefill

In case you don’t know what the FieldDefinitionId for your field in question is, you will first need to:

123Formbuilder Salesforce prefill

  • Select your Object
  • Copy the following query :

SELECT EntityDefinitionId, QualifiedAPIName, FieldDefinitionId FROM EntityParticle WHERE EntityDefinition.QualifiedApiName =’OBJECT_API_NAME’

  • Replace OBJECT_API_NAME with your object EX: “Contact”, “PickList__c”

  • Run the Query and get the ‘FieldDefinitionId’ from the query results. In our case it will be Contact.LeadSource.

123Formbuilder Salesforce prefill

Now, that we have returned from Salesforce the values, we need to set the Form Prefilling part.

Switch to the Form Preffiling tab click on Add prefill connector and select the lookup that we just built

For the Form field select the dropdown that you want to populate (in our scenario – Lead Source) and in the Salesforce field select Value.

123Formbuilder Salesforce prefill

Stop here if you just need to bring on the form the picklist values available in Salesforce.
Continue if you also want to have the dropdown prefilled with the value selected in Salesforce.


Step 2 Create lookup to return from Salesforce the selected value for a specific record and prefill a text field


First, add a short text field on the form. You can even set it to be hidden on the form, the prefill will work regardless if the field is displayed or not on the form.

Create a new lookup and choose from which object you want the information to be prefilled.

Remember that in this scenario, I want to prefill Lead Source from Contact, so the new Lookup will be on the Contact object and I will return the Lead Source field from Salesforce:

123Formbuilder Salesforce prefill

Now, let’s prefill the text field with that value.

Navigate to Form Prefilling  create a new prefill connector and select the lookup created above. At Form field choose your text field and at Salesforce Fields choose the value returned from Salesforce.

123Formbuilder Salesforce prefill


Step 3 – Create, upload and add to the form this custom JS


This is the final step needed to return from Salesforce the selected value for a specific record and prefill a text field.

Copy the following script in a text editor.

(function(){

window.addEventListener('load', function(){

loader.engine.on('compute-form-rules-done', function() {

var value = loader.getDOMAbstractionLayer().getControlValueById('34752448'); // '34752448' id of the control where the selected value is (the hidden input)

loader.getDOMAbstractionLayer().setControlValueById('34752445', value); //'34752445' id of the picklist values (the dropdown)

});

});

})();

Replace field IDs that are made bold in the script with your own field IDs.

To find your field IDs, right click on the field select Inspect Element and hover over your mouse cursor over your entire field. The ID will be listed after data-id. For more information check out this guide.

After you replaced the field IDs, save the file with the .js extension and upload the JS script file on a secured hosting service.

Once you have the script URL, go to your form’s Settings – Advanced – Form tab section and paste the script under Add a JS script to your form.

That’s it!


Related articles:

Leave a Reply

Your email address will not be published. Required fields are marked *

Frequently Asked Questions

Here is a list of the most frequently asked questions. For more FAQs, please browse through the  FAQs page.

Is this service free?
Yes, we offer a free form builder service. Just sign up to the Basic plan and you are all set. This plan is forever free, but you are limited with a few features only, such as 5 forms per account, 100 submissions per month and you have to keep the backlink to 123FormBuilder on your forms. Check out our features matrix for more information.
How many forms can I create?
It depends on the service plan you are on. Higher service plans enable more features, including more web forms for your account. If you need more forms, go to the My Account section of your account and click the upgrade button. To create an unlimited number of forms, either upgrade to the Platinum service plan or higher. Consult our features matrix for more information.
How can I publish my forms?
You can publish your forms in many ways, by using their direct URL or HTML link, embedding them with a JavaScript code, Inline HTML or iFrame, using the Facebook app or the WordPress plugin, using popups, the Blogger code snippet and many more. Once you have created and customized your form, go to the Publish section to complete your work. Read more in our documentation.
How do I change my form design?
You can change the design of your form in the Themes section, which is located in your form settings. We offer a set of more than 30 predefined form themes for your forms, but you can also create your own from scratch. You can customize the submit button, the logo and more. To apply your own stylesheets, all forms come with a custom CSS editor.

Can't find what you're looking for?

This website is using cookies. By continuing to browse, you are agreeing to our use of cookies as explained in our Cookie Policy. OK