[How To] Generate Barcodes in ERPNext using JsBarcode library

Frappe Framework Customization
1

To generate bar codes from ERPNext JsBarcode can be very helpful. Sharing the code snippet so that it is useful for anyone that has a similar need.

The below example is based on the bar code symbology code128. The fields starting with “custom_” are the custom fields you may have to add on your Doctype based on your requirement.

frappe.ui.form.on ("Sales Invoice", "event_name", function (frm, cdt, cdn) {
var cur_doc = frm.doc;
if (cur_doc.custom_barcode_generated === 0) {
            if(cur_doc.custom_bar_code){
            	$(frm.fields_dict['custom_barcode_image'].wrapper).html('<svg id="code128"></svg>');
            	$.getScript("/files/Path to your JSBarcode file", function( data, textStatus, jqxhr ) {
				  JsBarcode("#code128", cur_doc.custom_bar_code, {
				       background: "#FFFFFF"
				  });
				  var svg = $('#code128').parent().html();
				  frappe.model.set_value(cur_doc.doctype, cur_doc.name, "custom_barcode_svg", svg);
				  frappe.model.set_value(cur_doc.doctype, cur_doc.name, "custom_barcode_generated", 1);
				  cur_frm.save();
				});
			} else 
			{
                		frappe.msgprint(__("Please enter Barcode to to be printed"));
     		}
        } 
 });

After this you can use the custom SVG field on your print format to generate the barcoded image

Bar_Code
Bar_Code797×248 12.3 KB

Note: The custom script is dependent on Jquery

19 Likes
2

Thanks for nice explaination.
what is field type for “custom_barcode_image”? I had tried with image. then it display, but not saved
what is field type of “custom_barcode_svg”?

3

Is it possible to get this incorporated into the core system?

That would be a huge benefit for the newest of users that may not want the headache of interfacing to a 3rd party software to create labels. It also makes adding barcodes to reports and documents much nicer.

There are several open source barcode technologies in the wild now and putting some of them to use in ERPNext is a great idea. A lot of people use code 128 and now many more are turning to QR codes, Aztec, and the latest UPC (and variants).

Would like to see this make it to the core system at some point.

BKM

5 Likes
4

custom_barcode_svg field should be of the type code. The field type you have for image is correct.

5

JSbarcode Lib is already there in V11.

So we can make use of it to print barcode in any printformat.
We have been using the below code snippet in v10

<svg class="barcode"
				jsbarcode-margin="0"
				jsbarcode-margintop="0"
				jsbarcode-marginbottom="1"
				jsbarcode-height="25"
				jsbarcode-width="1"
				jsbarcode-fontsize="12"
				jsbarcode-flat="true"
				jsbarcode-value="{{ doc.barcode}}"/></br>
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.9.0/dist/JsBarcode.all.min.js"></script>
<script>
JsBarcode(".barcode").init();
</script>

Using this we were able to print barcode on pos sales invoice receipts (Receipt Number as barcode), Item barcode in label print of 1.5cm X 1cm as well as sales invoice in A4 size.

@akurungadam replace the below line with the new one for V11.
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.9.0/dist/JsBarcode.all.min.js"></script>

2 Likes
6

Where is this located?

7

I am not sure about it in V11.

its always better to use from the CDN server

8

Can u give me details about this module bcz i am looking auto barcode generation and printing setup in v12
i am using erp next in textile shop but some item come without barcode so i want generate auto barcode and printing
i hope this module will support this

9

can we use it in doctype.js file store this in image field

10

Yes as long as it can read the file.