Generating barcode in Retool (not scanning)

Discussion
#1

Hey everybody,
Have been building some simple tools in Retool and am having a great time with it. Barcode scanning is working great but we would love to be able to generate our own barcode's to scan into our ERP software. Does anyone have a method to do this within Retool using a custom component or an image?

Thanks

#2

You can use JsBarcode - Barcode generator written in JavaScript
And add the js library to either the app or your entire Retool platform.
See: Preloaded JavaScript and Libraries

1 Like
#4

CDN link to JsBarcode: https://cdnjs.com/libraries/jsbarcode

1 Like
#5

@ScottR could you please provide an example.
I believe that I have the JsBarcode library installed for my app, but I cant seem to get it to render.

#6

Did you add it to the app itself or to your retool instance overall? Screenshot?

#7

I added it to the retool instance, or atleast I think I did by adding it into the advanced pane below:

Screen Shot 2023-01-26 at 3.30.21 PM
Screen Shot 2023-01-26 at 3.30.21 PM1110×432 39.9 KB

#8

I had some help and the issues were:

  1. I tried to import the js library in the wrong place.
  2. It would be easier to return a base64encoded image from a function than try to replace an object in the dom. (add the following to the app js):
function textToBase64Barcode(text){
    var canvas = document.createElement("canvas");
    JsBarcode(canvas,text.text , {format: text.format});
    return canvas.toDataURL("image/png");
}

then in an image:
{{ textToBase64Barcode({"text":"your text","format":""}) }}

1 Like