Creating EAN13 Barcode from number fields

Help Center Get Answers
1

I have been trying to create EAN13 Barcode from number fields, but without success. With some fonts in the CSS i can create barcodes, but these are not read by a scanner. Has anyone done this or know how to do it? It will be appreciated big!

2

Hi

I have often used Integromat to create Barcodes and store them back into Knack as Images - and their Barcode module does do EAN13. Here is a screenshot of a typical ‘Scenario’:

Screenshot 2021-08-06 at 12.21.13
Screenshot 2021-08-06 at 12.21.131321×802 71.4 KB

Hope this helps!

Julian

2 Likes
3

Dear Julian,

Thank you very much. It seems to work here too. But the only problem is that it creates barcode only for one record. How can I set it to create barcode for all records? Thank you in advance.

4

I always create barcodes by adding a class in the CSS to handle the barcode font/size etc. I then use javascript to add the class to the desired field. This solution will display the barcodes in the Knack application, but will not have them stored as an image anywhere. It also doesn’t require any third party connections.

Here’s an example of how I am doing it with my barcodes:

BE SURE TO CHANGE TO YOUR FONT TYPE AND CHANGE YOUR VIEW_ID AND FIELD ID

CSS

@font-face {
    font-family: 'Libre Barcode 39';
    font-style: normal;
    font-weight: 400;
    src: local('Libre Barcode 39 Regular'), local('LibreBarcode39-Regular'), url(https://fonts.gstatic.com/s/librebarcode39/v10/-nFnOHM08vwC6h8Li1eQnP_AHzI2G_Bx0g.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

.barcode39-with-label{
    font-family: 'Libre Barcode 39 Text', cursive;
    font-size: 3.5em;
    user-select: none;
}

JavaScript

//change your field id
const addBarcode = () => {
  const barcodeField = 'field_xx';
  Knack.$(`.${barcodeField}`).addClass('barcode39-with-label')
}

//change your view to a specific view key or 'any'
$(document).on('knack-view-render.view_xx', function(event, view, data) {
  addBarcode();
});
2 Likes
5

Hi Naim

Not sure if you prefer to have the barcodes as images or use the css method - but you can easily get Integromat to read multiple records (with the Search Records module) and then update them.

Integromat is a fantastic sidekick to Knack - effectively providing a no code programming tool. This seems appropriate to me after all we have all chosen Knack because we don’t want to code.

I have quite a few articles about this at www.onlinedatabase.expert

Julian

1 Like
6

wow ! love this for its simplicity :pray:

7

Thank you very much. I have done this, but unfortunately this doesn’t work either.

8

Hi @Naim,

I know this post is a bit old, but the topic is still very actual.

I’ve just finished implementing 1D barcode support as a complement to QR Codes in the KTL.

See this post for details: https://forums.knack.com/t/barcode-scanner-integration-and-auto-click-submit/16078

Here are the features:

Supports these formats:

  • CODE128
  • EAN / UPC
  • CODE39
  • ITF-14
  • MSI
  • Pharmacode
  • Codabar

Comes from here: https://github.com/lindell/JsBarcode

It will parse the code, extract the data and populate the fields, including dropdown connections.
You can specify the field source, code size and auto-submit the form with an optional delay.

Try it here: https://ctrnd.knack.com/ktl-tutorials#ktl-demo-page/barcodes/barcode-reading-automation/

Currently, only fixed length barcodes are supported, but I will soon implement variable-length data with user-specified separators.

Have fun!
Norm