1. Knowledge Base
  2. How-To Guides
  3. Logic, Equations, & Formulas

Generate Simple Numeric Barcodes Automatically

This article will explain how to generate barcodes based on a number from each record by utilizing a text formula field, a number field, and a bit of CSS.

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.


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

  1. A number field that you want to display as a barcode; in the following example, we named this number field "Order Number".

  2. A details page where you want to display the actual barcode.

Note: 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.



These series of steps we 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 number field to your table which we will name "Order Number". 

  2. Add a Text Formula field to your table which we will name "Barcode".

  3. Add the "Font Include" and CSS Styles to the API & Code Section of the Builder.

  4. Add the Text Formula Field to a details page.

1.  Add a Number and a Text Formula Field

First, we need to ensure we have a number field added to the table. Then, we need to add a new text formula field to the table that uses the Order Number field.

The text formula field will duplicate the value in the Order Number field so that we can see both the barcode and the order number.

The easiest way to do this without maintaining two separate number fields is to use a text formula field that simply references the existing Order Number field.

Tip: Learn more about adding text formula fields in this article here


2. Add the "Font Include" and CSS Styles

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

Tip:  You can learn 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, select the icon highlighted below in the image. After doing that, you will then find the field key shown below the name of the field:


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

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


Note: Please note that this code example uses the Azalea 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: Embedded apps can now display application header and fonts.

Note: The CSS shared in this article 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. Learn more about using CSS in our developer documentation.

3.  Create a Details Page and Add the Text Formula Field to the Details View

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.

We can add a page from the Pages section of the Builder by selecting the "+" button to the right of "All Pages". Then, we can add a grid view to this page and include a link to view the details of the record which will create the details page that is needed for these steps. 


Note: The barcode field in the details view has the label format set to "None - hide label" to hide the label (see image below). 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 the details view.


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


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