You want to create a print-friendly invoicing page in your app. This page will include your company logo and billing information, customer information, and order details.
In this guide, we will walk through the process of creating a print-friendly invoice page as seen in our Quotes and Invoices demo app.
To create this page, you will first need your app to be set up with the objects and connections outlined in our How to Build an Orders App guide. That includes objects for: Orders, Line Items, Products, and Customers.
You will also need to activate users and add at least one user role to your app. In this guide, the user role will be called Sales.
Add a Status Field to the Orders Object
In the Data section of the Builder, click on the Orders object. Add a new multiple choice field and name it Status:
The Status field will have three options: Quote, Invoice, Paid.
Add a Page to View Orders
Now, go to the Pages section of the Builder. Click the “+ADD” button to add a new page:
For the new page, enable logins and restrict access to the user role that should have access to the invoices page.
Choose the Orders object to display on this page:
For view selection, you will check the boxes that create a:
- A table view to display Orders
- Links to view each Order records on a details page
- An Orders details view
- A table view to display Line Items connected to the page’s Order record.
Rename the page from Orders to Invoices.
On your new Invoices page, click on the gear icon of the new table view to go to the view editor:
In the Data Source section of the table view editor, add a filter to only display Order records where “Status is Invoice.” This is how we will restrict this view to only show our invoices.
You can also rename the view from “Orders” to “Invoices.” The view name displayed in the Live App is controlled in the Columns section (arrow #1). The name displayed in the Builder is controlled in the view’s settings (arrow #2):
In the Live App you will have a table view displaying all your Orders records in the Invoice stage:
Create the Invoice Print Page
Now we are going to edit the order details page to turn it into a print-friendly invoicing page. First, navigate to the details page you recently created by clicking on the “Order Details” link below your Invoices table view:
On the Order Details page, you will see an Orders details view and a table view displaying the connected Line Items.
The final goal is to achieve a page with all the relevant order information and company branded when printed:
We will create this print-friendly page using a combination of rich text, details, and table views.
- Company logo and address
- Customer information and invoice details
- Line items belonging to the invoice
- Invoice tax and total
- Thank you message
The top part of the page is static for all invoices. It displays the word “Invoice,” a company logo, and company billing information. We can create this page in Knack using a rich text view.
On the Order Details page, add a rich text view. You can find the rich text view in the “More” section of the view option on the top bar:
The rich text view will be added below your other views. Drag it so it is above your other views in the Builder. It will contain the content for the top of the print page, so the view must be arranged above all the others.
Then, click on the view to open the rich text view editor:
Add your static content to the rich text view. In this example, we added the word Invoice across the top and used a table to align a logo with the company address:
Below the logo and company are the company and invoice details. We will use the existing details view to display this information.
Click on the details view to open the view editor. First, hover over the field group to reveal the trash icon. Click the icon to delete that group. Then, click on the pencil icon next to the “Order Details” title to delete the title:
On your now blank view, hover over the Layout setting and select the second-to-last option (Two Columns - Right Third):
Click on “Add Group” for each of the columns to create groups to add your fields:
The right group will contain the Invoice Date and Invoice Number fields, so click on those fields in the left-hand Fields column and drag them to the right group if needed:
The left group will contain data from the connected Customers record. To access that data, select the orange arrow next to Orders in the left-hand Fields column and click on Customers. Add the name and address fields to the left group:
Hover over the Customer Name field and click on the pencil icon:
Update the settings to “Hide Label” and change the style to H2:
Submit and hover over the Address field to click the pencil icon. For this field, simply select “Hide Label.”
This view is now complete. Save changes to go back to the order details page.
On the order details page, click on the Line Items table to open the table view editor. In this table, hover over and click on the trash can icon for fields you don’t want to display on the invoice.
Click on the pencil icon next to the “Line Items” title to edit the title, deleting the default “Line Items” text.
Once you have only the fields you want to display on the invoice, this view is complete. Save changes to go back to the order details page.
Now, we’ll add another details view to display the order subtotal, sales tax, and order total. Select a details view from the top view bar:
Add a new details view displaying this page’s Order record:
Once you add the new details view, click on it to open the details view editor. Like you did with the first details view, delete the field group and title. Then, hover over the Layout setting and select the second-to-last option (Two Columns - Right Third).
In this view, you will only need to add a new group for the right column. In that group, add your order total fields:
Save changes to go back to the order details page. It’s time to add the last view for this print page.
Add another rich text view. Click on the view to open the editor. Add your closing text. In this app, we simply wrote “Thank you for your business!”
You can skip the last view if you don’t think it’s necessary. If you add it, you will end up with five views on your order details page:
The last step is to enable printing on this order details page. To do so, go to the page’s Settings tab. Click on the box to “Show Print Link” and save your changes with the “Update Settings” button:
Now you are finished! Go to your new invoice print page in the Live App to preview it:
Click on “view” to see the print-friendly page for a single invoice. You can print this page using the button in the top right to mail or email to your customers.
This is what it looks like in the print preview: