Quosal Form Designer Training Documentation Chapter 2 – Anatomy of a Basic Quote Form Navigating the Report Designer To get started modifying a basic quote form, you need to open the report designer from Quosal Create. First open Quosal Create, then open a quote or create a new one. One of the large options on the left is named “Publish and Deliver”. This is where you will select which form you want to modify. Once on the Publish and Deliver screen, choose which quote form you want to start modifying, then click on the design option at the bottom of the page, highlighted in the screenshot above. This will open the report designer. 1 | P a g e Quosal Form Designer Training Documentation The Report Designer looks like this: All the important control panels are highlighted in the screenshot above. Tool Box The toolbox is where you select what you want your cursor to do. Either you want to add new elements such as labels, tables, and pictures, or you need to use the pointer to adjust the size and placement of objects already on the page. Report Explorer The report explorer is your map of the quote form. Elements on the form can get pretty crowded sometimes, and may even be on top of each other, making them difficult to select. Using the report explorer you can select an element without having to directly click on it. Field List The field list is a comprehensive list of all the available fields in Quosal. This is how you get information from the quote onto the form. Elements such as table cells or labels can be bound to fields in this list, allowing them to dynamically populate with data from the quote. Property Grid The property grid is a set of properties specific to each element on the form. When you select an element, the grid will refresh to show that element’s current properties, such as background color, borders, font size, etc. You can then modify these properties. 2 | P a g e Quosal Form Designer Training Documentation Image Editing in the Report Designer To create a new image, click on the ‘Picture Box’ tool in the Tool Box. Then click and drag a box on the report. Next, click on the [>] symbol in the top right corner of the box to get to the Tasks menu: From here, you can either choose to hardcode an image by clicking on the [∙∙∙] next to Image, or you can pull data from the quote by binding the image box to a tag using the [V] next to Data Binding. You can choose from several options under the Image Sizing menu. The most common is Zoom, which will fit the image into the box you’ve created without distorting the proportions. Normal won’t resize the image at all and is the best to use for preserving image quality; you just have to make sure your image is the exact right size to begin with. 3 | P a g e Quosal Form Designer Training Documentation Adding/Changing Margins To add margins to your report, first select the main report, which will be the very first item in the Report Explorer, and is usually named something like ‘default1’. Now look down at the Property Grid. If you scroll down to the bottom, you’ll see a setting called Margins under the Page Settings section. 4 | P a g e Quosal Form Designer Training Documentation Adding/Changing Margins Cont. If you click the little [+] symbol to the left of Margins, it will expand the section so that you can edit top, right, bottom, and left margins individually. When adding margins, the usual setting is 25 for each side. Notice when the margins are added that a line appears on the document, highlighted above. Anything running over this line will cause the document to print incorrectly, and may add extra pages. The line appears red when elements are intersecting it, and will become gray when all intersecting elements have been removed from it. To resize an element, select it and then click and drag on the small white squares to resize it. 5 | P a g e Quosal Form Designer Training Documentation Data Bindings Content flows from the quote to the quote form through a list of tags. Each tag represents a specific piece of information from the quote. For things like tabs and items, of which there are usually more than one per quote, the tags relating to them represent whichever tab or item is currently being looked at by the report designer. For example: [QuoteTabsList.TabName] = The name of a tab [QuoteItemsList.Qty] = The quantity of an item In the report designer, the quote form is split into sections based on which part of the quote the information is coming from. These are called ‘Detail Reports’. In the screenshot above, the open menu shows the available sections for new detail reports. There are only two items on this list that are relevant to designing forms for Quosal, and those are ‘QuoteTabsList’ and ‘QuoteFinancingList’. If you reference the quote diagram from chapter one you’ll notice that these are the two branches off of the Quote Level. The green bars seen above are the detail report labels. The two that we see here are both ‘QuoteTabsList’ sections. Within a detail report section, you have a bar called ‘Detail’ with some number after it. This is the main part of the section and it has some special functionality. The ‘Detail’ part of a detail report prints the quote information as a list of items. For ‘QuoteTabsList’, it is the list of tabs on the quote. 6 | P a g e Quosal Form Designer Training Documentation Data Bindings Cont. The screenshots below show a comparison of the tabs in a quote as seen on the quote itself, in the report designer, and on the pdf preview. In this particular case, only tabs that are checked as ‘Printed’ are showing on the form. Quote Report Designer PDF 7 | P a g e Quosal Form Designer Training Documentation Data Bindings Cont. In the report designer, tags are usually bound to labels or table cells using the Data Binding dropdown. On a basic quote form, you may need to change what kind of tax is being shown. In the above screenshot, we have selected the table cell that currently pulls data for the quote’s tax, including tax on the shipping, or [PrintedTaxWithShipping]. Say we need to change this field to pull GST. We can do this by scrolling through the list of tags to [PrintedGST] and clicking on it. Another way of adding or changing a data binding on an element (label, table cell, etc.) is to drag and drop a tag from the field list onto the element. 8 | P a g e Quosal Form Designer Training Documentation Editing Elements Next, we need to edit the table cell to the left so that it reads ‘GST’ instead of ‘Tax’. You can do this by double‐clicking on the table cell. 9 | P a g e Quosal Form Designer Training Documentation Editing Elements Cont. When modifying a form to use a different font, each element must be edited to apply the new font. Once you have selected the element you want to edit by clicking on it with the Pointer tool, you can edit the font using either the menu at the top of the report designer, or within the Property Grid. Of course editing each element one at a time can be tedious. The Report Designer does handle some degree of Inheritance. A good example of this is a table. You can set the background color for the whole table, and it will be inherited by the table rows and table cells. That way when you want to change the color, you only have to edit the table, and not the individual cells. Of course, properties like background color are only inherited if the element does not already have formatting of its own. Formatting on a table cell trumps formatting on a table row, which trumps formatting on the table as a whole, and so on. The big picture here is that if you change the font for the whole document (by selecting “default1” in the Report Explorer and changing the font in the Property Grid), any elements that had no previous font specified will inherit the new font, but anything that has been given its own font setting will not change. And because a lot of elements have their own settings already in the basic quote form, changing the font means you will have to edit a lot of individual elements one at a time. 10 | P a g e Quosal Form Designer Training Documentation Editing Elements Cont. When editing a form you may wish to remove things like the manufacturer part number, item image, or rep image based on your preferences. Deleting elements is easy in the Report Designer. You can select the element and simply hit the delete or backspace keys on your keyboard, or left click on the element and choose “delete” on the menu that appears. In the above screenshot, we are about to delete the manufacturer part number from the NonRecurringTabs table. It’s difficult to see exactly what we have selected, since all of the elements are squished together and some are on top of each other, but if you look to the right at the Report Explorer, you can see that MFP1 is highlighted in blue, so we know that we have the right thing selected. It’s also possible to delete items directly from the Report Explorer by right clicking on them, as seen in the screenshot below. 11 | P a g e Quosal Form Designer Training Documentation Basic Quote Form Functionality At this point you have all the knowledge necessary to modify a basic quote form, but we haven’t covered exactly what a basic quote form does. A basic quote form is broken out into the following sections: 1. Cover Page The cover page is pretty self‐explanatory. It is the first thing you’ll see when you open a quote form template in the Report Designer because it’s at the very top. Generally the cover page has the company’s logo, as well as some basic information about the quote such as who it was prepared by and who is being quoted. 12 | P a g e Quosal Form Designer Training Documentation 2. Cover Letter The cover letter section looks for a tab on the quote called “Cover Letter” and prints anything that is in the item notes of each item on that tab. The cover letter section also has a group header section that prints the date and customer information, and a group footer section that prints the rep’s signature, name, and job title. 3. Pre Outline The pre outline section looks for any tabs on the quote that are set to the “Pre Outline” grid format. This section is meant for free form text such as a company introduction, executive summary, etc. The pre outline section prints the tab name first as a main header, and then prints item long description as a subheader, and item notes as the main body text. Comment lines on the tab are printed as body text without a subheader. Newer basic forms will also print the ‘Picture’ field of an item below the item notes, allowing for some graphics to be incorporated into the Pre Outline section. The ‘Picture’ field is different from the ‘Thumbnail’ field, which is used for item images, because the ‘Thumbnail’ field automatically resizes images, while the ‘Picture’ field will not. The ‘Picture’ field is not displayed by default in Quosal Sell, but can be accessed and set to visible using the ‘Additional Fields’ menu. 13 | P a g e Quosal Form Designer Training Documentation 4. Tab Details The tab details section is the main body of the quote form. This is where all the line item details for the quote are displayed within tables, separated out by tab. The main QuoteTabsList section iterates through all the tabs one the quote that are marked as both ‘printed’ and ‘included in totals’, and aren’t empty. This main section is then broken out into two QuoteItemsList sub‐sections, ‘NonRecurringTabs’ and ‘RecurringTabs’, which each have a unique column set. These QuoteItemsList sections also each have a group header that displays the tab name and table header, as well as a group footer that displays the tab subtotals. ‘NonRecurringTabs’ will iterate through the items of any tabs found by the QuoteTabsList section that have a $0 recurring value. ‘RecurringTabs’ will iterate through the items of any tabs found by the QuoteTabsList section that have a greater than $0 recurring value. 14 | P a g e Quosal Form Designer Training Documentation 5. Quote General Information The quote general information section acts as a header for the quote summary. It displays the quote name, then the sales rep information (Prepared by), customer details (Prepared for), and information about the quote itself such as the quote number and expiration date (Quote Information). 6. Quote Summary The Quote Summary section is actually comprised of several QuoteTabsList sections, the first of which is labeled ‘Quote Summary’, which is a summary of the tabs that have only one‐time pricing. There is also ‘Recurring Expenses Summary’ section and two ‘Optional Expenses’ summary sections, one for one‐time optional and one for recurring optional. Each of these sections has a set of conditions that looks for specific kinds of tabs, then iterates through the list of matching tabs, displaying the tab names and tab totals in a table. 15 | P a g e Quosal Form Designer Training Documentation 7. Financing The Financing section is comprised of two QuoteFinancingList sections. The first shows any term options that have been set up for financing the one‐time amounts on the quote. For example, a term option that spreads a $100 setup fee line item on the quote over 4 months so that it is paid as four $25 per month payments. The second shows term options that deal with recurring values on the quote. This means taking a line item for a recurring service, such as a $30 per month support fee, and specifying a term for it, such as 12 months. This means the line item ($30) is paid for 12 months, for a total of $360. One term option can have both a financing element and a recurring payment element. In this case, it would show up as a table row in both tables, with the relevant information in each. 8. Terms and Conditions There are a couple of small sections near the bottom of the quote that pull the terms and conditions. The first is a QuoteTabsList section, which prints a quote level rich text field, as well as the [TermsAndConditions] tag. The second is a QuoteFinancingList section, which pulls the description of whichever term option is set as selected. 16 | P a g e Quosal Form Designer Training Documentation 9. Signature Block The signature block section is simply two group header bands. The bottom one prints if the quote has not yet been approved, and is just a signature and date line. The top one is the E‐Signature Confirmation block, which only prints after the quote has been approved. 10. Post Outline The post outline section is identical to the pre outline section, except that it looks for tabs with a “Post Outline” grid format, and is located at the end of the quote. End of Chapter 2 17 | P a g e