How Knack Works
Design Your Database
Manage Your Records
Build Your Live Application
View and Share Your App
Do More With Knack
Connect Related Data
Users & Access
Calculations & Logic
Emails & Notifications
Search & Queries
Reporting & Dashboards
E-Commerce & Payments
Objects & Connections
Plan Your Connections: Complex Example
Working With Objects
Plan Your Connections: Simple Example
Plan Your Objects
Use Connections in Your App
Connecting Records Together
Connections: Troubleshooting & FAQs
Numeric Equation Functions
Date Equation Settings
Numeric Equation Settings
Text Formula Functions
CSV Format Guide for Importing
Working with Records
Deleting a Page That's Being Linked to
Working with Pages
Navigating the Page Preview
Printing Pages & PDFs
Table Column Settings
Source: Which Records Will the View Display
Using Action Links
Combining Fields from Connected Records in Views
Using Record Rules
Using Display Rules
Using Submit Rules
Users & Logins
Users and the Page Menu
Manage Roles & Permissions
Single Sign-On with Google, Facebook, Twitter, and Custom
Manage User Records
Logins and Registrations
Live App Security Settings: HIPAA Plans
Live App Security Settings
Tasks & Emails
How do I cancel my Knack account?
I'm over the storage limit for my account. How do I add more storage or get under the limit?
Need account access or to transfer account access because account owner or colleague left the company
I'm over the record limit for my account. How do I add more records or get under the limit?
Is there an option to pay via invoice, check, wire transfer, or something other than a credit card?
How do I freeze or pause my Knack account?
Where can I find a copy of my receipt or invoice?
How do I add more API calls to my account?
How do I change the favicon for my app?
How do I backup or export my apps and data?
How can I track what users are doing in my app?
How do I remove the "Powered by Knack" logo at the bottom of my app?
How do I give Builder access to a colleague or developer for one of my apps?
How do I white label my app?
How do I copy an app from my account to another account?
How do I show multiple dates on a calendar?
How do I add a logo to my app?
How do I find the most recent date from a connected object?
How do I create a field that always shows today's date?
Can I share or connect data between apps?
How do I create an "If, Then" or conditional equation?
How do I merge my apps, or copy pages, objects, or other app elements between my apps?
The menu isn't showing for my app on mobile devices. How do I fix that?
Is there a way to have new users be automatically logged-in after they register?
How do I bulk upload or import multiple files?
How do I move or copy fields or data from one object to another?
How can I show a customer's payment history if I'm collecting payments through my Knack app and through cash or check?
Is there a way to add a display rule to multiple columns at one time instead of having to update each column individually?
Do I need a separate user role object for my Vendors, Customers, Employees, Contacts, etc?
How can I set up my app so users see only their own data?
Can I combine two date fields into a single date field? For example, combining a start and end date into a single field?
Does Knack offer a service for building apps or have developers I can hire?
How do I bulk upload or import multiple images?
How can I change the color of something in my app?
Is it possible to display more than 100 records at a time on a table, list, or search view?
Can I migrate or transfer data from Zoho, Quickbase, or TrackVia?
Can I add chat or messaging to my app?
Can I sell my Knack apps?
Can I use Knack on mobile devices?
Do you have a sandbox or developer environment?
Can I send SMS or text messages using Knack?
Can I integrate Knack with other data, products, and services?
Can I create invoices and accept payments?
Can I have an app in a language besides English?
Can I email PDFs or other attachments to users with Knack?
Can I add Google Analytics to my Knack app?
Can I migrate my Access, Filemaker, SQL, or other databases?
Can I prototype for others?
Can I customize the look and feel of my Knack pages?
Can I use a barcode or credit card scanner with Knack?
Does Knack offer access to beta features?
How secure is Knack?
Does the signature captured through a signature field constitute a legally binding signature?
Does Knack offer a partner program?
How does Knack work on mobile devices? Is it mobile-friendly? Can users download my apps?
Is Knack GDPR compliant?
Storing sensitive data (credit cards, social security numbers, etc.)
Will Knack sign an NDA (Non-Disclosure Agreement)?
Which browsers do you support?
How do I batch download all of the images and files In my app?
I'm seeing an odd character when importing data. How can I get rid of it?
How do I update existing data using an import?
My import is failing or getting stuck. What do I do?
Can I undo or reverse an import?
I'm having trouble importing into a specific type of field. What can I do?
Some of my fields aren't importing correctly. How can I fix that?
I'm having trouble importing into a connection field. What can I do?
Can I import something other than data? Like objects, pages, views, etc?
My import is taking a long time. Can you take a look?
I'm getting an error when importing. What do I do?
Do the validation rules on fields trigger when importing data?
Can I schedule or automate imports?
Can my users import data from the live app, instead of going through the builder/back-end?
I am importing data for the first time. How do I do that?
Can I import data into more than one object at the same time?
How To Guides
Add Functionality to Your Live App
How To Create Discount Codes
Create an Add To Favorites Feature
How to Access Private Records Without a Login
Accept Payments in a Live App
Manage Your Records
Use an Edit Form to Create Records If They Don't Exist
Track Which User Last Updated a Record
Copy a Record Using Record Rules
Track When Records are Created and Updated
Create a Version History for Records
Use Zapier to Insert Connected Records
Work with Connected Records
How to Show Multiple Fields in Your Connection Drop-Down
Showing Parent-Child Records in the Live App
How to Create Dynamic Dropdowns in Forms
Add Read-Only Fields to a Form
How to Change the Layout of Forms
Create a Multi-Part Form
How to Allow Users to Add New Options in Forms
How to Add Instructions to a Form
How to Customize the Text on a Submit Button
How to Automatically Capture a User’s Location on a Form
How to Use URL Variables to Pre-Populate a Form
How to Add a Map to a Details View
How to Add Connection Links to Views
How to Add Inline Editing to a Table
Create a Print-Friendly Invoice Page
How to Click on an Image to Go to Another Page
How to Add Groupings to a Table
Users & Logins
Force Users to Reset Their Passwords
Save a User's Payment Method
Create a Single Login Page for Multiple User Roles
Add Read-Only Access For Users
Show Records Connected To The Logged-in User's Company Or Other Group
Show Records Connected to the Logged-in User
Create an Admin User Role to View All Records
Workflow & Automations
Add a Pipeline to Your App
Create a Registration Form with Limited Availability
Add Stages to Your App
Store Multiple Images or Files for Individual Records
Use Multiple Image Sources for a Single Image Field
Create a Button or Link that Updates a Field to a Custom Value
Notify a User That an Item is Ready for Review
Add Assignments to Your App
Approve New Records Before Displaying Them
Add Notification & Reminder Emails to Your App
Add Status Indicators to Your App
Logic, Equations & Formulas
Start an Auto Increment Field from Any Number
Display a Message When a Deadline is Approaching
Generate Simple Numeric Barcodes Automatically
How to Set a Random ID
Calculate Age in Years from a Birthday
How To Number Line Items
Show Upcoming Birthdays
How to Extract the Start and End Dates from a Date Field
How to Display Multiple Date Formats Using a Single Date Field
Reports, Queries, and Summaries
Build an Inventory Manager App
Build a Quiz App
Build a Warehouse Manager App
Build a Member Directory
Build an Orders App
Build a Map Directory or Store Locator App
Images & Files
Manage Your Account
Manage Your Account
About Knack Accounts
Account Plans and Billing
Managing Your Apps
Managing Your Account Settings
Sharing Apps with Shared Builders
App Settings: Map Provider
Script Attack Protection: Whitelisted Custom Code Elements and Attributes
Script Attack Protection: Protected Areas
Security & Infrastructure
Security Best Practices
Builder Security Settings for All Knack Plans
Builder Two-Factor Authentication
Table of Contents
Updated by Danielle Kellogg
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 green "+" 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. Give the page a name, in this example we will name the page "Manage Invoices".
On that new page add a table view displaying Order records with the following selections:
- 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.
On your new Manage Invoices page, click the table displaying Order records to edit the view.
In the 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.”
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 by clicking the "Add View" button in the top menu and selecting the rich text view type.
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 the company name and address.
You can read more about how to add the logo to this Rich Text view in our "Rich Text: Adding Images" help article.
Below the rich text view, we will use the existing details view to display the rest of the invoice information.
Click on the details view to open the view editor. Remove the details view title from the Settings section of the view editor.
Details views can display fields in three columns. Now you can arrange your fields in the details views.
The right column 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 column 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.
In this view, you will only need to add a field in a single row. In that group, add your order total field:
Save changes to go back to the 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: