General Setup

Creating Custom Documents

How to use the Document Template Editor to customize your documents.

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. While logged in as an Administrator, select your username in the top right and then select Settings.
2. From the Setup menu, select Document templates.
3. Choose the document you want to convert to custom, and select Design.
   Alternatively, you could create an entirely new document by selecting  Create New.
4. Within the document, select Custom.
5. Select 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. Select OK.
   A number of additional tools will appear at the top of the document which will enable to edit your document.

Once you are satisfied with your changes, select Save.

To add or switch the document template after you have finished updating them, go to the settings of the module you want to update. For more details, see the Sales Order Settings Help article for additional information.

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. While logged in as an Administrator, select your username in the top right and then select Settings.
2. From the Setup menu, select Document Templates.
3. Choose the document you want to convert to custom, and click Design.
   Alternatively, you could create an entirely new document by selecting Create New.
4. Within the document, select Custom.
5. Select 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. Select 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 provides a basic idea of the structure of a document.

Starting From Scratch - Looping through Line Items, Payments and Back Orders

There are some parts of your document where you are not just representing single variables but instead 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 back orders, 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!

Variables

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