Related Posts
In this video, I’m going to build a prototype no-code supplier invoicing application using Knack. It allows an administrator to create and view suppliers and manage their individual invoices. Each supplier can then securely log in and view the status and details of their individual invoices.
Getting Started in Knack
Once you’ve logged into your Knack account, click Add App. You can choose to start with a template—Knack offers a wide range of CRM, inventory tracking, and project management templates. But in this video, we’re starting from scratch.
Click Start App From Scratch, give your app a name, and add it. We’re now inside the builder—commonly called the backend of the database—and we need to add our first table.
Creating the Suppliers Table
Think of a table like a spreadsheet, with rows and columns. We start by adding fields (columns). You can import from a spreadsheet or CSV, or build your table manually. We’ll create the first table and call it Suppliers.
We now have a Suppliers table with one field called “Supplier Name.” Click on any field to update its settings (e.g., make it unique). Click Add Field to add more. On the left, you’ll see a variety of field types.
For this prototype, I’ll add:
- An Address field (with optional mapping and autocomplete for Pro plans)
- A Phone Number field (set to “Any” format)
- A Link field renamed to “Website” (set to open in a new tab)
- A Multi-Choice field for “Industry” (using Quick Edit to add options)
- A Paragraph field for descriptions
- An Image field for the company logo
After that, the Suppliers table is ready. You can add records manually or import from CSV. I’ve added three sample records.
Creating the Invoices Table
Next, I’ll create an Invoices table from scratch.
Fields I’ll add:
- Auto-Increment field for Order ID
- Date/Time field for due date (default set to none)
- Paragraph field for invoice description
- File field for uploading the invoice
- Currency field for invoice amount
- Multi-Choice field for invoice status (radio buttons layout)
I’ll delete the default Invoice Name field since we don’t need it.
Connecting Invoices to Suppliers
Each invoice needs to be linked to a supplier. In Knack, you don’t need to worry about foreign keys—just use connections. From the Invoices table, choose to connect to the Suppliers table. Each invoice connects to one supplier, and each supplier can have many invoices.
You can drag and rearrange fields like columns in a spreadsheet. I’ve placed the Supplier connection field under the Order ID.
Setting Up User Roles
To allow people to log into the app, enable Users and define User Roles—this controls which pages users can access.
I’ve created two user roles:
- Admin
- Client
Each role sits under the Accounts object, which is the parent of all users. Each user has an account and is assigned a role. I’ve added one admin and one client manually by filling in name, email, password, and marking them as active.
Connecting Clients to Suppliers
Back in the Suppliers table, I’ve added two invoices for Invotech, which is the company I want our sample client to see. To make that possible, I connect the client user (John Smith) to Invotech.
From the Client user role, I add a connection field to Suppliers. Each client connects to one supplier, and each supplier can have many clients. I moved the Supplier field to the top for easy access and connected John to Invotech.
Creating Admin Pages
Now our database schema is ready. Let’s build the live app pages.
In the Pages section, click Add New Page. Create a Login Page limited to Admin users. I’ll name it “Suppliers.”
Knack provides ready-to-use components—grids, forms, reports, and more. I’ll add a Grid to display supplier records. Knack automatically adds the fields, a keyword search, and filter options.
I’ll also:
- Add an Edit link
- Add a Details Page
- Add a Grid of connected invoices for each supplier
- Add a Form to create new suppliers (with a menu button labeled “Add Supplier”)
- Move the button above the table
When I click the orange navigate icon, it takes me to the Add Supplier page. Back in the main Suppliers page, I now have edit and view links, and Knack has created a two-section layout: supplier info at the top and related invoices below.
Creating a Client Portal
Let’s build a page for clients to view their invoices. Add another Login Page, limited to the Client user role. I’ll name it “Invoices.”
Add a Grid view of invoices, but filter them to only show invoices connected to the same supplier that the logged-in client is connected to.
I’ll skip the Edit and Details links here—clients only need to view their records. Save the view.
Now, in the Pages section, I have two collapsible sections:
- The Admin section, which includes all supplier-related pages
- The Client section, which includes the invoice portal
The padlock icons indicate login restrictions based on user role.
Previewing the Live App
Knack makes it easy to view your live app—no external hosting needed. Use the Go to Live App link in the top right.
Clicking on the Suppliers page link opens the login page. As an Admin, I can now:
- View all suppliers
- Edit records
- View supplier details
- See related invoices
- Click to view invoice files
To test the client side, I log in as John, using the Invoices link. The page shows only invoices connected to Invotech, since that’s the company he’s linked to.
Customizing the App Design
Under the Settings tab, Knack gives you access to the Live App Design panel. You can customize:
- App colors
- Layout styles
- Buttons and formatting
I spent a few minutes customizing the app—still no code required.
Now:
- The Add Supplier form opens in a two-column popup
- Description fields support “view more/view less”
- Edit links are color-coded
- Supplier views have been redesigned
- An interactive Google Map has been added
- Invoices can be added from a popup as well
Wrap-Up
As you can see, this was a very quick prototype build. Over time, you’d want to refine and improve it, but even with minimal effort, Knack proves to be a powerful and flexible tool.
Eventually, you could integrate this app with other platforms and start to automate your workflows even further.