How I Built An App in 15 Minutes On Knack to Manage Vendors

This is how I built, step-by-step, an app for managing vendors and suppliers using Knack. It took me less than 15 minutes.

In today’s fast-paced business world, effective supplier and vendor management is crucial for maintaining a streamlined supply chain and ensuring the success of your organization. Managing suppliers and vendors efficiently can be a complex task, but with the advent of no-code development platforms like Knack, building custom applications to streamline these processes has become easier than ever before. In this blog post, we will accompany a step-by-step video tutorial demonstrating building a supplier and vendor management app in just 15 minutes using Knack’s powerful no-code tools.

Why Knack?

Knack is a leading no-code platform that empowers users to build web and mobile applications without traditional coding skills. With its intuitive drag-and-drop interface and extensive customization options, Knack allows you to create robust, tailored solutions for your organization’s specific needs. By leveraging Knack’s features, you can save time, reduce costs, and improve operational efficiency by quickly developing powerful apps without a dedicated development team.

Step-by-Step App Build by Knack Expert, Carl Holmes

Setting up Data Structure

Step one, give your app a name and add the app. 

We need to add the first table. To do so, you need to add fields. We can import this from a spreadsheet or a CSV file or choose one of the templated options for companies, employees, or contacts. Here, we’re going to build our table from scratch. My first table is going to be called “Suppliers”.

We now have one table called “Suppliers” and one field or column called Supplier Name”. You can click on these fields to get into the settings, and we can make this one unique. To add additional fields, click the add-field button.

On the left-hand side, you’ll be presented with several field options for different data types. In this example of a quick prototype, I want to add a few basic fields. For this table, I will add an address field, which I can click and drag and drop. I can then click on the field to enter into the settings.

I will make this a required field. If you’re on a pro plan or above, you can enable mapping and auto-address complete. I will leave the format as U.S. And go back into adding fields, scroll down to personal, and add a phone number. If you click the field directly from here, it’ll pop up, and you can change the label’s name, make it required unique, and change the format.

In this case, I’m going to go for “Any” I’m then going to add a link field, rename this to a website, and choose the option that when it’s clicked, it opens in a new browser tab or window. I want to capture which industry this supplier’s in, so a good way to do that is with a multi-choice field. I’ll rename the label to industry, and you can either type your options here or go to quick edit, type them or copy and paste, and then save.

I want this as a required field, so I checked the box for required. The layout of a dropdown “one selection” is fine. I’m also going to add a paragraph field to describe the supplier.

Finally, I’d like to add an image field for the company logo. I return to my data builder. I have my “Suppliers” table with all my fields. I currently don’t have any records, so you can import your records from a CSV or add them one at a time by clicking on add record and filling in the form. Once again, this is the builder; this isn’t the live app.

I’ve now added three records to my “Suppliers” table. Next, I’d like to add a table for invoices to show invoices related to each supplier. I add a new table once again from scratch. And as before, I will add the fields for my invoice. My first field is an auto-increment, which I’ll use as an order ID.

I will then add a date/time field to capture its due date. I’ll change the default date from the current date and set that as none. A paragraph text is filled for a description of the invoice. I’ll also add a file field so we can upload a copy of the invoice. I will then add a currency field to capture the invoice value and a multi-choice field for the invoice status.

Setting up Connections

I’m going to set the layout to radio buttons. The first field, “invoice name”, is automatically created when the table is set up. I will delete this field because I don’t need it. I need to connect my invoices to the supplier because each invoice will need to be connected. In Knack, that’s a very simple solution by using the connections. You don’t need to worry about foreign keys and primary keys. We simply need to connect our invoices by connecting the invoice table to the supplier’s table. Click choose “Suppliers” from the dropdown list. Here, each invoice connects with one supplier, and each supplier connects with many invoices so that we can add that connection.

Depending on where your fields are, they’ll be like your columns in a spreadsheet. I want to put this supplier underneath my older numbers. You can drag and drop these around as you wish so people can log into the application. We need to enable users, so I will set up a couple of user roles.

Setting up User Roles

User roles define what people can access and which pages they can view. I’m going to add an admin role and a client role. The user roles sit underneath the accounts object. The accounts object is the top level; every user role sits underneath. Every user has an account and is defined by their user role. Knack provides standard user role fields, which can’t be deleted. Currently, we don’t have any records. I will go into the admin user role and add a record.

I’ve added their name, email, password – the user status is active so they can access the application and their user role is admin. I’ve also done the same for the client role and added the name, email, and password. Going back to the “Suppliers” table, we have three suppliers, and the one I’m focusing on is InvoTech.

InvoTech is the supplier, and if I go into invoices and look at the fields’ view earlier on, we connected the invoices to the supplier table via this connection. I’ve added some invoices here, two for Stellar, two for InvoTech, and two for Bricks and Mortar. These two here are the two invoices I’d like our client to be able to see.

I need to go into the client user role and add a connection so that John Smith is connected to Invotech. That way, when he logs in, I can show invoices connected to the same company he’s connected to. This is very simple in Knack. Go to the fields’ view, and I can add a connection here. I can connect it to the “Suppliers”.

Each client connects with one supplier, and each supplier can have many clients. I will drag and move my supplier field to the top. When I go to the records view, it’s the first column, and I will click on it here. I have a list of suppliers, and I want to select Invotech, and I can connect John to Invotech.

Setting up Pages and Views

Now, for this prototype application, we have our schema or tables all set up correctly. I can now add the live app pages. On the left, go to the Pages section, and you’ll see that all of my pages are listed here. I currently have a homepage, a default page added by Knack automatically. 

I need to add my first page. I want to create is a page for the admin to see a list of suppliers. I click on the green “add new page”, and I need to create a login page rather than an open public page. I need to limit this to certain permissions by user role for admin. I will call this page “Suppliers” and add my page.

Knack provides several ready-to-use components, broken down into different sections per records, static views, reports, and e-commerce. In this case, I want to add a grid, which will display a table of suppliers so I can click on the grid. And then it asks me which records I want to display in the grid. I choose “Suppliers”, and now you can see on a preview on the right-hand side what this will look like.

Knack has automatically added the columns, a search by keyword, and a filters button. To this view, I can also add additional links such as an edit link, which now appears on the right-hand side so I can edit the supplier and the details page as well. I can also add view. From here, I can add another grid, which is connected to invoices.

I click continue. I can now name this view. “Suppliers” is the name given. I’ll add that to my page. I’d also like to add another view so I can add a new supplier, and I can do that by adding a form. Click on “add form”, and make sure it says that you want to add a new record and I want to add a supplier.

The view name of “Add Supplier” is fine, and I’d like to link it to a form from a menu. The menu name will be called Add Supplier and Knack has automatically created a button on a menu, which I can now save. I don’t need to update any of the settings here, so I can click away from it to deselect. And now I can grab the handle and move my button above the table.

I have a menu with a button which takes me to a page to add a new record. And I can click on this orange, navigate to the page, and it will show me in the tree on the left-hand side where this page is. As I click, you can see it moves me to the add supplier page where I can add their name, address, and more

If I go back to the top level, which is suppliers, this is my “Suppliers” table. On the right-hand side, I have a link that will take me to this edit page so I can edit my supplier. I have a link here, which also lets me view the supplier. I have two views on this page which Knack automatically created.

For me, the top view is the supplier’s details, and the table of related invoices is underneath. Before I view this in the live app, I’m also going to build a view for the client to log into a client portal effectively. I will add another login page and limit this to a specific user role of “Client”. I’m gonna call this page “Invoices”.

Once again, I can select one of the options here. I will use a grid to display the invoices connected to this company. Which records do I want to display? In this case, it will be invoiced, but I don’t want to display all invoices. That would mean that John would be able to see invoices from every company as shown here.

I need to show invoices connected to the same supplier connected to the logged-in client, and then click continue. Once again, I have the option to be able to put edit links, but I don’t want to give John the ability to edit. I could give him a details view here, which would give him a view link on the right hand side.

In this case, I’m not going to, so I will click continue. I don’t need to link this from a button. This table is fine, and I can add it, so I return to the pages section and can now see that I have two sections that I can collapse. One requires a login for suppliers and one for invoices. Under the “Suppliers” section, you have a view that shows the table for suppliers with a page to add a supplier, edit “Supplier”, and see their details.

Then, there is the portal here for invoices, which is only accessible to the client. You can see from clicking on the padlock here, the login page. This is a client, and if I come onto the suppliers page, this is for admins. To view this in the live app is very easy in Knack; there’s no integration that you need to do with web hosting.

You can view this now by using the Go to Live app links. In the top right-hand corner, you can select a page. I have a suppliers page and an invoice page. If I was to click this, it would open in a new tab, or I could copy this link here and then paste it into the browser. If I just click on suppliers, it takes me to a login page to put in my email address and password and then sign in.

As an admin, I can see all three suppliers and have the option to be able to edit the supplier and also view their details. So if I click on InvoTech, I now have a view at the top of all the details for the company, and below that are the invoices related to that company. We can also click on these links to view a copy of the invoice. 

Returning to the builder, I can do the same on invoices so that I can send this unique URL to my client, and when they click on that, it will open a login page. I’m about to log in as John, and you can see from the URL here that I’m on the supplier invoices page. When I sign in, I will see an invoices page at the top and only see invoices related to the same company that I’m connected to with the option still to click on the link for the invoice itself.

Configuring the Frontend UX

Returning to the builder, I’d like to draw your attention to the settings. Knack has various settings under the live app design. This allows you to customize how your application looks and feels. I’d encourage you to look at each section and customize and change the application’s colors to suit.

After a few minutes of further development, I can show you what the application would now look like. After a few minutes of customization, all without using any code, I’ve changed the look and feel of this application. Now when you click on Add Supplier, it opens in a pop-up box in a two-column layout.

When you click on the description, you can view more and less. I have colored links to be able to edit the record. And then when you view the record, I’ve changed the layout and the look and feel of the supplier information at the top and added in an interactive map with a link to Google Maps. You also have a button to add an invoice, which opens in a pop-up box as well.

As I’m sure you’ll appreciate, this is a quick prototype build. You’d want to develop and improve this over time, but Knack has a very powerful and flexible tool. Eventually, you may want to integrate this with other systems and applications and start to automate your workflows even further.

Build this App in 15 Minutes for Free with Knack

With Knack, you can start building for free through their 14-day trial. However, if you follow this tutorial, you can start seeing return-on-investment within just 15 minutes.

Start building with Knack >>