How to Create a Code Page in Quickbase

Getting Started in Quickbase

Code Pages are robust Quickbase tools. While advanced, knowing how to set up one can help you get more out of the app. Learn more.

One of the most useful tools for creating a robust Quickbase application is a Code Page. This Page Type allows you to create markup documents using HTML, JavaScript, CSS, or XML.

This functionality is definitely more pro-code than low-code. However, it’s a great place to begin expanding your Quickbase creativity. Plus, there are plenty of tutorials out there to get you started, including this one.

Sample Use Cases:

Code pages can be used to accomplish just about anything you can imagine (and write!). Here are some ideas to get you started:

✓ Dynamically generated invoices or other documents. ✓ Data import interfaces with customized user experience and error checking. ✓ Automated processes beyond the limits of Actions and Automations. ✓ Enhanced mapping functionality with Google Maps. See more here!

The Quickbase side of creating a Code Page:

This example will demonstrate how to create a new Code Page and allow users to access it via a button on their Home Page.

The rest of the code is up to you!

  1. From your Home Page, navigate to Settings > Pages and click + New Page.

  2. Select Code Page and click Create.

Image: a screenshot of a web page with a new page highlighted

  1. Enter a PAGE NAME, paste your code in the text area below, and click Save. You can also write your code directly in the input. However, I’m going to assume you’re using a text editor (please be using a text editor, if not VSCode is highly recommend and free!).

Image: a screenshot of a web page with a text box

  1. Buttons are the most common way to access a Code Page. Add a new button on your Home Page by selecting Customize this Page and selecting your PAGE NAME from the Page tab property.

Image: a screenshot of the new record page in wordpress

  1. After saving your page, test the button by clicking it. Congratulations, you’ve successfully created your first Code Page!

Image: a close up of a text description on a white background

EDITORS NOTE: You are not limited to Home Page buttons when linking to a Code Page. You can use any table URL buttons and also pass in record-specific parameters!

Check out our articles on Implementing Custom Imports and Google Maps for Data Visualization to get an idea of how Code Pages can be used to create a more powerful user experience.

To get started with HTML/CSS check out this free introduction at Khan Academy, and download VSCode to begin writing code.