Generate Simple Numeric Barcodes Automatically

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 of 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: "*";
}

 

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.

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.

 

Then, if you preview your app and look at this details page, you can see that the barcode font is being used for that text formula field 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/