Layout designer

Link copied to clipboard

Layout Designer is a visual (WYSIWYG) tool for creating document templates. It is implemented using only Javascript and DOM HTML extensions, so it will work in the MS IE or Mozilla web browser, and no installation of extra components on the user’s computer is required.

When you design a template in Layout Designer, you define how the document should look: the location of components, pictures, fonts, and colors. You also place the data fields on the document. These are containers for real data, defining where the data element should appear.

For example, on the invoice template you put an Invoice.number data field in the place where you would like the invoice number to be printed (top-right corner, in the example below). When the actual invoice is generated based on this template, Invoice.number will be replaced by the actual invoice number (e.g., 557). Make sure you insert the data field using the pop-up menu, because if you simply type Invoice.number it will be regarded as a text string, and so will appear on the invoice exactly as you have typed it.

During design, data fields are represented on the screen by sample data, e.g., 25 for the invoice number. This data is provided only for your convenience and is used only in design mode. All sample data are shown in over lined font, which makes it easy to recognize.


layout_designer

Layout Designer consists of two main parts:

  • Toolbar (on the left). It contains buttons and controls for manipulating content in the editor window.
  • Worksheet (on the right). It contains the document itself.

On this page