Do you need more control over the document you’re designing? Use the Custom HTML block to add a section you can customize using HTML/CSS code.

Before starting

What’s allowed in the HTML/CSS block

This block uses both HTML/CSS and Liquid templating language. The HTML/CSS portion allows you to style the block, whereas Liquid is a simple plain text language for referencing your inFlow data. 

The HTML/CSS code block you provide will be rendered in a separate sandbox context, and therefore, you won’t have control over certain aspects.

The entire code block you provide will be appended inside a body tag of a separate HTML document we’ve defined. As a result, certain tags should not appear in your block. They are html , head , body , and any descendent tags of head such as title , style , link , meta , etc.

This implies several things. For example, you can’t control the document title simply by using title . Using the style tag or loading external style sheets using a link may not always work (depends on the browser). So, we recommend styling your document using inline CSS.

For example:

<h1 style="color:blue;text-align:center;">This is a heading</h1> 
<p style="color:red;">This is a paragraph.</p>

Inline CSS should be enough most of the time for styling certain parts of a document. If you require more complex styling or need the CSS to be more reusable and flexible, you can define internal CSS using the style tag; however, note that this will produce invalid HTML as it’s appended inside a body tag later.

Most browsers are quite forgiving about parsing invalid documents, so your CSS will still be evaluated by those browsers. Still, ensuring that your document’s styling is consistent across major browsers is important, so we encourage you to use inline CSS instead.

For security reasons, the following are not allowed in the HTML/CSS block:

• JavaScript
• URLs opening a different web page in the current tab or a new tab
  • You still can add images using the img tag if it’s pointing to images from other domains. However, any URLs must be in either http or https scheme.
• form and iframe tags

Liquid variables in inFlow

Variables are data that are dynamically inserted into the inFlow document. You can think of the variable as a placeholder that gets filled in on a per-order basis.

Company info

Here’s a list of variables you can use to design your document. 

Your company information

These variables return all the information you’ve entered into your inFlow settings under Account > Company details.

Order variables

Sales order information

Use these variables to insert the sales order number and date information.  

Purchase order information

Use these variables to insert the purchase order number and date information.  

Customer details and addresses

These variables return the customer details as listed on the sales order. Note that this can be different from what’s stored in the customer record. 

Vendor details and addresses

These variables return the vendor details as listed on the purchase order. Note that this can be different from what’s stored in the vendor record. 

Overall totals

Use these for the overall totals, which include any returned/refunded amounts. The following listed are for sales orders. However, you can get the equivalent for a purchase order just by replacing so with po (e.g. {{po.subtotal}} is the purchase order’s subtotal amount).

Order totals

These variables return the order totals, excluding any refunds. The following listed are for sales orders. However, you can get the equivalent for a purchase order just by replacing so with po (e.g. {{po.order_sub_total}} is the purchase order’s subtotal amount excluding any refunds).

Return totals

These variables concern the return/refund amounts only. The following listed are for sales orders. However, you can get the equivalent for a purchase order just by replacing so with po (e.g. {{po.return_sub_total}} is the purchase order’s return subtotal amount).

Additional order details

These are additional details in the sales order. 

These are additional order details for the purchase order.

Product variables

Since a document could contain more than one product, to display this properly, you’d need to use a loop. It essentially runs that bit of code for every product in the document.  If you want the product information to be listed in a table format, you’ll need to incorporate the loop into an HTML table.

{% for line in so.lines %}
  {{ line.name }}
{% endfor %}

The so.lines object specified in the beginning of the loop may differ depending on which information you want to show. In this case, it refers to any variables in the main Sales Order tab of a sales order. For information in the Pick tab (e.g. location, sublocation), you’ll need to specify a different object. The available objects and their variables are listed in the following sections.

Product information

This is a list of product variables that remain the same throughout the different objects. Typically these are the identifiers such as name, SKU, etc.

Order lines

This is the list of available product variables specific to the main Sales Order tab of a sales order. Your loop should use the so.lines object for a sales order, or po.lines for a purchase order.

Example table for sales order lines:

<table style="width:50%">
  <tr>
    <th style="text-align: left">SKU</th>
    <th style="text-align: left">Qty</th>
    <th style="text-align: right">Subtotal</th>
  </tr>
  <tr> {% for line in so.lines %}
    <td>{{line.SKU}}</td><td>{{ line.quantity }}</td><td style="text-align:right"> {{line.subtotal}}</tr>
{% endfor %}
</table>

Sales Order Pick lines / Purchase Order Receive lines

This is the list of available product variables specific to the Pick or Fulfill tab of a sales order, or the Receive tab of a purchase order. For this, your loop should use the so.pick_lines object for a sales order, or po.receive_lines for a purchase order.

Sales Order Pack lines

This is the list of available product variables specific to the ship tab of a sales order. For this, your loop should use the so.pack_lines object instead.

Sales Order Ship lines

This is the list of available product variables specific to the shipping details in a sales order. For this, your loop should use the so.ship_lines object instead.

Sales Order / Purchase Order Return lines

This is the list of available product variables specific to the Return tab in a sales order or purchase order. For this, your loop should use the so.return_lines object for a sales order, or po.return_lines object for a purchase order.

Sales Order Restock / Purchase Order Unstock lines

This is the list of available product variables specific to the Restock tab in a sales order, or the Unstock tab in a purchase order. For this, your loop should use the so.restock_lines object for a sales order, or po.unstock_lines object for a purchase order.

Other variables

Payment lines

This is the list of available variables specific to the payment details of a sales order or purchase order. Your loop should use the so.payment_lines object for a sales order, or po.payment_lines for a purchase order.

Serials

For products that have serial numbers, you’ll need to use a loop again with the line.serials object.

{% for line in line.serials %}
  {{ serial }}
{% endfor %}

Example:

Custom fields variables

These are the variables corresponding to the information you’ve set up under Global > Customization > Custom fields. Note that there are two types of variables: one for the name of the field (e.g. Alternate Contact), and the other for its value in the sales order (e.g. Jane, John, etc.). 

There are 10 custom fields available for sales order, customer, purchase order, vendor and product. The formatting is similar for each.

{{so.custom_name1}}, {{so.custom_name2}}, … {{so.custom_name10}}
The names of the sales order custom field as set up in your settings.

{{so.custom1}}, {{so.custom2}}, … {{so.custom10}}
The values of the sales order custom fields as it appears in the sales order.

{{so.customer.custom_name1}}, {{so.customer.custom_name2}}, … {{so.customer.custom_name10}}
The names of the customer custom fields as set up in your settings.

{{so.customer.custom1}}, {{so.customer.custom2}}, … {{so.customer.custom10}}
The values of the customer custom fields as it appears in the sales order.

{{po.custom_name1}}, {{po.custom_name2}}, … {{po.custom_name10}}
The names of the purchase order custom field as set up in your settings.

{{po.custom1}}, {{po.custom2}}, … {{po.custom10}}
The values of the purchase order custom fields as it appears in the purchase order.

{{po.vendor.custom_name1}}, {{po.vendor.custom_name2}}, … {{po.vendor.custom_name10}}
The names of the vendor custom fields as set up in your settings.

{{po.vendor.custom1}}, {{po.vendor.custom2}}, … {{po.vendor.custom10}}
The values of the vendor custom fields as it appears in the purchase order.

{{line.custom_name1}}, {{line.custom_name2}}, … {{line.custom_name10}}
The names of the product custom fields as set up in your settings.

{{line.custom1}}, {{line.custom2}}, … {{line.custom10}}
The values of the product custom fields as it appears in the order.

Additional options for quantity and pricing details

There are some additional options to customize the way your quantities and prices are displayed.

 {{line.quantity_details.standard_quantity}}
The quantity in the standard unit of measure. For example,  if you sold the product in packs of 5 units, this would return 5 instead of 1, 10 instead of 2, etc.  

{{line.quantity_details.uom_quantity}} 
The quantity in the sales or purchase unit of measure. Whether the sales or the purchase unit of measure shows up depends on whether it’s a sales or purchase document.

{{line.quantity_details.uom}}
The product sales or purchase unit of measure (without any quantities).

{{line.discount_details.pretty}}
The line item discount, formatted in % or $ depending on the order: e.g. 10% or $10

{{line.unit_price_details.pretty_with_iso_code}}
The product unit price with ISO code instead of currency symbol: e.g. USD 89.99 instead of $89.99

{{line.unit_price_with_discount_details.pretty_with_iso_code}}
The discounted product unit price, with ISO code instead of the currency symbol.

{{line.subtotal_details.pretty_with_iso_code}}
The product subtotal with ISO code instead of the currency symbol.

Format tips

Dates will show in a format following your browser locale, along with the timestamp. If you want to change the way this looks, use a filter ( | ) along with the variable.

{{so.order_date | date: "MMM dd, yyyy" }}

To adjust the image size and other formatting, you’ll need to apply some CSS.

Example:

<img src={{line.image_url}} style="width:48px; height:48px; vertical-align: middle; margin-right:16px" />

Barcodes

Dynamic Code 39 barcodes for scanning text and Liquid variables can be generated and displayed through the HTML/CSS block.

Our scanning hardware currently only supports barcodes composed of the 43 characters listed here. Any characters from the extended set, including any lower case letter, will not be scanned correctly.

Example snippet to display the SO order number as a Code 39 barcode:

<link href='https://fonts.googleapis.com/css?family=Libre Barcode 39' rel='stylesheet'>
<style>
bc {
    font-size: xx-large;
    font-family: "Libre Barcode 39";
}
</style>

<bc>*{{so.order_number}}*</bc>

Dynamic Code 128 barcodes are not supported in the HTML/CSS block because of the extra encoding logic needed to convert text to a scannable Code 128 barcode.

HTML, CSS, and liquid resources

There are many guides on these languages. Here’s some to get you started:

• HTML
• HTML/CSS inline
• Liquid