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 (depending 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 can still 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

Your company details

These variables below return the information you’ve to the Company details in the inFlow Global settings (Main Menu>Options.)

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 inFlow’s Global settings. (Main Menu >Options > Custom fields. )

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 ten custom fields available for sales orders, customers, purchase orders, vendors, and products. 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 are custom fields as they appear 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 they appear 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 are custom fields as they appear 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 they appear 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 they appear in the order.

Quantity and pricing details options

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

Date formatting

The dates and timestamps will show in a format following your browser locale. To change the way this looks, use a filter ( | ) along with the variable.

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

Image formatting

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 lowercase letters, 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