Attachment Designer

Design PDF documents and Excel spreadsheets from templates using the Attachment Designer.

Overview

Create professional PDFs and data-rich Excel files with the same drag-and-drop interface. Perfect for invoices, reports, certificates, and data exports.

Template Types

PDF Templates

• Use for: Invoices, reports, certificates, contracts
• Components: Text, images, tables, charts, dividers
• Output: Professional PDF documents

Excel Templates

• Use for: Data exports, spreadsheets, reports
• Components: Tables, charts, formulas
• Output: Excel .xlsx files with multiple sheets

PDF Designer

Available Components

• Text blocks
• Images and logos (select from Asset Gallery)
• Data tables
• Charts (bar, line, pie, area)
• Dividers and spacers
• Headers and footers
• Page numbers

Page Settings

• Size: A4, Letter, Legal, Custom
• Orientation: Portrait or Landscape
• Margins: Top, bottom, left, right
• Header/Footer: Add to all pages

Excel Designer

Sheet Management

• Create multiple sheets
• Name sheets
• Link between sheets

Components

• Tables: Structured data tables with calculated columns
• Charts: Visual data representation

Calculated Columns

Use JavaScript expressions for calculated values in tables:

row.quantity * row.unitPrice
row.rowNum + 1
row.price > 100 ? 'Premium' : 'Standard'

Charts

Available Chart Types

1. Bar Chart: Compare values
2. Line Chart: Show trends
3. Pie Chart: Show proportions
4. Area Chart: Cumulative trends

Chart Configuration

• Data source: Link to table or variable
• Colors: Customize chart colors
• Labels: Axis labels and title
• Legend: Show/hide, position

Adding Images to PDFs

From Asset Gallery

1. Drag Image component onto PDF canvas
2. Click the image component
3. In properties panel, click Select from Gallery
4. Browse and select an image from your Asset Gallery
5. Click Select to insert
6. Adjust size and position as needed

Benefits:

• Company logos appear consistently
• Brand assets are centrally managed
• Same asset used across email and PDF templates
• Update once to update everywhere

Upload New Assets

Before designing, upload assets to the gallery:

1. Navigate to Asset Gallery
2. Click Upload
3. Select logos, signatures, or images needed for PDFs
4. Organize in folders (e.g., “PDF Assets”, “Signatures”)

Variables in Attachments

Use the same variable system as email templates:

Invoice #{{invoice.number}}
Customer: {{customer.name}}
Total: {{invoice.total}}

Variables use double curly braces {{variableName}} syntax and automatically appear in the Variables tab.

Designer Interface

The attachment designer has the same three-panel interface as the email designer:

1. Left Panel: Component Library - Drag components from here
2. Center Panel: Canvas - Design your PDF/Excel template
3. Right Panel: Three tabs for editing
   • Properties Tab: Edit selected component settings
   • Layers Tab: View and manage component hierarchy
   • Variables Tab: See all variables used in the template

Layers Tab (Component Tree)

The Layers tab shows a hierarchical tree view of all components in your attachment template.

Features

Hierarchical View

• All components organized in a tree structure
• Nested components show parent-child relationships
• Special handling for layout components (containers, tables, columns)

Selection Sync

• Click a component in the tree → highlights it on the canvas
• Click a component on the canvas → highlights it in the tree
• Auto-expand and auto-scroll to selected component

Drag & Drop in Tree

• Reorder: Drag components up or down
• Move to container: Drag into different containers
• From library: Drag components directly from library into tree

Right-Click Context Menu

Quick actions available via right-click:

• Duplicate (Ctrl+D) - Copy component
• Delete (Del) - Remove component
• Cut (Ctrl+X) - Cut to clipboard
• Copy (Ctrl+C) - Copy to clipboard
• Paste (Ctrl+V) - Paste from clipboard
• Move Up (Ctrl+Shift+↑) - Move up in list
• Move Down (Ctrl+Shift+↓) - Move down in list
• Wrap in Container (Ctrl+G) - Wrap in container
• Unwrap (Ctrl+Shift+G) - Remove parent container

Expand/Collapse

• Click arrow to expand/collapse individual components
• Expand All / Collapse All buttons
• Keyboard shortcuts: Ctrl+] to expand, Ctrl+[ to collapse

Use Cases

Complex PDFs: Navigate multi-page documents with many components

Excel Sheets: Manage multiple sheets and their components

Reordering: Quickly reorganize without canvas drag-drop

Variables Tab

The Variables tab automatically tracks all variables used in your attachment template.

Automatic Detection

Variables are automatically extracted from:

• Component content
• Table cells
• Chart data sources
• Conditional logic
• Loop data

Variable Information

Each variable displays:

• Name: Variable identifier
• Type: Auto-detected (String, Number, Boolean, Date, Array, Object)
• Usage Count: Number of times used
• Usage Locations: All places where variable appears

Type Detection

Smart typing based on naming patterns:

• Number: “count”, “total”, “amount”, “price”, “quantity”
• Boolean: “is”, “has”, “enabled”, “active”
• Date: “date”, “time”, “timestamp”
• Array: “items”, “list”, “products”
• Object: “user”, “customer”, “address”

Complex Variables

For arrays and objects, the tab shows:

• Array: Item type and schema
• Object: All properties with types

Grouping

• Variables organized by type
• Collapsible groups with counts
• Filter by type

Navigation

Click any usage location to:

1. Navigate to the component
2. Highlight it in tree and canvas
3. Open properties panel

Keyboard Shortcuts

The attachment designer includes the same keyboard shortcuts as the email designer:

Editing

• Ctrl/Cmd + C - Copy component
• Ctrl/Cmd + X - Cut component
• Ctrl/Cmd + V - Paste component
• Ctrl/Cmd + D - Duplicate component
• Delete or Backspace - Delete component
• Ctrl/Cmd + Z - Undo
• Ctrl/Cmd + Shift + Z or Ctrl/Cmd + Y - Redo

Movement

• Ctrl/Cmd + Shift + ↑ - Move component up
• Ctrl/Cmd + Shift + ↓ - Move component down

Grouping

• Ctrl/Cmd + G - Wrap in container
• Ctrl/Cmd + Shift + G - Unwrap container

View

• Ctrl/Cmd + [ - Collapse all tree nodes
• Ctrl/Cmd + ] - Expand all tree nodes

General

• Ctrl/Cmd + S - Save template
• Shift + ? - Show shortcuts help

Best Practices

PDF Design

• Use consistent fonts and colors
• Include company branding
• Add page numbers for multi-page documents
• Test print output

Excel Design

• Use clear column headers
• Format numbers appropriately
• Add charts for data visualization
• Test formulas with sample data

Generating Attachments

Via API

const response = await fetch('/api/attachments/generate', {
  method: 'POST',
  body: JSON.stringify({
    templateId: 'tmpl_123',
    format: 'pdf', // or 'excel'
    data: { /* your data */ }
  })
});

From Dashboard

1. Go to Attachment Logs
2. Click Generate button
3. Select template
4. Provide data
5. Download result

Related: Email Designer | Templates