Snippets

Overview

For a full list of properties accessible via DotLiquid, please visit: https://serviceminder.io/support/dotliquid

Appointment Example

Print

{% comment %}Create table of full width, centered relative to the page.{% endcomment %}
<Table width="575" align="center">
  {% comment %}Define relative column widths.{% endcomment %}
  <Columns>
    <Column width="2" />
    <Column width="3" />
    <Column width="2" />
    <Column width="1" />
    <Column width="1" />
    <Column width="2" />
  </Columns>
  <Cells>
    {% comment %}Column Headers - make sure you have a reverse font defined!{% endcomment %}
    <Cell align="center" background-color="0,0,0" font-name="reverse">Option</Cell>
    <Cell align="center" background-color="0,0,0" font-name="reverse">Item</Cell>
    <Cell align="center" background-color="0,0,0" font-name="reverse">Description</Cell>
    <Cell align="center" background-color="0,0,0" font-name="reverse">Qty</Cell>
    <Cell align="center" background-color="0,0,0" font-name="reverse">Unit Price</Cell>
    <Cell align="center" background-color="0,0,0" font-name="reverse">Extended</Cell>
    {% comment %}Service Line{% endcomment %}
    <Cell></Cell>
    <Cell>{{model.service.name | xml_encode}}</Cell>
    <Cell>{{model.description | xml_encode}}</Cell>
    <Cell>{{model.quantity}}</Cell>
    <Cell>{{model.unit_price_formatted}}</Cell>
    <Cell>{{model.extended_total_service_formatted}}</Cell>
    {% comment %}Part Lines Loop{% endcomment %}
    {% for line in model.proposal.proposal_lines %}
    <Cell>{{line.proposal_option.name | xml_encode}}</Cell>
    <Cell>{{line.part.name | xml_encode}}</Cell>
    <Cell>{{line.description | xml_encode}}</Cell>
    <Cell>{{line.quantity}}</Cell>
    <Cell>{{line.unit_price_formatted}}</Cell>
    <Cell>{{line.extended_total_formatted}}</Cell>
    {% endfor %}
  </Cells>
</Table>

Email

{% comment %}Create table of full width, centered relative to the page.{% endcomment %}
<table>
  {% comment %}Define relative column widths.{% endcomment %}
  <thead>
    <tr>
      <th>Option</th>
      <th>Item</th>
      <th>Description</th>
      <th>Qty</th>
      <th>Unit Price</th>
      <th>Extended</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      {% comment %}Service Line{% endcomment %}
      <Cell></td>
      <Cell>{{model.service.name | html_encode}}</td>
      <Cell>{{model.description | html_encode}}</td>
      <Cell>{{model.quantity}}</td>
      <Cell>{{model.unit_price_formatted}}</td>
      <Cell>{{model.extended_total_service_formatted}}</td>
    </tr>
    
    {% comment %}Part Lines Loop{% endcomment %}
    {% for line in model.proposal.proposal_lines %}
      <tr>
        <td>{{line.proposal_option.name | html_encode}}</td>
        <td>{{line.part.name | html_encode}}</td>
        <td>{{line.description | html_encode}}</td>
        <td>{{line.quantity}}</td>
        <td>{{line.unit_price_formatted}}</td>
        <td>{{line.extended_total_formatted}}</td>
      <tr>
    {% endfor %}
  </tbody>
</table>

Proposal Example

These snippets should provide you with a simple display of your proposal body.

Print

{% comment %}Create table of full width, centered relative to the page.{% endcomment %}
<Table width="575" align="center">
  {% comment %}Define relative column widths.{% endcomment %}
  <Columns>
    <Column width="2" />
    <Column width="3" />
    <Column width="2" />
    <Column width="1" />
    <Column width="1" />
    <Column width="2" />
  </Columns>
  <Cells>
    {% comment %}Column Headers - make sure you have a reverse font defined!{% endcomment %}
    <Cell align="center" background-color="0,0,0" font-name="reverse">Option</Cell>
    <Cell align="center" background-color="0,0,0" font-name="reverse">Item</Cell>
    <Cell align="center" background-color="0,0,0" font-name="reverse">Description</Cell>
    <Cell align="center" background-color="0,0,0" font-name="reverse">Qty</Cell>
    <Cell align="center" background-color="0,0,0" font-name="reverse">Unit Price</Cell>
    <Cell align="center" background-color="0,0,0" font-name="reverse">Extended</Cell>
    {% comment %}Service Line{% endcomment %}
    <Cell></Cell>
    <Cell>{{model.service.name | xml_encode}}</Cell>
    <Cell>{{model.description | xml_encode}}</Cell>
    <Cell>{{model.quantity}}</Cell>
    <Cell>{{model.unit_price_formatted}}</Cell>
    <Cell>{{model.extended_total_service_formatted}}</Cell>
    {% comment %}Part Lines Loop{% endcomment %}
    {% for line in model.proposal_lines %}
    {% comment %}Omit unselected option lines.{% endcomment %}
    {% if line.proposal_option == null or line.proposal_option.selected != false %}
    <Cell>{{line.proposal_option.name | xml_encode}}</Cell>
    <Cell>{{line.part.name | xml_encode}}</Cell>
    <Cell>{{line.description | xml_encode}}</Cell>
    <Cell>{{line.quantity}}</Cell>
    <Cell>{{line.unit_price_formatted}}</Cell>
    <Cell>{{line.extended_total_formatted}}</Cell>
    {% endif %}
    {% endfor %}
  </Cells>
</Table>

Preview

Email

  <!-- Style tags add border to table -->
  <style>
      #proposal-table,
      #proposal-table th,
      #proposal-table td {
        border: solid 1px black;
        border-collapse: collapse;
      }
  </style>
  
  <!-- Create table of full width, centered relative to the page. -->
  <table id="proposal-table" style="margin: 0 auto; width: 100%; table-layout: fixed;">
      <thead>
      <!-- Column Headers -->
        <tr>
            <th style="background-color: #cfad80; text-align: center; font-weight: bold;">Option</th>
            <th style="background-color: #cfad80; text-align: center; font-weight: bold;">Item</th>
            <th style="background-color: #cfad80; text-align: center; font-weight: bold;">Description</th>
            <th style="background-color: #cfad80; text-align: center; font-weight: bold;">Quantity</th>
            <th style="background-color: #cfad80; text-align: center; font-weight: bold;">Unit Price</th>
            <th style="background-color: #cfad80; text-align: center; font-weight: bold;">Extended</th>
        </tr>
      </thead>
      <tbody>
      <!-- Service Line -->
        <tr>
            <td></td>
            <td>{{model.service.name | xml_encode}}</td>
            <td>{{model.description | xml_encode}}</td>
            <td style="text-align: right;">{{model.quantity}}</td>
            <td style="text-align: right;">{{model.unit_price_formatted}}</td>
            <td style="text-align: right;">{{model.extended_total_service_formatted}}</td>
        </tr>
      <!-- Part Lines Loop -->
        <!-- {% for line in model.proposal_lines %} -->
      <!-- Omit unselected option lines -->
      <!-- {% if line.proposal_option == null or line.proposal_option.selected != false %} -->
        <tr>
            <td>{{line.proposal_option.name | xml_encode}}</td>
            <td>{{line.part.name | xml_encode}}</td>
            <td>{{line.description | xml_encode}}</td>
            <td style="text-align: right;">{{line.quantity}}</td>
            <td style="text-align: right;">{{line.unit_price_formatted}}</td>
            <td style="text-align: right;">{{line.extended_total_formatted}}</td>
        </tr>
        <!-- {% endfor %} -->
      </tbody>
  </table>

Preview