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.

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 the following example, we named this number field "Order Number".

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

Steps

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.

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.

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-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: Embedded apps can now display application header and fonts.

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. 

 

 

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.