• Contents

Creating Custom Documents

Last updated 20/03/2018

Cin7's Document Template Editor allows you to customize documents - this article provides all the information needed to create the perfect document.

Overview


To enable complete flexibility for customizing documents, we have given you the option to use an inline WYSIWYG editor, or the bare bones of the web - HTML and CSS. Both options provide limitless scope as to the appearance of your documents.

You could start by tweaking one of Cin7's documents, use the boilerplate provided below as a skeleton to build on, or completely start from scratch, it's up to you.

Using the WYSIWYG Editor


The easiest way to customize a document without diving into the code is to use the WYSIWYG (what you see is what you get) editor. This means that you are able to use a familiar interface to change the document you see on screen.

This is particularly useful for making small cosmetic changes to the current document templates - like making text bold or increasing the font size.

To do this:

  1. Whilst logged in as an administrator, click on your username, top right, and click Settings.
  2. From the general tab, click Document templates.
  3. Choose the document you want to convert to custom, and click Design.
    Alternatively, you could create an entirely new document by clicking Create New.
  4. Within the document, click Custom from the tabs to the top right.
  5. Click Convert Template to Custom to enable the editor.
    Please note saving a custom template will disable the standard configuration tools unless you revert back to an older save.
  6. Click OK.
    A number of additional tools will appear at the top of the document which will enable to edit your document.

Once you are happy with your changes, click Save.

Working with Variables


You'll notice that there are a number of fields enclosed in % symbols. These fields are variables that will populate with real data when you print/email the documents.

The list of possible variables are explained below.

To insert new variables, you can simply start typing % and a drop-down will appear with a list of variables.

There are a number of variables available for you to use in the system, and these are documented at the bottom of this article. Line items require some special formatting and these are explained below.

Starting From Scratch - HTML


To get complete control over your documents, you can use HTML and CSS. Although this requires some knowledge, it is easy to learn the basics of HTML and CSS through sites like Codecademy.com. There are also a number of tools like Adobe's Brackets that make it easy to edit code.

The rest of this article assumes some knowledge of HTML and CSS. We will use a boilerplate example below, and it is a great place to start making your own invoice documents.

To make a custom document, you must first convert a current document template to 'Custom'. To do this:

  1. Whilst logged in as an administrator, click on your username, top right, and click Settings.
  2. From the general tab, click Document templates.
  3. Choose the document you want to convert to custom, and click Design.
    Alternatively, you could create an entirely new document by clicking Create New.
  4. Within the document, click Custom from the tabs to the top right.
  5. Click Convert Template to Custom to enable the editor.
    Please note saving a custom template will disable the standard configuration tools unless you revert back to an older save.
  6. Click OK.
    A number of additional tools will appear at the top of the document which will enable to edit your document.
  7. Click the 'Code' button to edit the HTML.

The below HTML should give you a basic idea of the structure of a document.

Starting From Scratch - Looping through Line Items, Payments and Backorders


There are some parts of your document where you are not just representing single variables, but looping through numerous rows of data.

The most obvious example of this is line items. Each line item should form a row in a table. By enclosing your table rows in some magic fields, Cin7 will loop through each line item and fill your table with data for you.

Line Items

Enclose your table rows in comments like the below:

<!--Loop Starts: Items-->
- Table rows here -
<!--Loop Ends: Items-->
Back Order Items

For backorders, use the line items rows as above - Cin7 will represent back ordered items provided the rows have been enclosed in comments like the below.

<!--Loop Starts: BackOrders-->
- Table rows here -
<!--Loop Ends: BackOrders-->
Payments

Payments should be enclosed in comments like the below, and use the payments variables detailed at the bottom of this page.

<!--Loop Starts: Payments-->
- Table rows here -
<!--Loop Ends: Payments-->

Starting From Scratch - CSS


Finally, to make your documents look professional, you should apply CSS to the document.

Copy and paste the below styles into the Custom CSS Style box to see the effect of stylesheets on the example document page.

As you can see, with very few styles the document comes alive!

Avoiding Conflict!

When styling elements, beware of using ids or classes that already have CSS definitions on the print page that could cause conflicts. #document, .lineitem are used in Cin7's document templates, so are worth avoiding.

Variables


The following is a list of variables available to use in your documents.

Tag Typeahead Category
%%ATT:BillingAddressDetails%% BillingAddress Order Info
%%ATT:BillingCompany%% BillingCompany Order Info
%%ATT:BillingRecipient%% BillingRecipient Order Info
%%ATT:CreatedBy%% CreatedBy Order Info
%%ATT:CurrencyName%% CurrencyName Order Info
%%ATT:CustomerRef%% CustomerRef Order Info
%%ATT:AcceptanceDate%% DateAccepted Order Info
%%ATT:CloseDate%% DateClosed Order Info
%%ATT:CompletedDate%% DateCompleted Order Info
%%ATT:DueDate%% DateDue Order Info
%%ATT:ExpiryDate%% DateExpiry Order Info
%%ATT:InvoiceDate%% DateInvoiced Order Info
%%ATT:Date%% DateToday Order Info
%%ATT:DeliveryAddressDetails%% DeliveryAddress Order Info
%%ATT:DeliveryCompany%% DeliveryCompany Order Info
%%ATT:DeliveryInstructions%% DeliveryInstructions Order Info
%%ATT:DeliveryRecipient%% DeliveryRecipient Order Info
%%ATT:Discount%% Discount Order Info
%%ATT:DiscountDescription%% DiscountDescription Order Info
%%ATT:DocumentHeading%% DocumentHeading Order Info
%%ATT:Email%% Email Order Info
%%ATT:Fax%% Fax Order Info
%%ATT:DeliveryCost%% FreightCharge Order Info
%%ATT:FreightDescription%% FreightDescription Order Info
%%ATT:GrandTotal%% GrandTotal Order Info
%%ATT:InvoiceNo%% InvoiceNo Order Info
%%Loop:ActualQty%% LineItem:ActualQuantity Line Item
%%Loop:Barcode%% LineItem:Barcode Line Item
%%Loop:Code%% LineItem:Code Line Item
%%Loop:DiscountPercent%% LineItem:DiscountPercent Line Item
%%Loop:SerialNumberLocationTable%% LineItem:DynamicLocations Line Item
%%Loop:ExchangeQty%% LineItem:ExchangeQuantity Line Item
%%Loop:ItemDiscount%% LineItem:LineDiscount Line Item
%%Loop:LineNote%% LineItem:LineNote Line Item
%%Loop:OptionsWithoutSizes%% LineItem:OptionswithoutSizes Line Item
%%Loop:Name%% LineItem:ProductName Line Item
%%Loop:Options%% LineItem:ProductOptions Line Item
%%Loop:Qty%% LineItem:Quantity Line Item
%%Loop:SerialNumbers%% LineItem:SerialNumber Line Item
%%Loop:SerialNumberQtys%% LineItem:SerialNumberQty Line Item
%%Loop:SpecialDescription%% LineItem:SpecialPricing Line Item
%%Loop:FixedLocations%% LineItem:StaticLocations Line Item
%%Loop:SupplierCode%% LineItem:SupplierCode Line Item
%%Loop:LineItemTaxRate%% LineItem:TaxRate Line Item
%%Loop:LineItemTaxTotal%% LineItem:TaxTotal Line Item
%%Loop:Total%% LineItem:Total Line Item
%%Loop:UnitDiscount%% LineItem:UnitDiscount Line Item
%%Loop:UnitPrice%% LineItem:UnitPrice Line Item
%%Loop:UnitPriceText%% LineItem:UnitPriceText Line Item
%%Loop:Variations%% LineItem:Variations Line Item
%%ATT:Mobile%% Mobile Order Info
%%ATT:Outstanding%% Outstanding Order Info
%%Loop:Amount%% Payment:Amount Payments
%%Loop:Comment%% Payment:Comment Payments
%%Loop:Date%% Payment:Date Payments
%%Loop:Date%% Payment:Date Payments
%%Loop:Method%% Payment:Method Payments
%%Loop:Ref%% Payment:Reference Payments
%%ATT:PaymentDueDate%% PaymentDueDate Order Info
%%ATT:PaymentTerms%% PaymentTerms Order Info
%%ATT:PaymentTermsWithHeader%% PaymentTermswithHeader Order Info
%%ATT:Phone%% Phone Order Info
%%ATT:ProductCost%% ProductTotal Order Info
%%ATT:ProjectName%% ProjectName Order Info
%%ATT:Spacer%% Spacer Order Info
%%ATT:SubTotal%% SubTotal Order Info
%%ATT:Surcharge%% Surcharge Order Info
%%ATT:SurchargeDescription%% SurchargeDescription Order Info
%%ATT:TaxName%% TaxName Order Info
%%ATT:TaxRate%% TaxRate Order Info
%%ATT:TaxAmount%% TaxTotal Order Info
%%ATT:TotalPaid%% TotalPaid Order Info
%%ATT:TotalQty%% TotalQuantity Order Info
%%ATT:TrackingCode%% TrackingCode Order Info
%%ATT:TransactionRef%% TransactionReference Order Info