Conditions Editor

Introduction to the Visual Condition Builder

The new Conditions Editor transforms how you create dynamic, data-driven templates by making conditional logic accessible to everyone—no coding required. With our visual interface, you can easily control when elements appear in your document based on your data.

Accessing the Condition Editor

To add conditional logic to any element in your template:

1. Select the element you want to make conditional (text, image, section, table row, etc.)

2. Look for the "Edit Logic" button in the Properties panel on the right side

3. Click "Edit Logic" to open the Logic Editor modal

Understanding the Logic Editor

When the Logic Editor opens, you'll see an intuitive interface for building conditions:

1. Condition Builder: The main area where you'll create your logic

2. Field Selector: Choose fields from your data source to use in conditions

3. Operator Controls: Tools to add AND/OR operators and group conditions

When you close the logic editor you will see how your condition looks in plain language in the properties panel

Elements with conditions are highlighted with an orange border to make them easier to identify within the canvas. Cloning an element will also copy its associated conditions, ensuring the logic is preserved in the duplicate

You can preview and test your conditions with dummy data in the "Preview" tab

Building Your First Condition

Creating a basic condition is simple:

1. In the Logic Editor, click "Add rule"

2. From the field dropdown, select the field you want to evaluate

3. Choose a comparison operator (equals, not equals, greater than, etc.)

4. Enter or select the value to compare against

5. Click "Save" to save your condition

Example: "Show this element if Invoice Status equals 'Paid'"

Creating Complex Conditions

For more sophisticated logic, you can combine multiple conditions:

Adding Multiple Rules

1. Click "Add rule" to add another condition

2. By default, all conditions are joined with AND (all must be true)

3. You can click the AND/OR selector to change how conditions are combined

Using AND/OR Logic

• AND: All conditions must be true (restrictive)

• OR: Any condition can be true (permissive)

Example: "Show this element if (Total Amount is greater than $1000) AND (Customer Type equals 'Premium')"

Removing Conditions

Once you've added conditions to elements in your template you can clear conditions by opening the Logic Editor and clicking the delete icon on a condition

Using Custom Conditions

You can use Custom Conditions to define dynamic logic for conditional rendering in your templates using {{#if}} block.

Basic usage

If you want to show content only when a document has an author, you’d write:

author

This is used in your template like so:

{{#if (author)}}
  Written by {{author.name}}
{{/if}}

Previewing Conditional Elements

To see how conditional elements behave:

1. Switch to Preview mode

2. Your template will display with conditional elements shown or hidden based on your preview data

3. Try different preview data sets to test various scenarios

4. Adjust your condition as needed based on the test results

Examples of Practical Conditional Logic

Invoice Template:

• Show "OVERDUE" watermark if payment date is past due

• Display different payment instructions based on payment method

• Include or exclude shipping details based on order type

• Show discount line only if a discount was applied

Contract Template:

• Include specific clauses based on service type

• Show different terms depending on client category

• Display signature blocks based on agreement type

• Include additional forms only when required

Tips for Effective Conditional Logic

• Start simple: Begin with basic conditions before creating complex logic

• Test thoroughly: Verify your conditions with different data scenarios

• Use meaningful groups: Organize related conditions into logical groups

• Consider edge cases: Account for empty values or unexpected data

• Avoid overlapping conditions: Ensure conditions don't conflict with each other

In the next section, we'll explore how to work with lists and collections, allowing you to create dynamic, repeating content in your templates.

Introduction to the Visual Condition Builder

The new Conditions Editor transforms how you create dynamic, data-driven templates by making conditional logic accessible to everyone—no coding required. With our visual interface, you can easily control when elements appear in your document based on your data.

[SCREENSHOT: Overview of the Conditions Editor interface]

Accessing the Condition Editor

To add conditional logic to any element in your template:

1. Select the element you want to make conditional (text, image, section, table row, etc.)

2. Look for the "Edit Logic" button in the Properties panel on the right side

3. Click "Edit Logic" to open the Logic Editor modal

[SCREENSHOT: Properties panel with "Edit Logic" button highlighted]

Understanding the Logic Editor

When the Logic Editor opens, you'll see an intuitive interface for building conditions:

• Condition Builder: The main area where you'll create your logic

• Field Selector: Choose fields from your data source to use in conditions

• Operator Controls: Tools to add AND/OR operators and group conditions

• Preview Panel: See how your condition looks in plain language

• Test Area: Verify your condition works as expected

[SCREENSHOT: Logic Editor modal with labeled components]

Building Your First Condition

Creating a basic condition is simple:

1. In the Logic Editor, click "Add rule"

2. From the field dropdown, select the field you want to evaluate

3. Choose a comparison operator (equals, not equals, greater than, etc.)

4. Enter or select the value to compare against

5. Click "Apply" to save your condition

Example: "Show this element if Invoice Status equals 'Paid'"

[SCREENSHOT: Building a simple condition step-by-step]

Comparison Operators

Depending on the field type, different comparison operators are available:

For Text Fields

• Equals

• Does not equal

• Contains

• Does not contain

• Begins with

• Ends with

• Is empty

• Is not empty

For Number Fields

• Equals

• Does not equal

• Greater than

• Less than

• Greater than or equal to

• Less than or equal to

• Is empty

• Is not empty

For Date Fields

• Equals

• Does not equal

• Before

• After

• On or before

• On or after

• Is empty

• Is not empty

For Boolean Fields

• Is true

• Is false

• Is empty

• Is not empty

[SCREENSHOT: Operator options for different field types]

Creating Complex Conditions

For more sophisticated logic, you can combine multiple conditions:

Adding Multiple Rules

1. Click "Add rule" to add another condition

2. By default, all conditions are joined with AND (all must be true)

3. You can click the AND/OR selector to change how conditions are combined

Using AND/OR Logic

• AND: All conditions must be true (restrictive)

• OR: Any condition can be true (permissive)

Example: "Show this element if (Total Amount is greater than $1000) AND (Customer Type equals 'Premium')"

[SCREENSHOT: Multiple conditions with AND operator]

Creating Condition Groups

For even more complex logic, you can create nested groups:

1. Click "Add group" to create a new condition group

2. Build conditions within this group

3. Groups can be combined with AND/OR operators

4. You can create multiple levels of nesting for advanced logic

Example: "Show this element if (Status equals 'Approved' AND Amount greater than $500) OR (Customer Type equals 'VIP')"

[SCREENSHOT: Nested condition groups with mixed AND/OR operators]

Working with Different Data Types

Text Conditions

When working with text fields, you can:

• Compare against exact values

• Check if text contains specific phrases

• Verify if a field starts or ends with certain text

• Test if a field has any value or is empty

[SCREENSHOT: Text condition examples]

Number Conditions

For numerical fields, you can create conditions based on:

• Exact matches

• Value comparisons (greater/less than)

• Ranges (by combining multiple conditions)

• Mathematical relationships between fields

[SCREENSHOT: Number condition examples]

Date Conditions

Date fields allow for conditions like:

• Specific date matches

• Date ranges

• Relative dates ("is within last 30 days")

• Date comparisons between fields

[SCREENSHOT: Date condition examples]

Boolean Conditions

For true/false fields:

• Check if value is true or false

• Combine with other conditions for more complex logic

[SCREENSHOT: Boolean condition examples]

Testing Your Conditions

Before finalizing your condition:

1. Use the Test Area to verify your logic

2. Enter sample values for the fields in your condition

3. The system will evaluate if the condition is true or false with those values

4. Adjust your condition as needed based on the test results

[SCREENSHOT: Testing a condition with sample values]

Applying Conditions to Different Elements

Conditions can be applied to various elements in your template:

• Text blocks: Show/hide paragraphs or sentences

• Tables or rows: Display tables or specific rows conditionally

• Images: Include images only when relevant

• Sections: Hide entire sections when not applicable

• Formatting: Apply different styles based on conditions

[SCREENSHOT: Different elements with condition indicators]

Managing Conditions

Once you've added conditions to elements in your template:

• Condition Indicators: Elements with conditions will display a special indicator

• Editing: Select the element and click "Edit Logic" to modify the condition

• Removing: Clear conditions by opening the Logic Editor and clicking "Remove"

• Copying: You can copy elements with their conditions to reuse them

[SCREENSHOT: Template with condition indicators and management options]

Previewing Conditional Elements

To see how conditional elements behave:

1. Switch to Preview mode

2. Your template will display with conditional elements shown or hidden based on your preview data

3. Try different preview data sets to test various scenarios

[SCREENSHOT: Preview mode showing conditional elements]

Tips for Effective Conditional Logic

• Start simple: Begin with basic conditions before creating complex logic

• Test thoroughly: Verify your conditions with different data scenarios

• Use meaningful groups: Organize related conditions into logical groups

• Consider edge cases: Account for empty values or unexpected data

• Document complex logic: Add notes to your template about conditional behavior

• Avoid overlapping conditions: Ensure conditions don't conflict with each other

[SCREENSHOT: Template with well-organized conditional elements]

Examples of Practical Conditional Logic

Invoice Template

• Show "OVERDUE" watermark if payment date is past due

• Display different payment instructions based on payment method

• Include or exclude shipping details based on order type

• Show discount line only if a discount was applied

Contract Template

• Include specific clauses based on service type

• Show different terms depending on client category

• Display signature blocks based on agreement type

• Include additional forms only when required

[SCREENSHOT: Real-world template example with conditional elements highlighted]

In the next section, we'll explore how to work with lists and collections, allowing you to create dynamic, repeating content in your templates.