Skip to main content

Template Root Object

The root object defines the complete template configuration.

Properties

PropertyTypeRequiredDescription
DocumentTypestringYesDocument type identifier (e.g., ticket_venta, invoice)
NamestringYesDescriptive template name
SectionsarrayYesArray of template sections
GlobalStylesobjectNoGlobal styling configuration (optional)
TemplateIdstringNoUnique template identifier (auto-generated)

Example

{
  "DocumentType": "ticket_venta",
  "Name": "Standard Sales Ticket",
  "Sections": [
    // ... sections array
  ],
  "GlobalStyles": {
    // ... optional global styles
  }
}

Section Object

Sections are logical blocks that group elements and define rendering behavior.

Properties

PropertyTypeRequiredDescription
NamestringYesSection identifier (e.g., “Header”, “Items”, “Footer”)
TypestringYesSection type: "Static", "Table", or "Repeated"
DataSourcestringConditionalPath to data collection (required for Table and Repeated types)
OrderintNoPrint order (lower values print first)
AlignstringNoDefault alignment: "Left", "Center", "Right", or null
FormatstringNoDefault format for all elements in section, or null
ElementsarrayYesArray of template elements

Section Types

Static

Sequential elements printed in order. No data binding at section level.
{
  "Name": "Header",
  "Type": "Static",
  "Order": 1,
  "Align": "Center",
  "Elements": [
    { "Type": "Text", "StaticValue": "MY STORE", "Format": "Bold Size2" },
    { "Type": "Text", "Source": "Store.Address" },
    { "Type": "Line" }
  ]
}

Table

Columnar layout with headers. Iterates over data collection.
{
  "Name": "Items",
  "Type": "Table",
  "Order": 2,
  "DataSource": "Sale.Items",
  "Elements": [
    { 
      "Type": "Text",
      "Label": "Qty", 
      "Source": "Quantity", 
      "WidthPercentage": 20,
      "HeaderLabel": "Cant",
      "HeaderAlign": "Left"
    },
    { 
      "Type": "Text",
      "Label": "Product", 
      "Source": "ProductName", 
      "WidthPercentage": 50 
    },
    { 
      "Type": "Text",
      "Label": "Total", 
      "Source": "Total", 
      "WidthPercentage": 30,
      "Align": "Right",
      "HeaderAlign": "Right"
    }
  ]
}

Repeated

Iterates over simple value collections (e.g., string arrays).
{
  "Name": "Footer Messages",
  "Type": "Repeated",
  "Order": 3,
  "DataSource": "Footer",
  "Align": "Center",
  "Elements": [
    { "Type": "Text", "Source": "." }
  ]
}

Element Object

Elements are individual components within sections.

Common Properties

PropertyTypeRequiredDescription
TypestringYesElement type: "Text", "Line", "Barcode", "QR", "Image"
LabelstringNoStatic text prefix before the value
SourcestringConditionalPath to data property (e.g., "Sale.Total"). Use "." for current item in Repeated sections
StaticValuestringConditionalFixed value when Source is not used
AlignstringNoElement alignment (overrides section alignment)
FormatstringNoText formatting (overrides section format)
OrderintNoElement order within section

Table-Specific Properties

PropertyTypeRequiredDescription
WidthPercentageintYesColumn width as percentage of paper width
HeaderLabelstringNoColumn header text
HeaderAlignstringNoHeader alignment
HeaderFormatstringNoHeader text formatting

Element-Specific Properties

PropertyTypeApplies ToDescription
HeightintBarcode, ImageHeight in points (1-255)
BarWidthintBarcodeModule width (1-5)
SizeintQRQR module size (1-16, recommended: 3-4)
ColumnsintMultiple typesNumber of elements per row
PropertiesobjectAllAdditional custom properties

Format String

The Format property accepts space-separated values that can be combined.

Font Types

  • FontA: Standard font (48 characters per line on 80mm paper)
  • FontB: Condensed font (64 characters per line on 80mm paper)

Text Styles

  • Bold: Bold text
  • Underline: Underlined text

Sizes

  • Large: Double height text
  • DoubleWidth: Double width text
  • Size2, Size3, Size4, Size5, Size6, Size7, Size8: Proportional scaling (1-8x)

Format Examples

"Format": "Bold Large"           // Bold and double height
"Format": "FontB"                 // Condensed font
"Format": "Bold Size2 Center"    // Bold, 2x size, centered
"Format": "Underline FontA"      // Underlined standard font

Alignment Values

  • "Left": Left-aligned text
  • "Center": Center-aligned text
  • "Right": Right-aligned text
  • null: Inherit from parent section or default

Data Source Paths

Data sources use dot notation to navigate object hierarchies:
"Source": "Sale.Total"              // Property of Sale object
"Source": "Store.Address"           // Property of Store object
"Source": "Sale.Customer.Name"      // Nested property
"DataSource": "Sale.Items"          // Collection for Table/Repeated
"Source": "."                       // Current item in Repeated section

Complete Example

{
  "DocumentType": "ticket_venta",
  "Name": "Standard Template",
  "Sections": [
    {
      "Name": "Header",
      "Type": "Static",
      "Order": 1,
      "Align": "Center",
      "Elements": [
        { 
          "Type": "Text", 
          "StaticValue": "APPSIEL CLOUD POS", 
          "Format": "Bold Size2" 
        },
        { 
          "Type": "Text", 
          "Source": "Store.Address" 
        },
        { 
          "Type": "Line" 
        }
      ]
    },
    {
      "Name": "Items",
      "Type": "Table",
      "Order": 2,
      "DataSource": "Sale.Items",
      "Elements": [
        { 
          "Type": "Text",
          "Label": "Cant", 
          "Source": "Quantity", 
          "WidthPercentage": 20,
          "HeaderLabel": "Qty",
          "HeaderFormat": "Bold"
        },
        { 
          "Type": "Text",
          "Label": "Producto", 
          "Source": "ProductName", 
          "WidthPercentage": 50,
          "HeaderLabel": "Product"
        },
        { 
          "Type": "Text",
          "Label": "Total", 
          "Source": "Total", 
          "WidthPercentage": 30, 
          "Align": "Right",
          "HeaderLabel": "Price",
          "HeaderAlign": "Right"
        }
      ]
    },
    {
      "Name": "Totals",
      "Type": "Static",
      "Order": 3,
      "Elements": [
        { 
          "Type": "Line" 
        },
        { 
          "Type": "Text", 
          "Label": "TOTAL: ", 
          "Source": "Sale.Total", 
          "Format": "Bold Large",
          "Align": "Right"
        }
      ]
    },
    {
      "Name": "Footer",
      "Type": "Repeated",
      "Order": 4,
      "DataSource": "Footer",
      "Align": "Center",
      "Elements": [
        { 
          "Type": "Text", 
          "Source": "." 
        }
      ]
    },
    {
      "Name": "QR Code",
      "Type": "Static",
      "Order": 5,
      "Align": "Center",
      "Elements": [
        { 
          "Type": "QR", 
          "Source": "Sale.InvoiceUrl", 
          "Size": 4 
        }
      ]
    }
  ]
}

Best Practices

Organization

  • Use descriptive Name values for sections and maintain consistent naming
  • Set Order values with gaps (10, 20, 30) to allow inserting sections later
  • Group related elements in the same section

Data Binding

  • Always validate that DataSource paths exist in your data model
  • Use StaticValue for labels and fixed text
  • Use Source for dynamic data

Formatting

  • Apply common formats at section level to reduce repetition
  • Override at element level only when needed
  • Test formatting on actual printer hardware as rendering may vary

Column Widths

  • Ensure WidthPercentage values in Table sections sum to 100%
  • Account for printer margins and character limits
  • Test with maximum expected content length

See Also

Section Types

Detailed guide for Static, Table, and Repeated sections

Element Types

Complete reference for all element types

Build docs developers (and LLMs) love