Create a Print-Friendly Invoice Page
This guide walks you through building a print-friendly invoice page in your Knack app — one that displays your company branding, customer details, line items, and order totals in a clean, printable layout.
Use Case
If you need to generate and print invoices directly from your Knack app, this guide shows you how to set up a dedicated invoice print page using a combination of Rich Text, Details, and Grid views.
This follows the same structure used in the Quotes and Invoices sample app.
[Screenshot placeholder: Live App invoice print page showing company logo, customer info, line items, and totals]
Requirements
Before starting, make sure your app is set up with the tables and connections from the How to Build an Orders App guide. You'll need:
- An Orders table
- A Line Items table (connected to Orders)
- A Products table
- A Customers table (connected to Orders)
You'll also need Users enabled in your app with at least one user role (this guide uses a role called "Sales").
Steps
1. Add a Status Field to the Orders Table
In the Data section of the Next-Gen Builder, open the Orders table and add a new Multiple Choice field named Status with the following options:
- Quote
- Invoice
- Paid
[Screenshot placeholder: Status field settings in the Next-Gen Builder showing three multiple choice options]
2. Add a Page to Manage Invoices
In the Pages section of the Builder, create a new login page. Enable logins, restrict access to the appropriate user role (e.g., "Sales"), and name it something like Manage Invoices.
[Screenshot placeholder: New page creation panel in Next-Gen Builder with login and role settings visible]
On this page, add the following views:
- A Grid view displaying Orders records
- Links from each row to a child Order Details page
- On that details page: an Orders Details view and a Grid view displaying connected Line Items
[Screenshot placeholder: Page tree showing Manage Invoices parent page and Order Details child page]
Filter the Grid to Show Invoices Only
Click on the Orders Grid view to open the view editor. In the Source settings, add a filter: Status is Invoice. This ensures only invoice-stage orders appear.
You can also rename this view from "Orders" to "Invoices" in the Settings section of the view editor.
[Screenshot placeholder: Grid view Source settings with Status = Invoice filter applied]
3. Build the Invoice Print Page
Navigate to the Order Details child page. This is where you'll assemble the print-friendly invoice layout using multiple views stacked in sequence.
The final page will include:
- Company logo and address (Rich Text view)
- Customer info and invoice details (Details view)
- Line items (Grid view)
- Order totals (second Details view)
[Screenshot placeholder: Print preview of the completed invoice page]
Add a Rich Text View for Branding
Click Add View and select Rich Text. Drag this view to the top of the page — it needs to be the first view in the stack.
In the Rich Text editor, add your static content: the word "Invoice," your company name, address, and logo.
[Screenshot placeholder: Rich Text view editor with company name, address, and "Invoice" heading entered]
Tip: See the Rich Text views article for instructions on adding images/logos to a Rich Text view.
Configure the Details View for Customer & Invoice Info
Click on the existing Orders Details view to open the editor. Remove the view title in the Settings section.
Details views support a multi-column layout. Arrange your fields as follows:
- Right column: Invoice Date and Invoice Number
- Left column: Customer name and address (accessed by clicking the arrow next to Orders in the Fields panel and selecting Customers)
For the customer Name field: click the pencil icon, set it to Hide Label, and change the style to H2.
For the Address field: click the pencil icon and select Hide Label.
[Screenshot placeholder: Details view editor showing left/right column layout with customer and invoice fields]
Clean Up the Line Items Grid
Click on the Line Items Grid view. Remove any fields you don't want to appear on the invoice using the trash icon. Also remove the view title in Settings.
[Screenshot placeholder: Line Items Grid view editor with unnecessary fields removed]
Add a Totals Details View
Click Add View and add a new Details view connected to this page's Order record. In the view editor, add a single field — your Total (or Subtotal, Tax, and Total, depending on your setup) — and save.
[Screenshot placeholder: Second Details view editor showing the Total field added in a single row]
4. Enable Printing
On the Order Details page, open the Settings tab and enable "Show a link to print this page." Save your changes.
[Screenshot placeholder: Page Settings panel on Order Details page with print link option enabled]
Your invoice print page is ready. In the Live App, navigate to an invoice record and click the Print link in the top-right corner.
[Screenshot placeholder: Live App Order Details page with Print link visible]
[Screenshot placeholder: Browser print preview of the completed invoice]
Limitations & Workarounds
No Bulk Printing of Multiple Invoices
This setup allows printing one invoice at a time from the Order Details page. If you need to print multiple invoices in a single action, see the Limitations & Workarounds section of the Printing Pages & PDFs article for available options including grid/list view printing and CSV export.
No Page Break Control
Knack does not currently support enforcing page breaks between records. For single-record invoices printed from the Details page, this is generally not an issue. However, if your invoice is long enough to span multiple pages, you won't be able to control where the break occurs.
Need a More Polished PDF?
For customer-facing PDFs with precise formatting and layout control, consider integrating with Formstack Documents. This allows Knack data to populate a professionally designed PDF template. You can also post a project in the Knack Expert Network to connect with a developer for a custom solution.
Related Articles
Updated 27 days ago