Hey all, I’ve recently been working a lot of Account Engagement over the past year and today I ran into a small issue. We are currently wrapping up our implementation and adding our translation into our environments Forms and Fields, but while doing this I found a mass form label change method using Javascript or an extension, but unfortunately it seemed the extension is deprecated.
I’ll link the source material here, thanks to Salesforce Ben for the really useful document, although some details and potential bug fixes are missing, I’m here to help solve that.
Business Case:
You require multiple versions of a single form in different languages. You want to retain the values for the fields but add new labels for the translations, this can be a tedious process if manual but it can be automated.
Solution:
Using the the Salesforce Ben page we can can automate this solution, although there is an extension created by the user is not-currently working for myself as the updates don’t seem to stick once the form is saved. The other options rely on manual javascript entry into the browser console.
Here’s a step-by-step breakdown of how you can mass apply changes to the forms:
Video Version
Text Breakdown
Step 1: Open Account Engagement / Pardot.
Step 2: Head to Content –> Forms, and open the form you want to edit.
Step 3: Open your CSV or sheet of values you want to use, for the solution you’ll need to convert this to an array. [To convert to an array you can use the following site https://url-decode.com/tool/create-array-js]
Step 4: Once you’ve copied your array Select one of the following updates depending on your requirement:
Update Field Values
var arr = [‘1′,’2′,’3’,]; /* Here you would replace the array with the array you created in step 3*/
var textFields = document.querySelectorAll(“div.controls input.formFieldValue”);
for (var i = 0; i < arr.length; i++) {
if (arr && arr.length) {
textFields[i].value = arr[i];
}
};
Update Field Value Labels
var arr = [‘1′,’2′,’3’,]; /* Here you would replace the array with the array you created in step 3*/
var textFields = document.querySelectorAll(“span.inline input.form-field-value-input”);
for (var i = 0; i < arr.length; i++) {
if (arr && arr.length) {
document.querySelectorAll(“i.icon-font.icon-bigger.muted.vertical-middle”)[i].parentNode.click();
textFields[i].value = arr[i];
}
};
Step 5: Once you’ve selected your method of updating, find the array value and insert your new array, keep this new javascript block somewhere safe as you will be copy and pasting it shortly. Head back over to your form tab, right click the form –> inspect element –> open console –> copy and paste your new javascript and enter.
Common Bugs: You may find you an error appears when trying to run the code, this may be a value array, please review the error message and make adjustments to the array if required. If you get a parent.node error message, then please make sure you are right clicking the form and inspecting from there, then navigating to console from this. This ensure that the javascript is running from the form and finding all the elements required.
Save bug: Another common issue is the first initial update, once saved does not correctly save. To fix this, reopen the form and run the code again and click save, you will then see that it should have fixed the problem and the new values are saved.
Results:
Here you can see the results of running both scripts.
Common Use Case: This is commonly used for updating the Language Field value labels, allowing you to create different labels from the translated forms, to do this, find your list of values and then use the label update javascript method and add your translated values.