Conditionals in Templates

Use conditional logic to display content intelligently and dynamically in your documents.

Introduction

Conditionals allow you to:

• Display text only when a variable has a value
• Show different content based on conditions
• Automatically hide empty sections
• Compare numeric values

Conditional Helpers

if - Basic Conditional

Displays content if the variable exists and is true:

{{#if custom.notes}}
  <p><strong>Notes:</strong> {{custom.notes}}</p>
{{/if}}

With alternative (else):

{{#if custom.discount}}
  <p>Discount applied: {{custom.discount}}%</p>
{{else}}
  <p>No discount</p>
{{/if}}

ifExists - Check Existence

Checks if the variable exists (not null or undefined):

{{#ifExists customer.phone}}
  <p>Phone: {{customer.phone}}</p>
{{/ifExists}}

ifNotEmpty - Check if Not Empty

Useful for displaying suffixes or prefixes only when there's a value:

{{#ifNotEmpty custom.discount}}
  {{custom.discount}}%
{{/ifNotEmpty}}

Practical example:

<p>Discount: {{#ifNotEmpty custom.discount}}{{custom.discount}}%{{/ifNotEmpty}}</p>

- If `custom.discount = 10` → "Discount: 10%" - If `custom.discount` is empty → "Discount: "

ifEquals - Equality Comparison

Compares if two values are equal:

{{#ifEquals custom.type "premium"}}
  <div class="badge-premium">Premium Customer</div>
{{/ifEquals}}

With alternative:

{{#ifEquals custom.status "active"}}
  <span style="color: green;"> Active</span>
{{else}}
  <span style="color: red;"> Inactive</span>
{{/ifEquals}}

ifNotEquals - Difference Comparison

Checks if two values are different:

{{#ifNotEquals custom.type "basic"}}
  <p>Exclusive benefits included!</p>
{{/ifNotEquals}}

ifGreaterThan - Greater Than

Compares if a value is greater than another:

{{#ifGreaterThan custom.value 1000}}
  <p style="color: red;"> Value above standard limit</p>
{{/ifGreaterThan}}

With alternative:

{{#ifGreaterThan custom.age 18}}
  <p>Adult</p>
{{else}}
  <p>Minor - Guardian required</p>
{{/ifGreaterThan}}

ifLessThan - Less Than

Compares if a value is less than another:

{{#ifLessThan custom.installments 12}}
  <p>Cash payment or installments up to {{custom.installments}}x</p>
{{/ifLessThan}}

Practical Examples

1. Display Discount Only if Present

<h2>Values</h2>
<p>Total Value: $ {{custom.total_value}}</p>

{{#ifNotEmpty custom.discount}}
<p>Discount: {{custom.discount}}%</p>
<p>Value with Discount: $ {{custom.final_value}}</p>
{{/ifNotEmpty}}

2. Show Complete or Partial Address

<h3>Address</h3>
<p>{{customer.address.street}}, {{customer.address.number}}</p>

{{#ifExists customer.address.complement}}
<p>{{customer.address.complement}}</p>
{{/ifExists}}

<p>{{customer.address.city}}/{{customer.address.state}} - ZIP: {{customer.address.zip_code}}</p>

3. Customer Classification by Value

{{#ifGreaterThan custom.contract_value 50000}}
  <div style="background: gold; padding: 10px;">
    <h3> VIP CUSTOMER</h3>
    <p>Priority service and exclusive benefits</p>
  </div>
{{else}}
  {{#ifGreaterThan custom.contract_value 10000}}
    <div style="background: silver; padding: 10px;">
      <h3> PREMIUM CUSTOMER</h3>
      <p>Benefits and special discounts</p>
    </div>
  {{else}}
    <div style="background: lightblue; padding: 10px;">
      <h3> STANDARD CUSTOMER</h3>
      <p>Quality service guaranteed</p>
    </div>
  {{/ifGreaterThan}}
{{/ifGreaterThan}}

4. Payment Status

<h2>Payment Status</h2>

{{#ifEquals custom.payment_status "paid"}}
  <p style="color: green; font-weight: bold;"> PAID</p>
  <p>Payment Date: {{formatDateShortEN custom.payment_date}}</p>
{{else}}
  {{#ifEquals custom.payment_status "pending"}}
    <p style="color: orange; font-weight: bold;"> PENDING</p>
    <p>Due Date: {{formatDateShortEN custom.due_date}}</p>
  {{else}}
    <p style="color: red; font-weight: bold;"> OVERDUE</p>
    <p>Was due on: {{formatDateShortEN custom.due_date}}</p>
  {{/ifEquals}}
{{/ifEquals}}

5. Optional Customer Data

<h2>Contact Information</h2>

<p><strong>Name:</strong> {{customer.name}}</p>
<p><strong>Email:</strong> {{customer.email}}</p>

{{#ifExists customer.phone}}
<p><strong>Phone:</strong> {{customer.phone}}</p>
{{/ifExists}}

{{#ifExists customer.mobile}}
<p><strong>Mobile:</strong> {{customer.mobile}}</p>
{{/ifExists}}

{{#ifExists customer.whatsapp}}
<p><strong>WhatsApp:</strong> {{customer.whatsapp}}</p>
{{/ifExists}}

6. Conditional Clauses in Contract

<h2>SPECIAL CLAUSES</h2>

{{#ifGreaterThan custom.term_months 12}}
<p><strong>Clause 1:</strong> Due to the extended term of {{custom.term_months}} months,
special automatic renewal conditions apply.</p>
{{/ifGreaterThan}}

{{#ifNotEmpty custom.warranty}}
<p><strong>Clause 2:</strong> The CONTRACTOR offers a {{custom.warranty}} warranty
against manufacturing and workmanship defects.</p>
{{/ifNotEmpty}}

{{#ifEquals custom.payment_type "installment"}}
<p><strong>Clause 3:</strong> Payment will be made in {{custom.num_installments}}
monthly installments of $ {{custom.installment_value}}.</p>
{{/ifEquals}}

7. Conditional Notes Section

{{#if custom.notes}}
<div style="border: 1px solid #ccc; padding: 15px; margin-top: 20px;">
  <h3> Notes</h3>
  <p>{{custom.notes}}</p>
</div>
{{/if}}

Conditionals with Style

Apply CSS Classes Conditionally

<div style="{{#ifEquals custom.priority 'high'}}background: #ffcccc;{{else}}background: #ccffcc;{{/ifEquals}} padding: 10px;">
  <p>Priority: {{uppercase custom.priority}}</p>
</div>

Conditional Icons and Emojis

<p>
  Status:
  {{#ifEquals custom.status "completed"}}{{/ifEquals}}
  {{#ifEquals custom.status "in_progress"}}{{/ifEquals}}
  {{#ifEquals custom.status "pending"}}{{/ifEquals}}
  {{uppercase custom.status}}
</p>

Advanced Use Cases

Age Validation for Contract

{{#ifLessThan customer.age 18}}
<div style="background: #fff3cd; border: 2px solid #856404; padding: 15px; margin: 20px 0;">
  <h3> WARNING</h3>
  <p>Minor customer. Legal guardian signature required.</p>
  <p><strong>Guardian:</strong> {{custom.guardian_name}}</p>
  <p><strong>Guardian SSN:</strong> {{custom.guardian_ssn}}</p>
</div>
{{/ifLessThan}}

Value Range with Multiple Conditions

<h2>Investment Category</h2>

{{#ifGreaterThan custom.investment 100000}}
  <p style="font-size: 20px; color: gold;"> DIAMOND INVESTOR</p>
  <ul>
    <li>24/7 personalized advisory</li>
    <li>Preferential returns</li>
    <li>Exclusive events</li>
  </ul>
{{else}}
  {{#ifGreaterThan custom.investment 50000}}
    <p style="font-size: 18px; color: silver;"> PLATINUM INVESTOR</p>
    <ul>
      <li>Dedicated advisory</li>
      <li>Monthly reports</li>
    </ul>
  {{else}}
    <p style="font-size: 16px; color: bronze;"> GOLD INVESTOR</p>
    <ul>
      <li>Priority support</li>
      <li>Quarterly reports</li>
    </ul>
  {{/ifGreaterThan}}
{{/ifGreaterThan}}

Best Practices

Do

• Use conditionals to hide empty sections
• Combine with formatting helpers: {{#if custom.name}}{{uppercase custom.name}}{{/if}}
• Provide alternatives with else when appropriate
• Use ifNotEmpty for suffixes/prefixes (%, $, etc)

Avoid

• Very complex and nested conditionals (makes maintenance difficult)
• Repeating code in each condition (use CSS classes when possible)
• Forgetting to close tags {{/if}}, {{/ifEquals}}, etc

Helper Summary

Helper	Use	Example
if	Checks if exists and is true	{{#if var}}...{{/if}}
ifExists	Checks if not null/undefined	{{#ifExists var}}...{{/ifExists}}
ifNotEmpty	Checks if not empty (0, "", null)	{{#ifNotEmpty var}}...{{/ifNotEmpty}}
ifEquals	Equality comparison	{{#ifEquals var "value"}}...{{/ifEquals}}
ifNotEquals	Difference comparison	{{#ifNotEquals var "value"}}...{{/ifNotEquals}}
ifGreaterThan	Greater than	{{#ifGreaterThan var 100}}...{{/ifGreaterThan}}
ifLessThan	Less than	{{#ifLessThan var 100}}...{{/ifLessThan}}

Remember

All conditional helpers can use {{else}} to specify alternative content when the condition is false.

Conclusion

With conditionals, your documents become truly dynamic and intelligent, automatically adapting to available data and specific business rules for each situation!