In QuoteWerks, the Layout Designer is used to customize the printed output both for individual documents like a quote, order or invoice and also the printed output of management reports. Each has similar functionality, but are used differently. The following article defines what a layout is as well as how to access, edit and use them.  

•Document Layouts

•Report Layouts

•Layout Sections

oDetail Section Filters

•Layout Customization

oLayout Designer Commands

oCustomizing the Page Layout

oAdding Content to a Layout (logo, fields, labels, objects)

 

To quickly learn how to navigate and use the Layout Designer, consider watching the following videos:

Layout Designer [Beginner] Video

In this video we introduce the QuoteWerks layout designer and how you can quickly customize those layouts to reflect your company’s brand standards. In QuoteWerks, the Layout Designer is used to customize the printed output both for individual documents like a quote, order or invoice and also the printed output of management reports. Each has similar functionality but are used differently. For the purposes of today's demonstration, we will be focusing on a quote layout. We review how to ensure the right information is included in the quote to be passed to the layout, how to add customized information to the layout, and how to update it's colors and formatting.

To quickly customize and begin using a sample layout by including your company logo, see Adding Your Company Logo to a Layout.

 

Layout Designer [Intermediate] Video

In this video we continue our discussion on the QuoteWerks Layout Designer. If you have not done so already, please see the QuoteWerks Layout Designer [Beginner] video. This demonstration builds upon concepts discussed in that video including how to use the Layout Designer, how the layouts are built and execute, the different options you have when formatting a layout, and how to use filters to conditionally format different line types.

To learn more about how a layout it built and executed, see Layout Sections.

 

Layout Designer [Advanced] Video

In the Advanced Layout Designer video we expand upon topics covered in the Beginner and intermediate videos. If you have yet to watch these videos, I suggest you do so before viewing this one. In these previous videos we reviewed the Layout Designer, how to customize a layout, how to add additional fields to layouts and how to use filters to create multiple detail sections. In today’s video we will focus on formulas and how you can use them to calculate form outputs using inputs from the QuoteWerks database. To demonstrate the use of filters we focus on 3 use cases. The first is a company that would like to include a square footage amount calculated using 2 custom fields, length and width. The second is a company that would like to add the total of unique items included on the quote in the footer section. And the third is a company who would like to include a percent discount from list column on the quote to show customers the discount they are providing.

 

Document Layouts

To create a new print layout for your Quotes/Orders/Invoices, first select the File -> Print/E-mail/Deliver menu, then click on the [New] button. Choose the layout type (quote, order, invoice, sales order, or purchase order), click [Ok] and then provide it with a name. The Layout Designer will then launch.

To edit an existing print layout, also select the File -> Print/E-mail/Deliver menu to start then select the layout you want to edit. Click on the [Edit] button and the Layout Designer will then launch.

You can also Clone, Delete or Rename an existing layout from the Print Document window.

 

 

 

Report Layouts

Layout files are also used in Management Reports to determine the look and feel of a report.

To work with a report’s print layout, first select the Reports -> Management Reports menu:

Select a report and click the [Edit] button to modify an existing report, or click [New] to create a brand new report.

The layout file is selected on the Layout tab of the Report Properties window. From here you can choose to work with an existing report layout, clone a report layout, create a new report layout, edit an existing report layout, delete a report layout or rename a report layout.

Before you begin customizing new or existing layouts, it is important to understand section concepts, table concepts, field concepts, Layout Designer menus, and formulas.

For more information on how to work with Report Layouts, see Chapter 20: Management Reports.

Layout Sections

Before you begin customizing new or existing layouts, it is important to understand section concepts, table concepts, field concepts, Layout Designer menus, and formulas. QuoteWerks Layout Designer organizes a layout by sections. A print layout can have 1 or more of the following 7 sections:

•Report Headers

•Page Header

•Sort Headers

•Detail Sections

•Sort Footers

•Report Footers

•Page Footer

 

 

Report Headers

The Report Header section is printed only once, in the beginning of the layout. The Report Header 1 section typically contains your company logo or contact details, as well as fields that should typically appear on the first page of the printout, such as Document Header information like Sold To Company Name, Sold To Company Address and the Document Number.

Page Header

The Page Header section is typically used for information that should repeat at the top of every page, such as column headers for the fields listed in a Detail Section (quantity, description, price, etc).

Sort Header (Reports Only)

When adding a Sort Header section you will be prompted for a sort field. This will determine the sort order of the fields listed either in the Sort Header section itself or in the Detail Sections below. Additional sort header sections can be added to create multiple layers of arrangement.

Detail Section

The Detail Section is typically printed on each page of the document. A detail section is printed for each record (line item) on the Document Items tab. You can create up to 9 different detail sections. Multiple detail sections can be used to change the way different kinds of data are displayed, including font settings and displayed fields. Detail sections also have an option to print records in columns which is useful for printing labels, as two or more addresses can be printed in 1 row. This option is available for the layouts with only 1 detail section.

In Detail Section 1 you would typically insert fields from the DocumentItems Table, such as Quantity, Description, Unit Price, Extended Price, Manufacturer, Manufacturer Part Number, etc.

Sort Footer (Reports Only)

The Sort Footer section is printed each time the data in the sort field changes. Typically this is used to total fields of data contained in detail sections. Sorting by SalesRep, the sort footer can then total all the orders per SalesRep. Before the SalesRep changes to the next SalesRep in the sort order, the Sort Footer will print giving you a chance to print the totals for only that SalesRep.

Report Footer

The Report Footer section is printed at the end of the layout, immediately following the last detail section, and is typically used to print the layout summary. You can have more have up to 9 report footers.

The Report Footer 1 section is typically used for totaling information like the Subtotal, Sales Tax, Shipping, and the total price of the quote.

The Report Footer 2 section is typically used for standard company disclosure information, closing statements, etc.

Page Footer

The Page Footer section is printed at the bottom of every page. A page footer is typically used for displaying information like the page number or the page count, although it could also be used to display information like your company name, so your company name will show at the bottom of every page.

Resizing a Section’s Vertical Height

When placing fields in each section, you may need to increase the vertical size of a section in order to have room to place additional fields. To increase the vertical size of a section, click on the section header (the section header is the gray bar that contains the name of section, such as “Detail Section 1”). Once you have clicked on the section header, you will see resizing blocks at the top and bottom of the section. Move your mouse over the resizing block at the bottom of the section, click and hold the left mouse button and drag downward to increase the vertical size of the section. Release the mouse button when the section is the size you need it to be.

Setting Section Properties

Each layout section has formatting properties that can be set. To view or change these formatting properties, click on the section header (the section header is the gray bar that contains the name of section, such as “Detail Section 1”) and then right-click and choose Format. The Format Section window will have properties that determine if the section should be advanced to the beginning of the next page before printing, if blank space should be removed, if the section data should be kept together instead of split across pages, etc.

Detail Section Filters

You can filter a detail section by right clicking on the detail section and selecting filter. Use this option to specify a filter for the selected section. A section filter can be used to print specified information if it meets the criteria of the filter. For example, you could create a section filter to only print the Description and Extended Price if the Line Type is equal to a Subtotal.  

Using Detail Section filters requires an understanding of the way the form executes when it is printed as well as the different line types and line attributes. The layout executes from top to bottom meaning that the report headers will print, then the page headers on each page, then the detail sections will print, then the report footers. When the process reaches the detail sections it looks at each line and checks to see if it should be printed using that detail sections formatting based on filters. If it does, it will print using that detail sections formatting. The process moves to the next detail section and again checks to see if the line should be printed.

A detail section filter is built in the Section Selection Criteria window which can be accessed by right clicking on a detail section and selecting Filter.

In the example above we are filtering this detail section to only print line types that are equal to 256. That value is the identifier used for Heading lines. Filters are built using standard operators and calls upon a table, a field, and a value that describes the object. Available tables, fields, and values that can be used when building filters can be found in Appendix: Developer Integration Notes.  A list of fields you can use along with a description for each can be found under Tables and Fields.

For an example of how filtering is used in a layout check out the Sunlight quote template that comes when you install samples with QuoteWerks. If you did not install samples when you downloaded or upgraded QuoteWerks, you can download it by visiting the QuoteWerks Layouts webpage or clicking this Link.

 

As you can see, the above screenshot shows the minimal quote template in the layout designer. Along the right you see a label that describes the detail section and the filter that is used to print lines using that detail sections attributes. To view the filter expression for a detail section right click on the detail section and click filter. This will open the Section Selection Criteria window where you can review and edit the filter for that section. This filter displays lines that are Group Headers, Regular or Recurring w/ First Payment.

Users can also use the StyleCode column on the DocumentItems tab to identify a particular line item.  This would enable you to, for example, bold a specific line item on the document using the StyleCode column.  So you could create a filter for a section that looks like:  .if.documentitems->linetype=2.and.documentitems->stylecode="Bold".  This means when the word "Bold" is in the StyleCode field on the DocumentItems tab for that line item, the style set in the section on the layout designer will display.

Layout Customization

The Layout Designer allows you to customize your layout using a number of different tools. These tools can be accessed using Layout Designer Menu commands.

Layout Designer Commands

This section covers menu commands in the layout designer.

 

Customizing the Page Layout

Text Alignment

When this menu is selected, it will enable you to change the alignment settings for the text of the selected field(s). This option does not align the field arrangement; please see Arrange Menu below for details on that functionality.

Snap to Grid

There is an invisible grid of rows and columns in the layout. When using the “Snap to Grid” option, whenever a field is moved, the field will be automatically aligned with the nearest grid lines. You can also adjust the spacing of the grid; reducing the size will allow for more exact adjustments to the field placement. When you do not use the “Snap to Grid” option, it can become difficult to line up fields, since you have to manually position them.

Resizing Page Margins

The page margins for the print layout can be modified under the Report -> Options menu. It is important to note that the page margin settings do not affect any of the objects (such as data fields, labels, etc) that are on the print layout. If you find that objects are getting cutoff by the left margin when printing/previewing/emailing the layout, the solution is to move the objects to the right rather than adjust the page margin.

Page Orientation

The page orientation of your document is set in the Layout Designer on the File -> Printer Setup menu. You can select either portrait or landscape.

Page Numbering

The layout designer has the ability to calculate the total number of pages in a “Page x of y” format. This feature will include and work with rtf cover pages, spec sheets, and literature sheets providing an accurate count of total pages. If you want the page number and total number of pages to be displayed in your rtf documents, you will need to use your RTF editor (usually Microsoft Word) to insert the page number and total page number macros.

Print Layout Designer Status Bar

At the bottom of the print layout designer window there is a status bar that provides information about the object that is currently selected. On the right side of the status bar, information about the position and size of the object will be displayed. This information is useful when you are aligning and sizing objects. On the left side of the status bar will be information about the object that is selected. This information is called the “object details”. For example, if a label object is selected, then the object details panel will display “Label:” If a QuoteWerks field like the line item description field is selected, then the object details panel will display “Data Field : DocumentItems-Description (Text)”. This information tells us that the object is a “Data Field” as opposed to a label, line, picture, etc. It also tells us that the “Description” field is from the “DocumentItems” table. This is useful to know because there are some fields like CustomText01 that are in both the DocumentHeaders and DocumentItems tables. The “(Text)” information tells us that this field holds text data as opposed to currency data, or other numeric data.

General Layout-Designer Tips

The numerical fields in the layout have a summarization type property. This property can be changed by double clicking on the field. Most of the time, this property should be set to VALUE. If you notice that a field in the layout has a much larger value than it should, this property has probably been set to TOTAL. To correct the problem, change the summarization type property to VALUE.

When using the visual layout designer, whenever you are inserting an object, a placement rectangle with a “+” sign in the middle will appear in the print layout window. Use the mouse to move the placement rectangle to the location where you would like the object to appear, and then click once on the mouse. You can then move the object by clicking on it and dragging it to the new location. The object can be resized by clicking on it and dragging the object outline using one of its sizing handles, much like the resizing of a section.

Printing Purchase Orders (Not Available in Reports)

When printing a Purchase Order layout, and checking the “Create PO for each Vendor” option on the File -> Print/E-mail/Deliver window, please note that the totaling fields such as DocumentHeaders->Subtotal, DocumentHeaders->GrandTotal, etc. have been designed to return a zero value. This design is necessary because when QuoteWerks prints a PO for each vendor on the quote, the totaling fields would contain the totals for all the line items for all the vendors on the quote. The solution is to insert the DocumentHeaders->ExtendedCost field into the Report Footer 1 section on the Purchase Order print layout (if it is not already there). This will add up all of the extended cost values for all the line items to create your PO subtotal amount. Note, purchase orders are used by you to purchase products and services at the price that it costs you, so keep in mind that most of the numeric fields that you will want to insert into purchase order print layouts will be cost fields like DocumentItems->UnitCost, DocumentItems->ExtendedCost, etc. A common mistake is to insert a Price field which is the customer’s price for the product rather than your cost.

Adding Content to Your Layout

Adding Your Company Logo to a Layout

To add your company logo (or any other picture file) to a header or footer section of the print layout, select the Insert -> Picture menu and choose the appropriate picture file. After you select your company logo, the layout designer will go into positioning mode, which allows you to select the location on the print layout where you would like to place your company logo by clicking over the location. Most often, you will want to place your company logo in the Report Header section.

To remove the image from the layout, right-click on it and select Delete.

Adding Label Text to a Layout

To add text to the layout, select the Insert -> Label menu, and then place the label on the layout. To edit the text inside a label, either right click on the label and select Edit Text or just double click on the label:

If you want the label to contain multiple lines of text, make sure you check the “Multiline Label” checkbox before you begin typing. When you are finished entering in the text, click on the OK button to save.

Labels have many uses. As an example, you may want a column header for the Manufacturer field column. To do so, add a label to the Page Header section, placing it above the Manufacturer field in the Detail Section. Once it is placed, double click on the label and type in the appropriate descriptive text (such as “Manufacturer” or “MFG”). To remove the label from the layout, select it, then right-click on it and select Delete.

Adding Database Fields to a Layout

Select the Insert -> Data field menu to display the Insert Data Field window:

This window will let you choose a field from the available tables. Fields for the Sold To Company, Terms, Ship Via, etc. will be in the DocumentHeaders table. Fields for the line item details like Quantity, Description, Unit Price, Extended Price, etc. will be in the DocumentItems table. The Applications table stores all licensee information, such as LicenseeAddress, LicenseeEmail, and LicenseeCompany, which is useful when adding your company information.

 

You can use the Search button to quickly narrow the list to specific fields you are looking for.

 

After you select the field to insert and click on the [Ok] button, the layout designer will change the mouse pointer to a pointer with an outlined box. Using this pointer, click on the area of the print layout that you want to place this field. Typically you will place DocumentHeader fields in a Header or Footer section. DocumentItems fields will typically be placed in a Detail section.

To change the font, format, or other properties of the field you just inserted, right-click on the field, and select the appropriate option from the menu that is displayed.

Resizing and Moving Fields on a Layout

To change the size of a field, click on it, and you will see resizing blocks at the top, bottom, left, and right sides of the field. Move your mouse over a resizing block, click and hold the left mouse button and drag in the direction to increase the size. Release the mouse button when the field is the size you need it to be. Alternatively, once you have clicked on the field, you can hold down the SHIFT key and use the arrow keys UP/DOWN/LEFT/RIGHT to resize the field.

To move a field, click on the field with the left mouse button, and while holding the button down, drag the field to the new location, and then release the mouse button. Alternatively, once you have clicked on the field, you can use the arrow keys UP/DOWN/LEFT/RIGHT to move the field.

Including Pictures of Items in the Quote

You can associate a picture with each product/service in your native product database. You can also choose to print the picture of the product with the line item when a quote or report is printed. See Setting Up Native Products and Services for details on this feature. In order for the picture to appear, you must insert the picture field into the print layout. If the picture field is not inserted into the print layout, then the picture will not be included.

To add the picture field, click on the Insert -> Data Field menu, select the DocumentItems table and then select &Picture. Since this picture field is associated with each line item you will need to insert it into a Detail Section in order for it to work correctly.

After you have inserted the &Picture field into the layout, you can format it by right clicking and selecting Format.

The format window for the &Picture field has several options:

Resize to bounders

When inserting the &Picture field into the print layout, you will notice that the &Picture field object has a default height and width. Also, you will notice that at each corner of the objects there is an L-shaped corner. We call this L-shaped corner a “bounder”. Bounders show us where the object begins and ends and therefore lets us easily see the size of the object.

When the “Resize to bounders” checkbox is checked, the picture will be resized (enlarged or reduced) so that it will fit inside the height and width of the object. If the “Resize to bounders” checkbox is not checked, when printing, the picture object height and width will automatically be resized to whatever size the actual picture is. This will result in each picture for each line item being a potentially different size.

Maintain aspect ratio

The “Maintain aspect ratio” checkbox works in conjunction with the “Resize to bounders” checkbox, and is only available when the “Resize to bounders” checkbox is checked. When a picture is resized, it is “stretched” both vertically and horizontally until the entire height and width of the picture object has been filled. This will result in the distortion of the relative height and width of the picture. To preserve the relative height and width of the picture, you will want to check the “Maintain aspect ratio” checkbox. In most all cases, you will always want to check the “Maintain aspect ratio” checkbox.

Reserve space if empty

When designing a print layout to include the &Picture field, you need to keep in mind that not every line item that is in the quote will contain a picture. If that happens, by default, there will simply be a big empty space between each line item where the picture would have printed if there was a picture for that line item. To address this concern, you can do the following: If you insert the &Picture field toward the bottom of a Detail Section so that no other objects are below it, you can then double click on the Detail Section header and check the “Compress Space After Last Item” checkbox. This will “compress” or remove the blank space at the bottom of this Detail Section. If the “Reserve space if empty” checkbox is checked, this blank space will not be “compressed” or removed even if the section level “Compress Space After Last Item” is checked.

Guidelines for Using Images in Layouts

Images for Layouts need to follow a particular format.  Images need to be either BMP or JPG. They need to be RGB color, NOT CMYK. Images in layouts should also not exceed 300 DPI or it tends to overload the PDF generator. Those specifications should be sufficient to print a good-looking quote from a modern color LaserJet printer. It is suggested not exceed 200x200 pixels in length or width; with a maximum of 300x300 pixels in actual picture size.

 

Page Numbering on PDF Output

QuoteWerk automatically numbers the PDF output document in the format of "x of y" at the bottom right corner of each page in the PDF document.  To change this text to "page x of y" or something similar, advanced users can use the Settings Manager to create or set SystemSettings\Defaults\PageCountPhraseMacro=%x% of %y%.  Also, you can disable this phrase from being written at all by setting SystemSettings\Defaults\DisablePageCountPhraseMacro=-1.

Adding Contact-Manager Fields to the Layout (Not Available in Reports)

You can insert fields from your Contact Manager database onto your print layouts. This feature works with ACT!, GoldMine, MS CRM, Maximizer, Outlook, salesforce.com and the QuoteWerks Native Contact Database. Select the Insert -> Database field menu to display the Insert Field window. On this window, choose ContactMgr from the table drop-down list. Under the fields drop-down will be a list of all the fields that QuoteWerks can retrieve from your contact manager, and place into the print layout. If there is a contact manager field that you want to use that is not listed in the list, simply type it in. You can get creative with the use of these contact manager fields. For example, in GoldMine, you can use the Profile.CreditCard macro to retrieve the credit card number listed in the “CreditCard” profile under the Profile/Detail tab for the contact in GoldMine. If you have other profiles under the Profile/Detail tab in GoldMine, you can very easily pull information from it.

To change the font, format, or other properties of the field you just inserted, right-click on the field, and select the appropriate option from the menu that is displayed.

When you print the print layout, QuoteWerks will retrieve the information from the contact manager fields and place it into the print layout.

Adding Line Objects to a Layout

Select the Insert -> Line menu option, and place the line on the layout. Once the line object is on the print layout, you can right-click on it, and choose the Format menu item to format the line. There are several options that can be set for the line, including orientation of the line (vertical, horizontal, diagonal, or spanning vertical), thickness, etc. Note, when thicker lines are drawn, the ends of the line will be rounded.

Spanning Vertical Lines, when used in detail sections, will expand vertically to fill the entire height of the Detail Section. This is particularly useful when the vertical size of a Detail Section is variable, which happens when pictures are printed for some line items and not others.

Inserting Formula Fields into a Layout

See Formula Field Concepts section for details.