Home
Documentation
  1. How-To Guides

Generate Simple Numeric Barcodes Automatically

Learn how to automatically generate scannable barcodes from a number field in your Knack app using a text formula field and custom CSS.

What You'll Learn

You can automatically generate scannable barcodes from numeric values stored in your Knack app. This article walks through setting up a number field, a text formula field, and the CSS needed to render the barcode on a details page.

How This Works

Knack doesn't have a built-in barcode field type, but you can create one using two fields and a bit of custom CSS:

  1. A number field stores the value (for example, an order number).
  2. A text formula field mirrors that value so you can display it with a barcode font.
  3. Custom CSS applies a barcode font to the text formula field, turning the number into a scannable image.

The reason you need a separate text formula field is that the barcode font renders the value as a barcode wherever it's displayed. Keeping the original number field intact means you can still show the human-readable number alongside the barcode.

📘

Font compatibility note

The example below uses Code 39 (Azalea font). Not all scanners read every barcode format, so confirm your scanner supports Code 39 before relying on this setup.

Step 1: Add a Number Field and a Text Formula Field

Start by adding the two fields to the table that holds your records.

  1. Add a Number field. In this example, we'll call it Order Number.
  2. Add a Text Formula field. In this example, we'll call it Barcode.
  3. In the Text Formula field, reference the Order Number field so the value duplicates.

See Text Formula Fields for how to reference one field inside another.

Step 2: Find the Text Formula Field Key

The CSS needs to target the specific field, so you'll need its field key.

  1. Open the Data section of the Builder and select your table.
  2. Open the Barcode field's settings.
  3. Copy the field key (it will look like field_123).

Step 3: Add the Font and CSS to Your App

Add the barcode font and styling rules to your app's custom CSS. This loads the Code 39 font and applies it to the text formula field.

Copy the CSS below and paste it into your app's CSS area. Replace field_168 with your Barcode field's actual field key.

@font-face {
  font-family: Code39AzaleaFont;
  src: url('https://s3.amazonaws.com/kn-includes/fonts/Code39Azalea.eot') format('embedded-opentype'),
       url('https://s3.amazonaws.com/kn-includes/fonts/Code39Azalea.woff') format('woff'),
       url('https://s3.amazonaws.com/kn-includes/fonts/Code39Azalea.ttf') format('truetype'),
       url('https://s3.amazonaws.com/kn-includes/fonts/Code39Azalea.svg#Code39Azalea') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* Replace field_168 with your own field key */
/* Adjust font-size to fit your layout */
.field_168 span {
  font-size: 80px;
  font-family: Code39AzaleaFont;
}

.field_168 span:before {
  content: "*";
}

.field_168 span:after {
  content: "*";
}

The :before and :after pseudo-elements add the asterisks that Code 39 barcodes require as start and stop characters.

⚠️

CSS applies everywhere the field shows

This CSS renders the field as a barcode anywhere the Barcode field appears in your app. Keeping the original Order Number field separate means users can still see the readable number. If you only want the barcode to appear on a specific page, add a page-specific class or ID to the CSS selectors.

Step 4: Display the Barcode on a Details Page

Add the Barcode field to a Details Element so it renders for each record.

  1. Create or open the page where you want the barcode to appear.
  2. Add a Details Element, or open an existing one.
  3. Add the Barcode field to the element.
  4. Set the field's label format to None - hide label so the label doesn't also render as a barcode.

Preview your live app. The Barcode field should now display as a scannable Code 39 barcode.

Troubleshooting

Barcode doesn't scan correctly. Confirm your scanner supports Code 39 barcodes. Some scanners are configured for specific formats like UPC or Code 128 and won't read Code 39.

Field shows numbers instead of a barcode. Check that:

  • The field key in your CSS matches the Barcode field's actual key.
  • The font URLs are loading (open your browser's developer tools to check for 404 errors).
  • The CSS was saved in the app's CSS area.

Label is also showing as a barcode. Edit the field in the Details Element and set the label format to None - hide label.

Next Steps

Updated 21 days ago