Skip to content

Step 8: Add the full lab panel

One number is rarely enough. A table gives you the whole panel, and finishes the label.

  1. Add a Table element.
  2. Set X Start to 10%, X End to 90%.
  3. Set Y Start to 75%, Y End to 97%.
  4. Set Font size to 7 and Resize Strategy to Shrink Text.
  5. Set Value template to:
<table><tbody>
{% for key in ['totalTHC', 'totalCBD', 'CBG', 'totalTerpenes'] %}
{% set entry = package.metadata.indexedLabResults[key] %}
<tr><td><b>{{ entry.name }}</b></td><td>{{ entry.value }} {{ entry.unit }}</td></tr>
{% endfor %}
</tbody></table>

One element left.

A table element takes HTML. T3 reads the first <table> it finds and lays the cells out for you, so you build rows with a loop rather than by hand.

Listing the keys rather than looping over everything is deliberate: it puts THC first and keeps a result you did not expect from appearing on a printed label.

Tables draw no lines of their own. The grid you saw while Draw borders was on came from the border overlay, not the table.

The finished label

Printed PDF • Layout JSON

Behind the scenes 
{
  "name": "Tutorial label",
  "labelContentLayoutElements": [
    {
      "name": "Tag barcode",
      "elementType": "CODE128_BARCODE",
      "xStartFraction": 0.05,
      "xEndFraction": 0.95,
      "yStartFraction": 0.46,
      "yEndFraction": 0.66,
      "valueTemplate": "{{ package.label }}"
    },
    {
      "name": "Tag number",
      "elementType": "TEXT",
      "xStartFraction": 0.05,
      "xEndFraction": 0.95,
      "yStartFraction": 0.38,
      "yEndFraction": 0.45,
      "valueTemplate": "{{ package.label | boldEndingDigits }}",
      "paragraphFontName": "Helvetica",
      "paragraphFontSize": 7,
      "paragraphSpacing": 8,
      "horizontalParagraphAlignment": "CENTER",
      "paragraphTextResizeStrategy": "SHRINK_TEXT"
    },
    {
      "name": "Logo",
      "elementType": "IMAGE",
      "xStartFraction": 0.25,
      "xEndFraction": 0.75,
      "yStartFraction": 0.84,
      "yEndFraction": 0.98,
      "valueTemplate": "{{ images['logo.png'] }}"
    },
    {
      "name": "Product name",
      "elementType": "TEXT",
      "xStartFraction": 0.05,
      "xEndFraction": 0.95,
      "yStartFraction": 0.69,
      "yEndFraction": 0.81,
      "valueTemplate": "{{ package.item.name }}",
      "paragraphFontName": "Helvetica-Bold",
      "paragraphFontSize": 11,
      "paragraphSpacing": 12,
      "horizontalParagraphAlignment": "CENTER",
      "paragraphTextResizeStrategy": "SHRINK_TEXT"
    },
    {
      "name": "Potency",
      "elementType": "TEXT",
      "xStartFraction": 0.05,
      "xEndFraction": 0.95,
      "yStartFraction": 0.27,
      "yEndFraction": 0.35,
      "valueTemplate": "{{ package.metadata.indexedLabResults.totalTHC.full }}",
      "paragraphFontName": "Helvetica-Bold",
      "paragraphFontSize": 10,
      "paragraphSpacing": 11,
      "horizontalParagraphAlignment": "CENTER",
      "paragraphTextResizeStrategy": "SHRINK_TEXT"
    },
    {
      "name": "Lab results",
      "elementType": "TABLE",
      "xStartFraction": 0.1,
      "xEndFraction": 0.9,
      "yStartFraction": 0.14,
      "yEndFraction": 0.27,
      "valueTemplate": "<table><tbody>{% for key in ['totalTHC', 'totalCBD', 'CBG', 'totalTerpenes'] %}{% set entry = package.metadata.indexedLabResults[key] %}<tr><td><b>{{ entry.name }}</b></td><td>{{ entry.value }} {{ entry.unit }}</td></tr>{% endfor %}</tbody></table>",
      "paragraphFontName": "Helvetica",
      "paragraphFontSize": 7,
      "paragraphSpacing": 8,
      "paragraphTextResizeStrategy": "SHRINK_TEXT"
    }
  ]
}

Next Steps