Build-On Tutorial:


Invoicing: Lesson 4

Print or Email Invoice PDF

Lesson Overview

In this lesson you will create an Invoice PDF and will be able to save it or send via email.

Here’s a sneak peek of what you will build:

Step 1 - Create new layout

You will create an Invoice PDF layout by duplicating Blank Desktop | List layout.

  1. Enter Layout mode using the Edit Layout button in the status toolbar. Note: You can also enter Layout mode using the View > Layout Mode menu item, or the keyboard shortcut Command-L (macOS) / Control-L (Windows).
  2. Use the Layout pulldown menu in the status toolbar to switch to the Blank > Blank Desktop | List layout.
  3. Duplicate the layout using the Layouts > Duplicate Layout menu item.

    Note: You can also use the Manage Layouts dialog (File > Manage > Layouts...) to duplicate a layout. This dialog is also useful for organizing and reordering your layouts.
  4. Using the Layout Setup dialog (Layouts > Layout Setup…) rename your layout to “Invoice PDF”.
  5. While still in the Layout Setup window, set the Show records from: to the TIMEENTRY table occurrence.

Step 2 - Modify Invoice PDF Layout

You will edit the layout to show related invoice data.

  1. To show information about the client, you will create a new relationship in the Manage Database dialog.
    1. Create a new table occurrence based on the Client table and name it “timeentry_job_CLIENT”.
    2. Create a relationship between timeentry_JOB and timeentry_job_CLIENT. Match ID_Client from timeentry_JOB to ID from timeentry_job_CLIENT.
  1. Back on the Invoice PDF layout, delete the Footer part of the layout, since you won't need it for this print layout.
  2. Go to the Part Setup dialog (Layouts > Part Setup...) and create a Trailing Grand Summary by clicking the Create… button and then choosing Trailing Grand Summary. This is what your Part Setup window will look like:
  1. Resize the height of the layout parts as follows (select the layout part, and in the Position tab of the Inspector, set Height):
    1. Header: 208 pt
    2. Body: 95 pt
    3. Trailing Grand Summary: 72 pt
    4. Set the Layout Width to: 576 pt
  2. Modify the text box in the Header from “Title” to “Invoice # <<timeentry_INVOICE::ID>>”.
  3. Remove the sample label and field. Use the Text tool to add the following text as one text block below the header (style it as label List.Left via the Styles tab of the Inspector):

    Invoice Date: <<timeentry_INVOICE::Date>>
    Client: <<timeentry_job_CLIENT::Name>>
    Job: <timeentry_JOB::Job_Name>>
  4. Add the following fields to the Body of the layout:
    1. TIMEENTRY::Date_TimeEntry
    2. TIMEENTRY::Rate
    3. TIMEENTRY::Hours
    4. TIMEENTRY:: Total
    5. timeentry_TASK::z_Name_Display
  5. Select the Rate and Total fields and format the amounts using the Data tab of the Inspector. Set the Format to Currency, Fixed number of decimals: 2, Symbol: $, and Format: -$1234.
  6. Select the Hours field and format it as Decimal with Fixed number of decimals: 2. Format Date_TimeEntry as 12/25/14 with Zero as the leading day numbers and month numbers.
  7. Style Date_TimeEntry and z_Name_Display as txt Minimal.Black.Left. Style the Total, Rate, and Hours fields as txt Minimal.Black.Right.
  8. Create labels for each of the fields in the Body and place them in the Header, above each field.
  9. Style the Date and Task labels as label List.Left. Style the Total, Rate, and Hours label as label List.Right.
  10. To see the total of the invoice, use the Manage Database dialog to create a summary field in the TimeEntry table named Sum_Total. Set the field to the Total of the Total field and click OK and then click OK again to exit the Manage Database dialog.
  1. Duplicate the Total field and change it to the Sum_Total field (if the field was not automatically created in the above step). Place it in the Trailing Grand Summary and add the label “Invoice Total:”.
  2. Style Sum_Total as txt Minimal.Black.Right.Bold
  3. Style the label as label List.Left.
  4. Resize and arrange the fields and labels to look similar to this:
  1. Select all of the fields in the Body and on the Position tab of the Inspector turn on Remove blank spaces by Sliding up based on All objects above. Also turn on Also resize enclosing part. This will shrink the height of the body when the task name is shorter than the field height.

Step 3 - Create script to view PDF

You will create a script to either view the PDF version of the invoice or to send it via email. You will accomplish this by sending different parameters (“View” or “Send”) to the script.

  1. Open the Script Workspace (Scripts > Script Workspace…). Duplicate the Template script.
  2. Name the new script “View | Send PDF”. Any time you copy the template script, be sure to amend the comments at the top to fit your current script, and move the script into the "Invoice" folder.
  3. Add following steps to your new script (for details on Go to Related Records, Save Records as PDF, and Send Mail script steps, see below):

Set Variable [ $action ; Value: Get ( ScriptParameter ) ]
Set Variable [ $Invoice_ID ; Value: INVOICE::ID]

Set Error Capture [ On ]

Go to Related Record [ Show only related records ; From table: “invoice_TIMEENTRY” ; Using layout: “Invoice PDF” (TIMEENTRY) ]

If [ Get ( LastError ) ≠ 0]
   Show Custom Dialog [ “Cannot create PDF” ; “There are no time entries on this invoice.” ]
   Exit Script [ Text Result: ]
End If

Set Variable [ $path ; Value: Get ( TemporaryPath ) & "Invoice_" & $invoice_ID & ".pdf" ]

Save Records as PDF [ With dialog: Off; “$path” ; Records being browsed ; Create directories: Off]

Go to Layout [ original layout ; Animation: None ]

If [ $action = “send” ]
   Send Mail [ Send via E-mail Client ; With dialog: On ; Subject: “Invoice” ; “$path” ]
Else If [ $action = “view” ]
   Open URL [ With dialog: Off ; “file:/” & $path]
End If

  1. For the Show Custom Dialog step, clear the text in Button 2 so the user can only click OK.
  2. For the Go to Related Record step, set Result Options: to Show in new window and in the “New Window” Options dialog, leave the Window Style as Document and set the Size to Width of 630 and leave the Height blank. Set Position to From Top 30 and From Left 30.
  3. For the Save Records as PDF step, click the gear icon to right and select Specify output file and in the dialog set the Output File Path List to $path.
  4. For the Send Mail script, select the gear icon top open the Send Mail Options dialog. For Subject add “Invoice” and then click the Attach Files button. In the subsequent dialog add $path in the box.
  1. Save and close the script.

Step 4 - Update Invoice Detail layout

You will create buttons to view the PDF and send the PDF of the invoice.

  1. Go to the Invoice Detail layout.
  2. Using the Button tool in the Status toolbar create two buttons and place them at the bottom of the layout, leaving them with the Default style.
    1. Create PDF
    2. Create Email
  3. Set the Create PDF button to perform View | Send PDF with a parameter of “view”.
  4. Set the Create Email button to perform View | Send PDF with a parameter of “send”.
  5. Adjust the Autosizing in the Position tab of the Inspector for each button to anchor bottom and right.

Step 5 - Review your work

You’ve completed building Invoice PDF. Go to Browse mode and test it.

  1. You should be able to navigate to an invoice and view a PDF of the invoice.
  2. You should be able to send a PDF of the invoice via email.