Get Started
How Knack Works
Design Your Database
Manage Your Records
Build Your Live Application
View and Share Your App
Do More With Knack
Learn More
Workflow
Connect Related Data
Users & Access
Calculations & Logic
Emails & Notifications
Search & Queries
Reporting & Dashboards
E-Commerce & Payments
Builder Guide
Builder Basics
Tables & Connections
Plan Your Connections: Complex Example
Working With Tables
About Connections
Plan Your Connections: Simple Example
Connection Types
Plan Your Tables
Use Connections in Your App
Connecting Records Together
Special Tables
Connections: Troubleshooting & FAQs
Fields
Numeric Equation Functions
Field Types
Validation Rules
Date Equation Settings
Numeric Equation Settings
Formulas
Equations
Conditional Rules
Text Formulas
About Fields
Text Formula Functions
Records
CSV Format Guide for Importing
Delete Records
Import Records
Export Records
Importing Connections
Working with Records
Batch Updates
Pages
Page Menu
User Pages
Deleting a Page That's Being Linked to
Working with Pages
Navigating the Page Preview
Printing Pages & PDFs
Page Rules
Views
Grid Column Settings
Maps
Source: Which Records Will the View Display
Calendars
Grid Settings
Details
Menus
Using Action Links
Reports
Lists
Rich Text
Combining Fields from Connected Records in Views
Using Record Rules
Forms
Using Display Rules
About Views
Using Submit Rules
Searches
Grids
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
About Users
Live App Security Settings: HIPAA Plans
Live App Security Settings
Tasks & Emails
E-Commerce
App Customization
FAQ
Support
Accounts
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?
Managing Apps
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?
App Building
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 table?
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, tables, 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 table 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 table 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 grid, list, or search view?
Can I?
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?
Other
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?
Imports
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 tables, 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 table 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
Forms
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
Customize Views
How to Add a Map to a Details View
How to Add Connection Links to Views
How to Add Inline Editing to a Grid
Create a Print-Friendly Invoice Page
How to Click on an Image to Go to Another Page
How to Add Groupings to a Grid
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
Using Mailchimp
Approve New Records Before Displaying Them
Workflow Tools
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/Time Field
How to Display Multiple Date Formats Using a Single Date Field
Reports, Queries, and Summaries
App Walkthroughs
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
Knack Status
Data Locations
Builder Security Settings for All Knack Plans
Builder Two-Factor Authentication
Performance
Table of Contents
- All Categories
- Builder Guide
- App Customization
- Live App Design
Live App Design
Updated
by Lesley
The Live App Design section of the Builder allows you to customize global design settings such as the layout, color, font and logo options for your app.
This article will discuss how you can use the Live App Design section of the Knack Builder to customize the look of your Live App.
Accessing Live App Design Settings
You can access the Live App Design settings by clicking on the Settings option on the left-side of the Builder and selecting the ‘Live App Design’ option from the menu:
Here, you can customize the look and feel of your app pages. You can view a preview of any changes made to your live app pages when customizing the color, format, and style of each element in your live app pages as well:
Look & Feel
The Look & Feel section of your app’s design settings will allow you to make global app-wide changes to the page width, text and notifications.
Page Layout
The page width setting allows you to add extra space to the sides of your app container. The default is full-width.
- Full: The Full option will always use the fullest width available.
- Max: Max ensures big screens won't stretch the page too wide.
Text
This is a site-wide setting that will allow you to change the font of your text, as well as the color of links. Text color can be changed on an individual basis in other parts of the Design settings section.
- Font: Choose the global font for your Knack app.
- Link Color: Choose the text color for links in your app. This will affect links, button text, and grid headers.
Buttons
This is where you can customize the colors of buttons in your views:
- Fill Color: Choose the fill color for submit buttons.
- Text Color: Choose the text color for submit buttons.
Notifications
This section allows you to update the look of notifications in your app:
- Text Color: Choose the color of the text within the notification popup.
- Background Color: choose the background color for your notification popups.
Header
The Header section allows you to customize the app header and page menu for your app.
App Header
This section allows you to update the header for your apps. This is where you see your app name and the top level page menu.
Background Color
Choose the background color for your app's header. In the example above, the background color is green.
Text Color
If you choose to display the title of your app using text, the Text Color option allows you to choose the color of that text. In the example above, the Customer Portal App header is white.
Title Display
This is where you can choose to display your app's header as either text or an image/logo. In the example above, the app's header is displayed using Text.
Page Menu
This section allows you to make changes to the page menu that displays in your app’s header. Here, you can choose to have menu options display as buttons or tabs, and change the color of these options as well.
Show for Each Start Page
This toggles whether or not the page menu will appear at the top of your live app pages.
User-based Menu Items
This gives you the option to limit the page menu options that appear on the page based on the user's role. This means that users will only see the page menu options for pages that they have access to.
Format
This is where you can choose how you would like your menu buttons to display. There are 2 options: Buttons or Tabs.
- Buttons: Suggested where the width of your menu options exceed the width of the page, ie. your menus wrap on to the second row of menus.
- Tabs: Suggested where the width of your menu options do not exceed the width of the page, ie. your menus do not wrap on to the second row of your menu:

Text Color
Choose the text color for your page menu. In the example above, the text color is white.
Fill Color
Choose the fill color for your page menu. In the example above, the fill color chosen is green.
Grids
The Grids section allows you to customize the look and feel of the grid views in the Live App.
Format
This section allows you to choose the format of the borders on your grid. Providing either a "clean" option with minimal borders or "borders" which will add borders to your grid.
Row Striping
This will enable alternate background colors for grid rows.
Row Hover
This will enable highlighting on grid rows when hovering over the grid row.
Row Spacing
This will change how grid rows are spaced.
Custom Design Settings
Grid Views can also be customized at the input level. Override defaults and customize the look of Grid Views in the Builder by clicking on the pencil icon for your grid view settings and enabling the "Use Custom Design Settings" option:
Format
This section allows you to choose the format of the borders on your grid. Providing either a "clean" option with minimal borders or "borders" which will add borders to your grid.
Row Striping
This will enable alternate background colors for grid rows.
Row Hover
This will enable highlighting on grid rows when hovering over the grid row.
Row Spacing
This will change how grid rows are spaced.
View Links
The View Links section allows you to customize how links in your views will be styled. Here you will be able to customize the design of your page links, action links and delete links.
Style
This section allows you to change the style of the links, to either Fill, Outline, Text.
- Fill: This option will fill the link with a color (this is the default for new apps).
- Outline: This option will outline the link.
- Text: This option will present the link as text only (this is the legacy style for old apps).
- Legacy: This option has no controls, but enables you to continue using customizations built on the legacy view link selectors
Size
This section allows you to choose the size of your links.
Text Color
This section allows you to change the color of your link text.
Fill Color
This section allows you to change the color of your link fill color.
Outline Color
This section allows you to change the color of your link outline color.
Border
This section allows you to choose if your link will have a thin or thick border and if your border will have rounded corners.
Text Options
This option allows you to transform the text in your link to uppercase or not.
Fill / Outline Options
This section allows you to update the link to look like a button with round corners or a raised look, with a drop shadow.
For the outline style, you will also see an option to make the border thin or thick.
Default Icon
This option allows you to define the default icon that will be displayed alongside your link.
Custom Design Settings
View Links can also be customized at the input level. You can over-ride and customize the look and feel of view links in the Builder by clicking on the field containing the view link in your view, and toggling the "Use Custom Design Settings" option:

There are four style options to choose from:
- Fill

- Outline

- Text

- Legacy
The first three style options come with custom design settings that will allow you to change the look and feel of your view links. Our legacy style option is the default style option, and will adopt the global design settings set on the app level.
Menus
The Menus section allows you to customize global design settings for Menu formats.
Buttons
This section allows you to customize the design of menus that display links as buttons using the following settings:
Style
- Fill
- Outline
- Legacy (does not enable further controls)
Size
- Small
- Medium
- Large
Color (Text, Fill, Outline)
- Use the default link color
- Use a custom color
Text Options
- Uppercase
Other Options
- Outline Options
- Thin
- Thick
- Round corners
- Raised
Tabs
This section allows you to customize the design of menus that display links as tabs using the following settings:
Style
- Fill
- Outline
- Underline
- Legacy (does not enable further controls)
Size
- Small
- Medium
- Large
Color (Text, Fill, Outline, Active)
- Use the default link color
- Use a custom color
Text Options
- Uppercase
Other Options
- Outline Options
- Thin
- Thick
- Underline options
- Thin
- Thick
- Round corners
- Raised
Custom Design Settings
Customize Menu Views at the input level. Enable the "Use Custom Design Settings" option to override defaults and customize the look of menu views by clicking on the pencil icon for your menu view settings.

The customization options are similar to those found under the Global Design Settings including both buttons and tabbed links:
- Style
- Size
- Color (Text, Fill, Outline)
- Text Options
- Other Options
