Add a Signature to a Transaction Template

Once a customer e-signs a transaction using the signature component, you can display this on the transaction template.

Updated over a week ago

If your customer has accepted a transaction with their signature, you can display an image of the signature on the print template.

Capturing the signature is done using the Signature Component. The component will hold all the information you need, including the image of the signature in its Signature URL. However, this information is connected to the transaction record, and not a field in the transaction for you to use when creating the print template.

So, in order to show the signature on a print template, you will need to:

Note: This article assumes you have basic knowledge on how to customize screens and customize reports using the web report designer. It will also assume you have a screen that is using the signature component, and will not show you how to create a screen to capture signatures.

The following scenarios will use the Estimate transaction as an example.

Create a custom field to hold the signature image URL

If a signature has been captured in an estimate, you will need to a field to store the URL in the estimate table.

1. Click the profile icon and select Account SettingsTables & Fields.

2. Find your transaction table (e.g. Estimate) and select it.

3. Click New Field and give it an appropriate field name, e.g. SignatureImage. Keep the default Text Field Type and Size.

4. Save this field.

Save the signature image URL in the custom field

Now that the new field is created, you have a place to save the sig image URL. The problem is, when and where should you do it?

Normally, the best practice is to populate this field when Accept is clicked on the signature component. However, you may have a number of signatures already stored for a number of transactions and this field would be empty for those transactions.

To ensure attached signatures are available on every transaction, we will update the table when a Method user clicks print when viewing a transaction. Note, however, that there are a couple of places a print report can be generated. In our example, an estimate can be printed from the estimates screen, but it can also be printed from the portal by the customer. The best practice still would be to ensure all transactions with a signature has had their SignatureImage field updated properly.

In this example, we will show update the field from the Print button on the New / Edit Estimate screen.

1. Navigate to and customize the New / Edit Estimate screen.

2. Find and edit the Click event of the Print button. It may be called Print1 on your screen.

3. Before the Generate Report action, add an Assign Value to Action Result action.

4. Configure the Assign Value to Action Result action as follows:

  • Assign the value: Signature - Signature URL

  • Give it a name: resultSignatureURL

  • Internal Notes: "resultSignatureURL = Signature - Signature URL"

5. Underneath the above action, add an Update Fields in Table action.

6. Configure the Update Fields in Table action as follows:

  • Select a table: Estimate

  • Update Records Where: RecordID = Screen Active Record ID

  • Field(s) to update: SignatureImage

  • Update using this value: resultSignatureURL

  • Internal notes: "Update SignatureImage with resultSignatureURL"

You're done, this should properly update your custom SignatureImage field. The resulting action set should look like this:

Customize the print template

Now all that's left is to edit the print template in the Web Report Designer. The template you edit is dependent on whatever transaction template you have set for your transaction.

It is best practice to make a copy of your template before you start editing it. In the below example, we are using the Printable Estimate.

1. Go to Account SettingsReports & Print Templates.

2. Search and find your template (e.g. Printable Estimate), and click Launch builder.

3. First, I will create a text label and call it "Signature". I will style it to match the style of the current report.

4. Drag in a Picture Box where you want the signature to display.

5. Select the Picture Box and change its properties. Under Actions:

  • IMAGE URL: Expand the menus and find SignatureImage within the Estimate table.

  • Sizing: Change the sizing to Zoom Image. This will force the signature to fit in the size of the picture box.

  • Alignment: Top Left

6. Save and close the the template.

You're done. When you create the transaction now, you should see the signature printed on the transaction, as displayed below.

Did this answer your question?