Dynamic Fields Comprehensive Guide

Dynamic Fields - Comprehensive Guide

Dynamic Field is currently in BETA

Overview

Dynamic Fields are a powerful field type that calculates and displays values in real-time without saving data to your database. They're designed to improve performance for apps with many calculated fields while providing instant feedback to users as they fill out forms.

Key Concept: Dynamic fields are read-only fields that compute values on-the-fly when displayed, rather than storing them in the database.

What Makes Dynamic Fields Special?

Traditional Fields vs Dynamic Fields

Traditional Fields	Dynamic Fields
Save values to database	Calculate values when displayed
Slower writes, faster reads	Faster writes, slightly slower reads
One field = one calculation	One field = multiple templates
Values can be searched and filtered	Values cannot be searched or filtered
Can be used in other equations	Cannot be used in other equations

When to Use Dynamic Fields

Perfect Use Cases

1. SQL Field Limit: When your table approaches the database column limit, dynamic fields with multiple templates can replace several regular fields.
2. Display-Only Values: When you need to show calculated values in your app or API but don't need to store them.
3. Slow Form Submissions: When forms take too long to save due to many equation fields updating on every submit.
4. Real-Time Calculations: When you want users to see calculated results update instantly as they type.
5. Complex Queries: When you need to use advanced Handlebars-like syntax for data manipulation.

When NOT to Use Dynamic Fields

Avoid dynamic fields if you need to:

• Search or filter by the calculated values
• Sort records by the field values
• Use the values in other equations or formulas
• Store the calculated values permanently

How Dynamic Fields Work

Templates: Multiple Calculations in One Field

Unlike regular fields, a single dynamic field can contain multiple templates. Each template is a separate calculation or output that you can display in different components.

Example: One "Cost Calculations" dynamic field might have three templates:

• Template 1: Subtotal (quantity × unit price)
• Template 2: Tax amount (subtotal × tax rate)
• Template 3: Grand total (subtotal + tax)

You can add the same dynamic field to a form three times, selecting a different template for each instance.

Handlebars Syntax

Dynamic fields use Handlebars syntax with special functions to process data:

Double Curly Braces

Use {{ }} for field values and functions:

{{field_123}}
{{multiply field_50 10}}
{{toFixed (multiply field_50 10) 2}}

Important: When nesting functions, only use one set of double curly braces around the entire expression.

Triple Curly Braces

Use {{{ }}} to render HTML stored in fields:

{{field_100}}   
{{{field_100}}}  

Creating Dynamic Fields

Step 1: Add the Field

1. Navigate to your Data Table
2. Click Fields tab
3. Find Dynamic Field under the Equation category
4. Click to add the field
5. Give it a descriptive name

Step 2: Create Templates

Inside the field editor:

1. Click the + (plus) icon to create a new template
2. Name your template (e.g., "Subtotal", "Tax", "Total")
3. Build your calculation using:
   • Add Field: Dropdown menu to insert field IDs
   • Snippets: Pre-built templates and functions library
   • Manual entry: Type Handlebars syntax directly
4. Click Save

Step 3: Use the Snippet Library

The Snippets button gives you access to ready-made templates organized by category:

• Text: String manipulation (uppercase, truncate, reverse)
• Numbers: Mathematical operations (multiply, add, toFixed)
• Logic: Conditional statements (if, unless, is, gt, lt)
• Dates: Date formatting and calculations (formatDate, dateAdd, dateDiff)

Click Insert on any snippet to add it to your template, then customize with your field IDs.

Adding Dynamic Fields to Components

In Forms, Tables, or Details Components

1. Add the dynamic field like any other field
2. Click to edit the field settings
3. Select which template to display
4. Configure display options (label, help text, etc.)

Adding Multiple Times

You can add the same dynamic field to a component multiple times:

1. Add the dynamic field
2. Select Template 1
3. Add the same dynamic field again
4. Select Template 2
5. Repeat as needed

This lets you display multiple calculations from one field without creating separate fields.

Real-Time Calculations in Forms

When you add a dynamic field to a Form Component, it automatically updates as users type:

• User enters a quantity → subtotal updates instantly
• User changes tax rate → total recalculates immediately
• No need to save or submit the form to see results

Performance Tip: Real-time calculations happen on the client side (in the user's browser), making them very fast and responsive.

Available Functions

Text Functions

Function	Description	Example
lowercase	Convert text to lowercase	{{lowercase field_50}}
uppercase	Convert text to uppercase	{{uppercase field_50}}
capitalizeFirst	Capitalize first word	{{capitalizeFirst field_50}}
capitalizeEach	Capitalize each word	{{capitalizeEach field_50}}
truncate	Shorten text with ellipsis	{{truncate field_50 20 "..."}}
reverse	Reverse a string	{{reverse field_50}}

Number Functions

Function	Description	Example
add	Add numbers	{{add field_10 field_20}}
subtract	Subtract numbers	{{subtract field_10 field_20}}
multiply	Multiply numbers	{{multiply field_10 field_20}}
divide	Divide numbers	{{divide field_10 field_20}}
toFixed	Format to decimal places	{{toFixed field_50 2}}
floor	Round down	{{floor field_50}}
ceil	Round up	{{ceil field_50}}
round	Round to nearest	{{round field_50}}

Logic Functions

Function	Description	Example
if	Conditional display	{{if (gt field_10 100) "High" "Low"}}
unless	Inverse conditional	{{unless field_10 "No value"}}
is / isnt	Equality check	{{if (is field_10 "Active") "✓"}}
gt / gte	Greater than (or equal)	{{if (gt field_10 50) "Pass"}}
lt / lte	Less than (or equal)	{{if (lt field_10 10) "Low"}}
and / or	Logical operators	{{if (and (gt field_10 0) (lt field_10 100)) "In Range"}}

Date Functions

Function	Description	Example
formatDate	Format date display	{{formatDate field_50 "MM/DD/YYYY"}}
now	Current date/time	{{formatDate now "YYYY-MM-DD"}}
dateAdd	Add time to date	{{dateAdd field_50 7 "days"}}
dateSub	Subtract time from date	{{dateSub field_50 1 "month"}}
dateDiff	Calculate difference	{{dateDiff field_50 field_60 "days"}}
age	Calculate age	{{age field_50}}
timeago	Relative time	{{timeago field_50}}

Full Function Reference: See the Dynamic Field Functions article for complete documentation with examples.

Practical Examples

Example 1: Invoice Calculator

Scenario: Calculate subtotal, tax, and total in real-time

Fields:

• field_10: Quantity (Number)
• field_11: Unit Price (Currency)
• field_12: Tax Rate (Number, as decimal like 0.08 for 8%)

Dynamic Field Templates:

Template "Subtotal":
${{toFixed (multiply field_10 field_11) 2}}

Template "Tax":
${{toFixed (multiply (multiply field_10 field_11) field_12) 2}}

Template "Total":
${{toFixed (add (multiply field_10 field_11) (multiply (multiply field_10 field_11) field_12)) 2}}

Example 2: Status Badge

Scenario: Display colored status indicators based on a status field

Template:

{{#if (is field_status "Approved")}}
    <span style="background: green; color: white; padding: 5px 10px; border-radius: 3px;">✓ Approved</span>
{{else if (is field_status "Pending")}}
    <span style="background: orange; color: white; padding: 5px 10px; border-radius: 3px;">⏳ Pending</span>
{{else}}
    <span style="background: red; color: white; padding: 5px 10px; border-radius: 3px;">✗ Rejected</span>
{{/if}}

Example 3: Name Formatter

Scenario: Display formatted full names in different styles

Templates:

Template "Formal":
{{capitalizeEach field_last_name}}, {{capitalizeEach field_first_name}} {{uppercase field_middle_initial}}.

Template "Casual":
{{capitalizeFirst field_first_name}} {{capitalizeFirst field_last_name}}

Template "Username":
{{lowercase field_first_name}}.{{lowercase field_last_name}}

Example 4: Date Countdown

Scenario: Show days until an event

Template:

{{dateDiff now field_event_date "days"}} days until the event

Tips and Best Practices

Organizing Templates

• Use clear, descriptive template names
• Group related calculations in one dynamic field
• Create separate dynamic fields for unrelated calculations
• Document complex formulas with comments in your field description

Performance Optimization

• Keep template calculations simple when possible
• Avoid overly nested functions (more than 3-4 levels deep)
• Use dynamic fields primarily for display purposes
• Remember: reads are slightly slower, but writes are much faster

User Experience

• Add help text to explain what the calculated values represent
• Use tooltips for additional context
• Format numbers consistently (currency symbols, decimal places)
• Test real-time calculations with various inputs

Debugging

• Test templates in the Data Builder before adding to forms
• Start simple and add complexity gradually
• Check that field IDs are correct (only field IDs work, not field names)
• Use the Default Template in the Data Builder to preview results
• Verify bracket matching: {{ }} and {{{ }}} must be properly closed

Common Mistakes

• Using field names instead of IDs: Always use field_123, not the field label
• Nested braces: Don't use {{{{multiply field_10 10}}}} - use {{multiply field_10 10}}
• Missing parameters: Some functions require specific parameters (check documentation)
• Wrong brace count: Use {{ }} for functions, {{{ }}} only for HTML rendering

Limitations Summary

Remember These Restrictions

• Dynamic field values are not saved to the database
• Cannot search by dynamic field values
• Cannot sort or filter by dynamic field values
• Cannot use in other equations or formulas
• Cannot use for action rules or conditional logic (use regular equations instead)
• Values are calculated on display, not on save

Troubleshooting

Template Not Showing

• Verify the template is saved
• Check that you selected the correct template in component settings
• Ensure field IDs are correct
• Look for syntax errors in Handlebars code

Calculation Not Updating

• Confirm you're using the field in a Form Component (real-time only works in forms)
• Check that dependent fields are included in the form
• Verify field IDs reference the correct fields
• Test calculation with known values

Wrong Output

• Verify mathematical operations are in correct order
• Check for type mismatches (text vs number)
• Use toFixed for consistent decimal places
• Test with simple values first

Getting Help

• Function Reference: Dynamic Field Functions
• Video Tutorial: Dynamic Field Spotlight Video
• Support: Contact support with specific template examples for troubleshooting

Migration from Regular Fields

If you're considering converting existing equation fields to dynamic fields:

1. Evaluate needs: Do you need to search/filter by these values?
2. Create dynamic field: Build equivalent templates
3. Test thoroughly: Verify calculations match existing fields
4. Update components: Replace old fields with dynamic field
5. Document changes: Note which fields were replaced
6. Keep old fields temporarily: Don't delete until confirmed working

Important: You cannot directly convert existing fields to dynamic fields. You must create new dynamic fields and manually recreate the calculations.

Summary

Dynamic fields are a specialized tool for specific scenarios:

• ✅ Use when you need display-only calculations
• ✅ Use for real-time form feedback
• ✅ Use to reduce form save time
• ✅ Use when approaching database field limits
• ❌ Don't use when you need searchable/filterable values
• ❌ Don't use when values need to persist in database
• ❌ Don't use when other equations depend on the values

When used appropriately, dynamic fields can significantly improve app performance and user experience.