Table of Contents

Generate Simple Numeric Barcodes Automatically

Lesley Updated by Lesley

Scenario

This article will explain how to generate barcodes based on a number from each record. In this scenario, we will be using an Order Number field to generate the barcode.

Requirements

In order for this to work, you'll need the following:

  1. A number field that you want to display as a barcode, in this example we named this field "Order Number".
  2. A details page where you want to display the actual barcode.

It is important to note that some older web browsers will not support this. IE9 and greater as well as modern versions Firefox, Safari, and Chrome (including mobile versions of Safari and Chrome) should be fine.

Steps

This recipe will use add a new text formula field that will mirror the value from your existing number field. This new text formula field will be used to display a scannable barcode on a details page.

  1. Add a Text Formula Field
  2. Add the Font Include and CSS Styles
  3. Add the Text Formula Field to the Details Page

Add a Text Formula Field

First, we need to add a new text formula field to the table with your Order Number field. This will duplicate the value in the Order Number field so we can see both the barcode and the Order Number.

The easiest way to do that without maintaining two separate number fields is to use a text formula field that simply references your existing Order Number field. You can read more about adding text formula fields here.

Add the Font Include and CSS Styles

The font include is added with CSS that you'll add right into the API & Code section of the Builder. In order for this to work in your app, you'll need to find your text formula field's ID number.

You can read more about using CSS with your app here.

In the Data section of the Builder, select the table containing the field you're working with. Then, open the text formula field from the previous step. With the text formula field open, look at the URL bar. There you will see the field number in the URL. It will look similar to this:

https://builder.knack.com/account/app#data/object_1/fields/field_168

Once you have your field ID, you can copy the code below and paste it into your own app's CSS tab making sure you update the field ID values. Note that you can also add this to your own custom stylesheet if you're embedding the app into another website.

@font-face
{
font-family: Code39AzaleaFont;
src: url('https://s3.amazonaws.com/kn-includes/fonts/Code39Azalea.eot') format('embedded-opentype'), /* IE9 Compat Modes */
url('https://s3.amazonaws.com/kn-includes/fonts/Code39Azalea.woff') format('woff'), /* Modern Browsers */
url('https://s3.amazonaws.com/kn-includes/fonts/Code39Azalea.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://s3.amazonaws.com/kn-includes/fonts/Code39Azalea.svg#Code39Azalea') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
}

/* These field IDs will need to be changed to match your app */
/* You can also make changes to the font-size here if you need to */

.field_168 span { font-size: 80px; font-family: Code39AzaleaFont }
  
.field_168 span:before 
{ 
content: "*";
}
  
.field_168 span:after
{
    content: "*";
}
Please note that this code example does use Azelia font. This format may not be readable by all scanners.

You can use custom CSS in your app to change the font for generating your UPC. Please check out this example in our developer documentation for more information: How to change a page’s font.

This CSS will cause the text formula field to show a barcode wherever it is displayed throughout the app. This is okay in this example because we have a separate Order Number field that we can use as well. If you need to limit it only to show the barcode on a specific page or view, you can add some additional classes or IDs to the CSS.

Add the Text Formula Field to the Details Page

Now that you have set up your text formula field and added the CSS to your app, the next step is to add this new text formula field that represents your barcode to the view where you want to display it.

The barcode field in the details view has the label format set to "None - hide label" to hide the label. If the label is not hidden, the label will also be shown as a barcode. This can be updated by editing that specific field in details view.

Then, if you preview your app and look at this details page, you can see the barcode font is being used for that text formula field and instead of showing the actual number.

Notes

If the scanned barcode isn't generating the value that you stored in it, please check to make that the scanner you are using can read code-39 barcodes specifically: https://azaleabarcodes.com/code-39/

How did we do?

Display a Message When a Deadline is Approaching

How to Set a Random ID

Contact