EasyBarcode

by JanSTP

 

Easy !

Scanning barcodes in FileMaker is very easy. We can use a barcode scanner as keybord input or in FM Go we can even use the iPhone’s camera to scan barcodes and put the result directly in one of our fields. But generating the barcodes was not that easy… till now!
Meet the EasyBarcode custom function. Yes, its just a custom function! In fact, the only two things you need is the custom function and a webviewer!

 

Update: 2016.03.21: EasyBarcode v2: Possibility to save the barcode as PNG in container!

Update: 2016.09.09: EasyBarcode v2.1: saving as PNG also works on Windows now!

Update: 2017.06.27: EasyBarcode v2.2: works in FM16 now. ( new ‘extended privilege set’: fmurlscript )

Update: 2017.12.15: EasyBarcode v2.3: rotate barcode 90° and EAN13 barcode also takes 12 digit values.

Check the filemaker file: EasyBarcode_20171215a.fmp12 for the latest version of the custom function.

 

This is what you do:

1. Place a webviewer on your layout.

2. Put the EasyBarcode custom function in the webviewer.

3. Pass a value to the EasyBarcode custom function. ( You probably want to feed it a field value )

4.  READY!

 

Easy but Powerful

It’s not because the EasyBarcode function is so easy to use, that this means its simple. No, on the contrary. If you want, you can fully adjust the barcode to your needs!

When passing only a value to the EasyBarcode custom function, it generates a CODE128 barcode with following default specs: width = 1 px, height = 40 px, quite zone = 0 px,  value displayed, white backgroundcolor and black barcode bars.

But all this params can be changed, simply by passing them to the custom function. Try it yourself by changing the params under the barcode…
At this moment the EasyBarcode can generate following barcode types:
   – CODE128
   – CODE39
   – EAN(13) / UPC
   – ITF
   – ITF14
   – Pharmacode

general

How it works?

The key technique is the JavaScript in the custom function who generates the HTML5 code to display the barcode. The JavaScript, created by Johan Lindell, is free to use under the MIT License.

 

Advantages

  – Easy to implement
  – Free
  – Fast ( aprox. 30ms / barcode )
    ( generating a PDF with 1000 barcodes took me 30s )
  – Works without internet connection!
  – Works on FileMaker Pro ( win/mac ) & Go

 

New in version 2: save barcode as PNG in container!

Because many people asked me on the blog if it is possible to save the barcode as a picture and I constantly had to say “No 🙁 “, I took a little time to get it working!
How? You can now specify a new parameter: script, in the custom function.
This script will be triggered in your file when the barcode is generated. The barcode is passed as a base64 string. The string is then decoded and saved as a picture in a container field with the result below: the barcode in a container!

 

67 responses to “EasyBarcode”

  1. BT says:

    Two things:
    – Is there any way to make webviewer background transparent (or at least custom color) only barcode background works fine.
    – Any possibility to make it work in webdirect?

    thanx

    • JanSTP says:

      Hi BT,

      Thx for your comment.

      I’ve updated the code and the background of the webviewer follows the background of the barcode now.

      The EasyBarcode function is indeed not working in WebDirect.
      For the moment I don’t have a solution for that.

      Grts,

      Jan

  2. Patrick says:

    This is absolutely brilliant! Thank you for allowing use of this barcode generator and taking the time to share.

  3. Agentshevy says:

    I have downloaded the file.. cant seem to get it to work because it is not generating the barcodes… or maybe it is but they aint visible.. Am I missing something here?

    • JanSTP says:

      Hi,

      Normally it should work… What FM version are you using? What platform?
      When you downloaded the sample file, did you had a barcode then?

      Grts,

      Jan

      • Agentshevy says:

        I use filemaker advance 13, on windows 7. When I downloaded the file, I just tested it with the default values it came with. It wasnt displaying. I tried to change the value to something simple like 123456, still wasnt working.

        • JanSTP says:

          Hi,

          It works fine on my Windows 7 machine…
          It is just a bunch of JavaScript in the webviewer. So I suppose there is a setting in your default browser ( used by FM ) that does not let the javascript render the image.

          Maybe try it once on another machine?
          Sorry, but I don’t have a direct solution for you…

          Grts,

          Jan

          • Agentshevy says:

            I have tried it on a friend’s pc (running w7 professional), same result. I will keep trying anyways to find solution. Thanks a bunch for your work..

  4. Agentshevy says:

    ok thanks.. Is there a way I can skip the browser stuff? like do a print out to ascertain that it is actually working. Just incase it is my browser settings that is causing it not to display?

  5. Big up and massive respect to Jan for uploading this, and Johan Lindell for giving the javascript to the open source community… As you say, so so easy and so fast too. Very cool. Works fine in F12 too, though it’s an F13 file. Many many thx, Tom

  6. Bernard Cheang says:

    Doesn’t seem to work in Windows… is there any way to make it work?

    • JanSTP says:

      Hi,

      Works fine on my VirtualMachines ( Windows 7 and Windows Server 2012 R2 ) on my Mac.
      FileMaker uses your browser to display the barcode in a webviewer. Maybe you have restrictions there that block the JavaScript?
      Or something else…?

      Grts,

      Jan

  7. Majid says:

    Hello,

    I think this tool is amazing. The only issue I have is that the barcode comes out blurry when I print. Any idea on how to increase the resolution?

    Thank you,
    Majid

    • JanSTP says:

      Hi Majid,

      Maybe try ‘printing’ to pdf.
      Is it oké there? Then print that document to the printer

      Also check your driver of your printer.

      We had same issues with other barcode plugins in the past an the printer driver was the problem then… so maybe that is also the issue here?

      Grts,

      Jan

  8. Steve says:

    Hello,

    This is a great use of the web viewer, thank-you!

    Our application requires 2D barcodes. What would be needed to generate them?

    Thanks,
    Steve

    • JanSTP says:

      Hi Steve,

      Check out:
      https://github.com/metafloor/bwip-js

      There you can find the source javascript code to create nearly all types of barcodes. You could take the code. Put it in a global field and just replace the value by your value and then display it in a webviewer.

      I was not able to make a custom function for that because I’m limited to 30.000 chars in the calculation screen…

      Grts,

      JanSTP

  9. Denis Landry says:

    Hi,
    This is an excellent function.

    How I can download this module to implement in my FM14 database ?

    Thank you

    DLA

    • JanSTP says:

      Hi DLA,

      You can click on the filename in the first paragraph of this module to download the demofile…
      The custom function is in it. Just copy past it to your solution.
      ( you will need FileMaker Pro ADVANCED to edit/add custom functions )

      Grts,

      Jan

  10. Dimolden says:

    Thank you Jan,
    I found exactly where’s my problem was… Actually I don’t have the “Advanced” version. So I’ll probably upgrade to it for maximum functionality ! 🙂

    Tnx

    DLA

  11. Fanny says:

    I don’t know who you wrote this for but you helped a brehtor out.

  12. Ash says:

    Great function, I had to modifiy it for our needs slightly as we were trying to print barcodes on a Label printer but it would not go lower than a width of 1. just removed your round check and sorted, thanks!

  13. Thomas says:

    Hallo!
    Can i change the width with 0.5 ? The Barcode is too large

    Thanks

    • JanSTP says:

      I didn’t checked this if the barcode still works.
      You can try. Maybe you will need to change a little bit in the function itself because I think I round the number.
      If you need help, let me know.

  14. Pep Espunyes says:

    Is there a way to put the barcode in a container as an image?

    • JanSTP says:

      Not directly. I think there is a way to get the result of your webviewer and transform it to a base64 image, but I do not know how. ( I’m not an expert on that matter ) If you find it, let me know!

    • JanSTP says:

      Hi,

      Check out the new version of EasyBarcode!
      I implemented a way to store the barcode as a PNG in a container file!

      Grts,

      Jan

  15. Lance Wright says:

    I’m curious if the barcode field can be rotated?

    When I attempt to do so, the Rotate option is greyed out.

    Nice software, BTW.

  16. John says:

    Hi

    Very nice app.

    I get this error when I edit or print the layout.

    Loading “data:text/html,
    and never ends

    And has an skip button, if I do it continue.

    Im using FM14 Pro Adv

    What can be?

    • JanSTP says:

      Hi John,

      I didn’t get this error. Can you send me a screenshot? ( jan.stieperaere[at]clickworks.eu )
      Or more details? I can’t reproduce it.

      Grts,

      Jan

  17. brittany tremor says:

    Hi, I’m having a devil of a time trying to figure out how to insert this into my database. Is there a more detailed step by step instructions?

    Thanks so much
    Brittany Tremor

    • JanSTP says:

      Hi Brittany,

      Do you have FileMaker Pro ADVANCED?
      You will need to have the ‘advanced’ version in order to copy the Custom Function.

      Grts,

      JanSTP

  18. LeslieP says:

    I am having the same problem of FM (14 Pro) showing Loading: “data:text/html, when entering preview mode. The only thing I can do to get it to enter preview mode is to click the Skip button that’s on the dialog. Did anyone figure this one out? Thanks!!
    P.S. Thanks for such a wonderful function!

  19. LeslieP says:

    Hey I made some headway on my issue. If I remove the final parameter (the script name) I no longer get the “loading” message.

  20. David says:

    Hi Jan.

    Do you have a version of this that works in FileMaker 12? This looks like the perfect solution for us but we can’t upgrade to v13 at the moment.

  21. Marcel says:

    Hi Jan..
    Great tool, easy to implement, but…
    As seen before in these comments: tool works like a charm on a mac, but fails consistently on Windows machines. I’ve spend several hours, in the Internet options of Internet Explorer, following guidelines to activate Javascript, but no luck. Does anybody reported a solution for this problem?

    Should work out of the box, just like (almost anything) on my mac.

  22. Marty says:

    Hi, this is amazing! Nice Work. Has anyone been able to print barcodes on a Zebra printer? We would like to make weather proof bar code labels on equipment.

    Thanks

    Marty

    • JanSTP says:

      Hi Marty,

      This should work on a Zebra printer.
      Be sure to check the print settings in the driver of the Zebra printer.
      There are different options for printing images. Choose the one that gives the best result for you.

      Regards,

      Jan

  23. Scott Saunders says:

    Great Tool! Can it be rotated so it can be printed via Dymo LabelWriter 450?

    • JanSTP says:

      Hi Scott,

      No, for the moment it is not possible to rotate the barcode.
      But can’t you rotate the layout through print setup. Change the layout from portrait to landscape?
      But then you would need to change the rotation of the text (if any) on your label.

      Grts,

      Jan

  24. This seems like a great simple alternative: http://www.barcodes4.me/apidocumentation

    I just tested it with a simple insert from URL script step, worked brilliantly. Limitations are that it requires and internet connection and only supports the following formats:
    Code 39
    Code 128a
    Code 128b
    Code 128c
    4 of 5 Interleaved

    Also, QR codes!

  25. Mc128k says:

    Did a cleaner solution that generates a BMP file with a custom function, without webview or js code.
    http://www.mc128k.info/2015/12/codici-a-barre-su-filemaker-con-una-funzione/

  26. cw says:

    Is it possible to integrate the barcode into a Text Field?
    My database needs a custom label function. The labels must include other text items and field values.
    Basically, on the left is a list of Labels. On the right is a mockup of the label sheet ( 3 x 10 ).
    The idea is to drag a label from the list on the left to any location on the mockup to the right. This will provide the ability to print any label in any position on the sheet. It needs to be a single Text field in order to drag its entire contents.
    Does that make sense? Or if you have another solution for this concept, I would appreciate it.
    I can send you a PDF example.
    Thank You.

  27. Jeff Krichton says:

    Where in the custom function do you add the table and field (Shipments::POnumber) to pickup the text to convert to a barcode.

    Jeff

    • JanSTP says:

      Hi Jeff,

      You do not need to change anything in the custom function itself.
      Just change the first parameter input of the custom function to your field.
      Enter layout mode, double click on the webviewer, there you can change the params you give the custom function…
      ( see screenshot )

  28. Kevin says:

    Hi Jan,

    thanks for this great tool!
    Iam using FileMaker 16 Pro Advanced on Mac. Alway when I change the “value” field it opens FileMaker 15 Pro.app.
    So if I want to print a layout that contains the web viewer, the script hangs. I have the same problem in your
    sample file.
    Do you have any idea?

    Thanks in advance

    Kevin

    • JanSTP says:

      Hi Kevin,

      Thanks for your post.
      This has to do with the fact that the FMP protocol is used to trigger FileMaker back from the webviewer with the barcode png data.
      He does this in the version that was first openend… so if you close entirely your FileMaker 15, it won’t happen. Normally in a user environment, a user has only one version of FileMaker open.
      But if you do not want this to happen, you can empty the last parameter given to the function. This is the script that has to be called when the barcode is generated. If you leave this empty, FileMaker would not be triggered back, but of-coarse, then you will also not have the png of the barcode and only the one in the webviewer.

      Kind regards,

      Jan Stieperaere
      ClickWorks

  29. Martin says:

    Brilliant function – thanks

    I have a layout that contains two web viewers – only the first one ever prints. cant get the second barcode to print.

    Any ideas gratefully received

  30. Phil (PhilModJunk) says:

    This custom function has nicely done what I need, but I’ve hit a weird glitch in how the image is scaled in its web viewer in FileMaker 16 on a windows 7 system. In some cases, the image displays scaled much larger than in other cases even though the parameter values input have not been changed.

    I’ve made a parallel report with screen shots here: https://community.filemaker.com/message/744196

    Not sure if this is a web viewer issue or a java script issue.

    Do you have any idea?

    • JanSTP says:

      Hi Phil,

      I never seen this issue and the problem is, I only have a Mac to test with… so I can’t reproduce this phenomena.

      I hope someone else will have a answer for you in the FileMaker Community.

      Kind regards,

      Jan

  31. Harold Sookman says:

    I used the older version and wanted to add the png function. We want to print really small barcodes (Jewellry) and I thought the png might work better than a web viewer. When I plugged in the new version, I kept getting “No access” errors that I couldn’t get rid of. It seems to be related to the display in the container. The error comes up whenever it redraws. I am logged in with Full Access. Any idea as to what could cause this? FileMaker Advanced 16.0.5 on OS X 10.13.14 (High Sierra).

    Thanks in advance.
    Harold

    • JanSTP says:

      Hi Harold,

      There is a new extended privilege set in FMP16 to allow an external program to run scripts in your file. I think this is the problem you have here. Go to Manage > Security and add the extended privile to your account.

      Regards,

      Jan

  32. Andrew Chuang says:

    Any ideas how to get this print smaller labels from within filemaker? Just a little wide for my existing labels!

    Thx!

  33. Andrew Chuang says:

    Per my previous comment, need to have printed vertically as well!

    • JanSTP says:

      Hi Andrew again,

      In the latest version of EasyBarcode you have the option to rotate the barcode.
      Download the latest example file.

      Regards,

      Jan

  34. Simon says:

    Hi Jan
    We would need a 2D datamatrix code with the following string:
    /-/#46#29032018124811#190068
    Is this possible with your tool?

    • JanSTP says:

      Hi Simon,

      No, this is not possible for now.
      I only have 1D barcode formats in it for now.

      The thing is that the barcode is generated by a bunch of javascript code.
      Because it is in 1 custom function, I’m limited to 30.000chars.

      When I created this tool, there was no library available for QR codes below 30.000chars.
      I think there is now, but I didn’t had the time to look at it and implement it.

      Kind regards,

      Jan

  35. Andrew Chuang says:

    Thx for the response Jan. Only on windows machine so printing at 50% is not an option. Wish there was something that could be modified in the code to print smaller labels.

    Excellent solution though, even if it isn’t application to my situation!

  36. Dear Jan,

    First of all, thanks for the EasyBarcode Tool.

    When I am printing Labels there is always a window with the following message:

    Laden: “data:text/html,

    and I need to hit ESC to start the print.

    Laden = German for Loading / Load
    The rest of the message corresponds to the header of the EasyBarcode Function …

    I am using Web Viewer in the Label Layout and not the BacodeContainer field.
    This because the print quality in (fast) text mode is better on a Dymo LabelWriter …
    Filemaker 13
    EasyBarcode 20171215

    Any adwise ?
    Thanks
    Al

    • JanSTP says:

      Hi Al,

      I suppose you are working on Windows?
      I don’t have a quick solution I’m afraid.
      In browse mode, you don’t have any problems and the barcode is generated?

      Kind regards,

      Jan

  37. Albert says:

    Thanks, this is great!!

Leave a Reply

Your email address will not be published. Required fields are marked *