TIP:Printing multiple Barcode Items

Hi all,
i have made this Page (ERPNext) based on some codes from open source …
Because we have a customer that needs to print Barcodes for all items or the ones he selects so we had to start this… not yet Tuned but works… reason why sharing if anyone needs.

Ps. Need local access Server in order to put the Code in your JS (page). You need to add also Slick.checkboxselectcolumn and slick.rowselectionmodel under you Public JS/Lib

==== CODE
var grid;
var dadoss =[];
var columnpicker = “”;

frappe.pages[‘imprimir-item-barcod’].on_page_load = function(wrapper) {
frappe.imprimir_item_barcod = new frappe.Imprimir_item_barcode(wrapper);
}

frappe.Imprimir_item_barcode = Class.extend({

init: function (parent) {
	frappe.ui.make_app_page({
		parent: parent,
		title: 'Imprimir BarCode para Itens',
		single_column: false
	});

	this.parent = parent;
	this.page = this.parent.page;
	this.page.sidebar.html(`<ul class="module-sidebar-nav overlay-sidebar nav nav-pills nav-stacked"></ul>`);
	this.$sidebar_list = this.page.sidebar.find('ul');


	var me = this;

	console.log('SlickGrid Table...')

	var colunas = []

	var checkboxSelector = new Slick.CheckboxSelectColumn({
		cssClass: "slick-cell-checkboxsel"
	});
	colunas.push(checkboxSelector.getColumnDefinition());

	colunas.push({ id: 'col0', name: 'Codigo', field: 'name', width: 100 },
	           { id: 'col1', name: 'Descricao', field: 'item_name', width: 100},
	           { id: 'col2', name: 'Codigo Barras', field: 'barcode', width: 100},
	           { id: 'col3', name: 'Preco', field: 'preco', width: 50}
    	);


	var opcoes = { 
		    enableCellNavigation: true,
		    enableColumnReorder: false,
		    forceFitColumns: true
	};



	$("<table width='100%>\
			<tr>\
				<td valign='top' width='100%'>\
					<div id='demo_grid' style='width:100%;height:1000px;''></div>\
				</td>\
			</tr>\
	</table>").appendTo($(me.page.wrapper).find('.layout-main-section'));

	
	$("<script src='https://cdn.jsdelivr.net/jsbarcode/3.3.7/JsBarcode.all.min.js'></script> \
		<style> @media print { .page { width:21cm; height:29.7cm; margin: 0; border: initial; border-radius: initial; width: initial; \
		min-height: initial; box-shadow: initial; background: initial; page-break-after: always; } } </style> \
		<div id='block' class='col-12 col-print-12' width:100%> \
			<div class='image-view-body' style='text-align:center;> \
				<a  data-item-code='{{ barcode }}' \
				> \
					<a id='nome' style='text-align:center;font-size:9px'>PP</a>\
					<br><a id='preco' style='text-align:center;font-size:10px'>PRECO</a> \
					<div class='image-field' \
						style='border: 0px;' \
					> \
						<span class='placeholder-text'> \
							<svg id='barcode'></svg>  \
						</span>  \
					</div> \
					<span class='item-info'> \
						<a id='data' style='text-align:center;font-size:9px'>DATA</a> \
					</span> \
				</a> \
				<p style='page-break-after: always'> </p>\
			</div>").appendTo($(me.page.wrapper).find('.layout-main-section'));

	//Select from Item with Barcode
	frappe.call({
		method: "frappe.client.get_list",
		args:{
			doctype: "Item",
			filters: [
				["disabled", "=", 0],
				["barcode", "!=", ""]
			],
			fields: ['name','item_name','barcode','standard_rate']
		},
		callback: function(r){
			if (r.message){
				$.each(r.message, function(i,d){
					dadoss.push({name:d.name,item_name:d.item_name,barcode:d.barcode,preco:d.standard_rate})

				});
			}
		}
				
	});
	
	grid = new Slick.Grid("#demo_grid", dadoss, colunas, opcoes);
	grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow: false}));
	grid.registerPlugin(checkboxSelector);

	columnpicker = new Slick.Controls.ColumnPicker(colunas, grid, opcoes);

	console.log(columnpicker)



	this.message = null;
	this.make();
},

make: function () {
	var me = this;

	this.imprimir = this.page.add_field({
		fieldname:"imprimir",
		label: __("Imprimir"),
		fieldtype: "Button"

	});

	console.log('botao')

	this.imprimir.$input.on("click", function() {	
		console.log('tt print')
		//Select all from table dadoss
		console.log('Select all from table dadoss')
		if (dadoss.length != 0){
			console.log('seelced')
			console.log(grid.getSelectedRows());
			var checkedRows = grid.getSelectedRows();

			var html="<html>";

			console.log(checkedRows)
			if (checkedRows.length !=0){
				for (dd in checkedRows){
					JsBarcode("#barcode", grid.getDataItem(checkedRows[dd]).barcode,{
					    width:1,
					    height:25,
					    fontSize:12,
					    flat: true,	
					    displayValue: true

					});
		

					html+= document.getElementById('block').innerHTML;

					//html+= document.getElementById('nome').value = 'TESTE1';
					html = html.replace('PP', grid.getDataItem(checkedRows[dd]).item_name)
					html = html.replace('PRECO', grid.getDataItem(checkedRows[dd]).preco)
					html = html.replace('DATA', moment(frappe.datetime.now_date()).format('DD-MM-YYYY'))

					html+="</html>";

				}

			}else{

				for (dd in dadoss) {

					//console.log(dd)
					JsBarcode("#barcode", dadoss[dd].barcode,{
					    width:1,
					    height:25,
					    fontSize:12,
					    flat: true,	
					    displayValue: true

					});
		

					html+= document.getElementById('block').innerHTML;

					//html+= document.getElementById('nome').value = 'TESTE1';
					html = html.replace('PP', dadoss[dd].item_name)
					html = html.replace('PRECO', dadoss[dd].preco)
					html = html.replace('DATA', moment(frappe.datetime.now_date()).format('DD-MM-YYYY'))

					html+="</html>";

				}
			}
		

			var printWin = window.open('','','left=0,top=0,width=1350,height=850,toolbar=0,scrollbars=0,status=0,resizable=1');
			printWin.document.write(html);
			printWin.document.close();
			printWin.focus();
			printWin.print();
			printWin.close();	
		}
	})



},

});

In order to use this code you must on V12.

1. Create your PAGE (ex. imprimir-item-barcode) under developer on ERPNext if you have local copy or instance.

Copy this code to the file created under you custom_app/page/imprimir-item-barcode.js

var dadoss =[];
var datatable1 = “”;

frappe.pages[‘imprimir-item-barcod’].on_page_load = function(wrapper) {
frappe.imprimir_item_barcod = new frappe.Imprimir_item_barcodeNEW(wrapper);
}

frappe.Imprimir_item_barcodeNEW = Class.extend({

init: function (parent) {
	frappe.ui.make_app_page({
		parent: parent,
		title: 'Imprimir BarCode para Itens',
		single_column: false
	});

	this.parent = parent;
	this.page = this.parent.page;
	this.page.sidebar.html(`<ul class="module-sidebar-nav overlay-sidebar nav nav-pills nav-stacked"></ul>`);
	this.$sidebar_list = this.page.sidebar.find('ul');


	var me = this;

	console.log('SlickGrid Table...')

	var colunas = []

	
	$("<div width='600px'>\
		<div id='demo_grid' style='width:100%;height:300px;''></div>\
	</div>").appendTo($(me.page.wrapper).find('.layout-main-section'));
	
	
	$("<script src='https://cdn.jsdelivr.net/jsbarcode/3.3.7/JsBarcode.all.min.js'></script> \
		<style> @media print { .page { width:21cm; height:29.7cm; margin: 0; border: initial; border-radius: initial; width: initial; \
		min-height: initial; box-shadow: initial; background: initial; page-break-after: always; } } </style> \
		<div id='block' class='col-12 col-print-12' width:100%> \
			<div class='image-view-body' style='text-align:center;> \
				<a  data-item-code='{{ barcode }}' \
				> \
					<a id='nome' style='text-align:center;font-size:9px'>PP</a>\
					<br><a id='preco' style='text-align:center;font-size:10px'>PRECO</a> \
					<div class='image-field' \
						style='border: 0px;' \
					> \
						<span class='placeholder-text'> \
							<svg id='barcode'></svg>  \
						</span>  \
					</div> \
					<span class='item-info'> \
						<a id='data' style='text-align:center;font-size:9px'>DATA</a> \
					</span> \
				</a> \
				<p style='page-break-after: always'> </p>\
			</div>").appendTo($(me.page.wrapper).find('.layout-main-section'));

	
	//Datable
	const assets = [
		"/assets/frappe/js/lib/Sortable.min.js",
		"/assets/frappe/js/lib/clusterize.min.js",
		"/assets/frappe/js/lib/Sortable.min.js",
		"/assets/frappe/js/lib/frappe-datatable.js"
	];

	//Select from Item with Barcode
	frappe.call({
		method: "custom_app.api.getitem_barcode",
		args:{
		},
		callback: function(r){
			if (r.message){
				
				$.each(r.message, function(i,d){
					dadoss.push({Codigo:d.name,Nome:d.item_name,Barcode:d.barcode,Preco:d.standard_rate})
			
				});
				console.log(typeof(dadoss))
				console.log(dadoss)
				console.log(Object.values(dadoss))

				frappe.require(assets, () => {
					console.log("Assets Loaded");
					datatable1 = new DataTable('#demo_grid', {							
						columns: [
							'Codigo',
							'Nome',
							'Barcode',
							'Preco'
						],
						data: Object.values(dadoss),
						//clusterize: false,
						addCheckboxColumn: true,
						checkboxColumn: true,
						checkboxSelector: true,
						CheckboxSelectColumn: true,
						freezeMessage: "..Please Wait.."
					});
					console.log(datatable1);
			
					const options = {
						events: {
							onCheckRow(row) {
								console.log('clic')
							}
						}
					}
		
				});

			}
		}
				
	});

	this.message = null;
	this.make();
	console.log('dados')
},


make: function () {
	var me = this;

	this.imprimir = this.page.add_field({
		fieldname:"imprimir",
		label: __("Imprimir"),
		fieldtype: "Button"

	});

	console.log('botao')

	this.imprimir.$input.on("click", function() {	
		console.log('tt print')
		//Select all from table dadoss
		console.log('Select all from table dadoss')
		if (dadoss.length != 0){
			console.log('seelced')
			console.log(datatable1);
			console.log(datatable1.rowmanager.getCheckedRows());
			var checkedRows = datatable1.rowmanager.getCheckedRows();

			var html="<html>";

			console.log(checkedRows)
			if (checkedRows.length !=0){
				for (dd in checkedRows){
					if (checkedRows[dd] != null){
						JsBarcode("#barcode",datatable1.datamanager.data[datatable1.rowmanager.getCheckedRows()[dd]].Barcode,{
							width:1,
							height:25,
							fontSize:12,
							flat: true,	
							displayValue: true

						});
			

						html+= document.getElementById('block').innerHTML;

						html = html.replace('PP', datatable1.datamanager.data[checkedRows[dd]].Nome)
						html = html.replace('PRECO', datatable1.datamanager.data[checkedRows[dd]].Preco)
						html = html.replace('DATA', moment(frappe.datetime.now_date()).format('DD-MM-YYYY'))

						html+="</html>";
					}

				}

		}
		

			var printWin = window.open('','','left=0,top=0,width=1350,height=850,toolbar=0,scrollbars=0,status=0,resizable=1');
			printWin.document.write(html);
			printWin.document.close();
			printWin.focus();
			printWin.print();
			printWin.close();	
		}
	})



},

});

2. Create under you custom_app/api/api.py and paste this code

@frappe.whitelist()
def getitem_barcode(item = None):
#Returns Item barcode from the Barcode doctype
print ('tens ', item)
if item:
itembar = frappe.db.sql(“”" SELECT i.name, i.item_name, i.standard_rate, ib.barcode from tabItem as i join tabItem Barcode ib on ib.parent = i.name where i.name = %s and i.disabled =0 and not isnull(ib.barcode) “”“, item, as_dict=True)
else:
itembar = frappe.db.sql(”“” SELECT i.name, i.item_name, i.standard_rate, ib.barcode from tabItem as i join tabItem Barcode ib on ib.parent = i.name where i.disabled =0 and not isnull(ib.barcode) “”", as_dict=True)
print('itembar ', itembar)

return itembar

As in the first post is not pretty but you will have something like this

After you select the itens to generate the Barcode you can click on button Imprimir/Print
:slight_smile:

2 Likes

For V13

on the JS use below code:

var grid;
var dadoss =[];
var columnpicker = “”;
var isSelectAllCheckbox1Hidden = false;

var carregascript = false;

var datatable1 = “”;

frappe.pages[‘imprimir-item-barcod’].on_page_load = function(wrapper) {
frappe.imprimir_item_barcod = new frappe.Imprimir_item_barcodeNEW(wrapper);
}

frappe.Imprimir_item_barcodeNEW = Class.extend({

init: function (parent) {
	frappe.ui.make_app_page({
		parent: parent,
		title: 'Imprimir BarCode para Itens',
		single_column: false
	});

	this.parent = parent;
	this.page = this.parent.page;
	this.page.sidebar.html(`<ul class="module-sidebar-nav overlay-sidebar nav nav-pills nav-stacked"></ul>`);
	this.$sidebar_list = this.page.sidebar.find('ul');


	var me = this;

	console.log('SlickGrid Table...')

	var colunas = []

	/*
	var checkboxSelector = new Slick.CheckboxSelectColumn({
		cssClass: "slick-cell-checkboxsel"
	});
	colunas.push(checkboxSelector.getColumnDefinition());
	*/
	
	$("<div width='600px'>\
		<div id='demo_grid' style='width:100%;height:300px;''></div>\
	</div>").appendTo($(me.page.wrapper).find('.layout-main-section'));
	
	
	$("<script src='https://cdn.jsdelivr.net/jsbarcode/3.3.7/JsBarcode.all.min.js'></script> \
		<style> @media print { .page { width:21cm; height:29.7cm; margin: 0; border: initial; border-radius: initial; width: initial; \
		min-height: initial; box-shadow: initial; background: initial; page-break-after: always; } } </style> \
		<div id='block' class='col-12 col-print-12' width:100%> \
			<div class='image-view-body' style='text-align:center;> \
				<a  data-item-code='{{ barcode }}' \
				> \
					<a id='nome' style='text-align:center;font-size:9px'>PP</a>\
					<br><a id='preco' style='text-align:center;font-size:10px'>PRECO</a> \
					<div class='image-field' \
						style='border: 0px;' \
					> \
						<span class='placeholder-text'> \
							<svg id='barcode'></svg>  \
						</span>  \
					</div> \
					<span class='item-info'> \
						<a id='data' style='text-align:center;font-size:9px'>DATA</a> \
					</span> \
				</a> \
				<p style='page-break-after: always'> </p>\
			</div>").appendTo($(me.page.wrapper).find('.layout-main-section'));

	
	//Datable

	//Select from Item with Barcode
	frappe.call({
		method: "erpnext.api.api.getitem_barcode",
		args:{
		},
		callback: function(r){
			if (r.message){
				
				$.each(r.message, function(i,d){
					dadoss.push({Codigo:d.name,Nome:d.item_name,Barcode:d.barcode,Preco:d.standard_rate})
			
				});
				console.log(typeof(dadoss))
				console.log(dadoss)
				console.log(Object.values(dadoss))


				console.log("Assets Loaded");
				datatable1 = new frappe.DataTable('#demo_grid', {							
					columns: [
						'Codigo',
						'Nome',
						'Barcode',
						'Preco'
					],
					data: Object.values(dadoss),
					//select: { style: 'os', selector: 'td:first-child'},
					//clusterize: false,
					addCheckboxColumn: true,
					checkboxColumn: true,
					checkboxSelector: true,
					CheckboxSelectColumn: true,
					freezeMessage: "..Please Wait.."
				});
				console.log(datatable1);
		
				const options = {
					events: {
						onCheckRow(row) {
							console.log('clic')
						}
					}
				}
		


			}
		}
				
	});

	this.message = null;
	this.make();
	console.log('dados')
},


make: function () {
	var me = this;

	this.imprimir = this.page.add_field({
		fieldname:"imprimir",
		label: __("Imprimir"),
		fieldtype: "Button"

	});

	console.log('botao')

	this.imprimir.$input.on("click", function() {	
		console.log('tt print')
		//Select all from table dadoss
		console.log('Select all from table dadoss')
		if (dadoss.length != 0){
			console.log('seelced')
			console.log(datatable1);
			console.log(datatable1.rowmanager.getCheckedRows());
			var checkedRows = datatable1.rowmanager.getCheckedRows();

			var html="<html>";

			console.log(checkedRows)
			if (checkedRows.length !=0){
				for (dd in checkedRows){
					console.log('checkedRows ',checkedRows[dd]);

					if (checkedRows[dd] != null){
						console.log('BarCode ',datatable1.datamanager.data[checkedRows[dd]].Barcode);
						console.log('BarCode ',datatable1.datamanager.data[datatable1.rowmanager.getCheckedRows()[dd]].Barcode);
						JsBarcode("#barcode",datatable1.datamanager.data[datatable1.rowmanager.getCheckedRows()[dd]].Barcode,{
							width:1,
							height:25,
							fontSize:12,
							flat: true,	
							displayValue: true

						});
			

						html+= document.getElementById('block').innerHTML;

						html = html.replace('PP', datatable1.datamanager.data[checkedRows[dd]].Nome) 

						html = html.replace('PRECO', datatable1.datamanager.data[checkedRows[dd]].Preco)
						html = html.replace('DATA', moment(frappe.datetime.now_date()).format('DD-MM-YYYY'))

						html+="</html>";
					}

				}

		}
		

			var printWin = window.open('','','left=0,top=0,width=1350,height=850,toolbar=0,scrollbars=0,status=0,resizable=1');
			printWin.document.write(html);
			printWin.document.close();
			printWin.focus();
			printWin.print();
			printWin.close();	
		}
	})



},

});

And for the PY file use and note the back-tick for the table names …

import frappe

@frappe.whitelist()
def getitem_barcode(item = None):
#Returns Item barcode from the Barcode doctype
print ('tens ', item)
if item:
itembar = frappe.db.sql(“”" SELECT i.name, i.item_name, i.standard_rate, ib.barcode from tabItem as i join tabItem Barcode ib on ib.parent = i.name where i.name = %s and i.disabled =0 and not isnull(ib.barcode) “”“, item, as_dict=True)
else:
itembar = frappe.db.sql(”“” SELECT i.name, i.item_name, i.standard_rate, ib.barcode from tabItem as i join tabItem Barcode ib on ib.parent = i.name where i.disabled =0 and not isnull(ib.barcode) “”", as_dict=True)
print('itembar ', itembar)

return itembar

1 Like