Receipt Designer

   MaestroThe UI design product.  |   Form Builder| |  19.05 This feature was introduced in 19.05.

Maestro allows you to design a receipt using the Receipt Designer feature, which is available in the Maestro editor since version 19.05.

Creating a receipt is very similar to creating a form, so only a basic understanding of form development is required. We will illustrate it with a concrete example where we will:

1. Create a form
2. Create a receipt
3. Download the Form Version Archive file
4. Deploy the form to Manager
5. Test the receipt

Create a form

1. Create a form with First Name and Last Name text fields in your project.



2. Select the Maguire - Default Form template when creating the form to make the form submittable without any further configuration. This isn't strictly necessary though, as we can use a Receipt Test Harness to test the receipt without navigating and submitting the form.

Create a receipt

1. Click Receipts in the same project as the form.



2. Click Create Receipt.



3. Enter a name for the receipt in the Name field.
4. Select the Core - Empty Receipt template from the Template dropdown list. This is the simplest receipt template you can use.



5. Click Create.
Note

In a real-world project, we recommend creating and publishing a custom receipt template based on an existing receipt template. Functionally, receipt templates are identical to form templates, so all standard template practices apply.

6. After the receipt opens in a new window, drag two text fields into the receipt.



For the data from a form to appear in the receipt, the fields need to have the same XML path. To accomplish this, we suggest creating a domain model and sharing it between the receipt and form. In this topic however, we'll just manually ensure the component IDs are the same.

7. Change the ID of the first text field to firstName and the ID of the second text field to lastName. Their labels should automatically regenerate.



Note

By default, XML names are auto-generated based on component IDs. If this option is disabled via the Integration properties, you'll need to manually set the XML names rather than the component IDs.

So far we've recreated the form in the receipt, but typically, receipts will look different from their forms.

Here is one example of how to approach this:

1. Drag a Text Field component into the receipt.
2. Change the ID of the component to fullName.
3. Click Create Rule.
4. Under the Calculation heading, click Script.
5. Copy and paste the following code into the code editor: return data.firstName + " " + data.lastName;
6. Click Save.

This code concatenates the first name and last name into a single line of text.

7. To see this, switch to the Preview tab and fill out the First Name and Last Name fields. The Name field will update with the combined result of these values.

   

   Note

   The dotted outlines in the preview show the page breaks to help you debug receipts.

   To switch off the page break debugging:

   • Select the form root and click the Properties tab.
   • Expand the Receipt and clear the Add Page Break Debug CSS checkbox.

   The receipt preview without the page break is shown below:

   

8. Finally, click Build to make the receipt available to the form.

Download the Form Version Archive file

1. Return to the form and refresh the UI.
2. Click Build > Build and Download TM Form Version to build the form.
3. Enable Use Separate Receipt Design.



4. Select a receipt from the Receipt Version dropdown. If the receipt isn't available, verify that you clicked the Build button in the previous step.



5. Select a version number from the Receipt Version dropdown.
6. Click Build.
7. Click Download TM Form Version to download the Form Version Archive file.

Deploy the form to Manager

1. Log in to Manager.
2. Navigate to Forms > Forms.
3. Click Import Form.
4. Click Browse.
5. Select the Form Version Archive file downloaded in the previous step.
6. Click Upload.
7. Select Create a Form.
8. Click Proceed to Import.
9. Click Import.

For more information, see import forms.

Test the receipt

Rather than testing the receipt by repeatedly submitting the form, use Manager's Receipt Test Harness feature:

1. Navigate to the Form Dashboard for the imported form.
2. Click Receipt Test Harness.



3. Inside the XML Receipt Data field, change the values of the FirstName and LastName fields.



4. Click Test PDF Receipt or Test HTML Receipt.



The receipt contains the data from the form, as shown below:

This is a simple receipt, but it does demonstrate:

• How a receipt can be designed in Maestro
• How data flows from a form and into a receipt
• How form rules can affect the display of data

Now, with these fundamentals, you can easily create more complex receipts.

Next, learn how to edit a form in Design Mode.