Dynamic Data & Conditionals

This is the most powerful part of the editor, allowing your layout to react to data in real-time (e.g., donation alerts, scoreboards, goals). Access these options by clicking the Gear icon on the layer or “Advanced Settings” in the context menu.

Data Binding

You can make any text dynamic by inserting variables between double curly braces \{\{ \}\}.

1. Edit the element text.
2. Type \{\{variable_name\}\} or use the context menu to select from the list.
3. Example: “Thank you {{user}} for donating {{value}}!”
   • Result: “Thank you John for donating $ 50.00!”

Data Formatting

In the Formatting tab of the advanced settings, define how raw data should be displayed.

• Text (Default): Displays exactly as received.
• Number/Currency:
  • Decimal: 1000 -> 1,000.00
  • Currency: 50 -> $ 50.00 (Configurable).
  • Percentage: 0.5 -> 50%.
• Date: Transforms raw dates (ISO) into readable formats (e.g., DD/MM/YYYY, HH:mm).
• Boolean (Logical): Customize text for True (e.g., “Active”) and False (e.g., “Offline”).

Conditional Rules

In the Conditional tab, create logic to change the design based on data. “If X happens, do Y”.

1. Click Add Rule.
2. If (Property): Choose the variable (e.g., donation_amount).
3. Operator: Choose the comparison (Equal, Greater than, Contains, etc.).
4. Value: The reference value (e.g., 100).
5. Action:
   • Hide Element: The element disappears.
   • Apply Style: Changes colors, background, bold, etc.

Examples:

• If value > 50, paint background Gold.
• If goal_reached == true, show Check icon.

Direct Style Links

Link CSS properties directly to data variables. Useful when the color comes from the database.

• Where: “Conditional” Tab -> “Style Links” Section.
• Example: Background Color -> \{\{team_color\}\}