HTML With Conditional Display Of Merge Fields

In this guide, learn how to use an HTML field with conditionally rendered merge fields that automatically update based on specific field values.

Add fields to your form:

Drag and drop one Salesforce Lookup, two Salesforce Prefill, two Text, two Number, one HTML, and optionally, two Multiple Fields Per Row fields.
Rename the Text and Number fields as shown in the images below.

Configure Salesforce Lookup:

Click the pencil icon on the Salesforce Lookup field.
Update the Label, choose an Object, display additional fields, and set a Record Filter.
Save your changes.

Set up Salesforce Prefill fields:

Click the pencil icon on the first Salesforce Prefill field.
Change the Label and specify the Object, Formyoula Parent Field, and Salesforce Parent Field.
Save your changes.

Map Form Fields to Object Fields:

Ensure that “Form Fields” are correctly mapped to the corresponding “Object Field.”

Click the pencil icon of the second Salesforce Prefill field. Change the Label, and set the Object, Formyoula Parent Field and Salesforce Parent Field.

Map “Form Fields” to “Object Field”. Save the changes.

Click the pencil icon of the HTML field and paste the code. Save the changes.

Please use the below code:

<!--{{#compare 489e-018d-e1b6 '' operator='!='}} -->
<ul class="list-group">
	<p>Product present</p>

<!--{{#if 979d-87b3-d98a}} -->
	<li class="list-group-item list-group-item-primary">{{979d-87b3-d98a}} Present with quantity {{48e8-19c9-bdf5}}</li>
<!--{{/if}} -->

<!--{{#if c5ad-babe-2e44}} -->
	<li class="list-group-item list-group-item-secondary">{{c5ad-babe-2e44}} Present</li>
<!--{{/if}} -->
</ul>
</br></br>
<ul class="list-group">
<!--{{#if 979d-87b3-d98a}} -->
  <li class="list-group-item d-flex justify-content-between align-items-center">
    {{979d-87b3-d98a}}
    <span class="badge badge-primary badge-pill">{{48e8-19c9-bdf5}}</span>
  </li>
<!--{{/if}} -->
<!--{{#if c5ad-babe-2e44}} -->
  <li class="list-group-item d-flex justify-content-between align-items-center">
    {{c5ad-babe-2e44}}
    <span class="badge badge-primary badge-pill">2</span>
  </li>
<!--{{/if}} -->
  
</ul>

<!--{{/compare}} -->

Please change the field IDs as per your form.

Please make sure you have set ‘Enable Reload On Merge Field Change’ as Yes and set ‘Enable Advanced Templating’ to Yes.

Additionally, you can use the “Multiple Fields Per Row” field to show more than one field in a single row.

Try the form.

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

HTML Merge_Barcode.json12.2KB

Configure Salesforce Lookup:

Click the pencil icon on the Salesforce Lookup field.
Update the Label, choose an Object, display additional fields, and set a Record Filter.
Save your changes.

HTML With Conditional Display Of Merge Fields - BarCode