Is it possible to render a barcode (i.e. a UPC/GTIN) in a grid column... Ultimately, we don't need to "see" it on the screen. Our users would like to have the barcode on the "downloaded" PDF.
Announcement
Collapse
No announcement yet.
Render a barcode in a grid?
Collapse
X
-
You could add a startup script in the behaviors of your app that would override the pdf generation to create the barcode from the value of your column
We selected "bwip-js" to create the barcode and in this example we are just pulling the source from a CDN. If you plan on using this in production I would suggest saving the source from the CDN to a file on your IFS and loading that instead
Your grid will need to have the column you want to convert to a barcode and in the example source below you will want to change the value of barcodeColId to whatever the column label is that holds the value of the barcode. You should only have to change the value of barcodeColId unless you want a different type of barcode.
In this example we are creating a Code 128 barcode for the grid column that has a label of "Zip"
Startup Execute Script Source:
Code:// convert a specific column/cell to a barcode based on it's value // var barcodeColId = 'Zip'; //value of the column label that has the barcode value // load the bwip-js "Barcode Writer" // https://github.com/metafloor/bwip-js // var script = document.createElement("script"); script.type = "text/javascript"; script.src = "https://cdnjs.cloudflare.com/ajax/libs/bwip-js/3.1.0/bwip-js-min.js"; document.body.appendChild(script); // override Valence.util.Helper.generatePdf so we can inject the barcodes // var originalGeneratePdf = Valence.util.Helper.generatePdf; Valence.util.Helper.generatePdf = function (obj) { var pdfTable = obj.definition.content[0].table, pdfBody = pdfTable.body, barcodeColIndex = null, addBarCode = false, ii; // find the column // for (ii = 0; ii < pdfBody[0].length; ii++) { if (pdfBody[0][ii].text === barcodeColId) { barcodeColIndex = ii; addBarCode = true; break; } } if (addBarCode && !Valence.isEmpty(barcodeColIndex)) { var canvas = document.createElement("canvas"); for (ii = 1; ii < pdfBody.length; ii++) { // create the barcode // bwipjs.toCanvas(canvas, { bcid : 'code128', // Barcode type text : pdfBody[ii][barcodeColIndex].text, // Text to encode scale : 1, // 1x scaling factor height : 5, // Bar height, in millimeters includetext: true, // Show human-readable text textxalign : 'center', // Always good to set this }); // set the image // pdfBody[ii][barcodeColIndex].image = canvas.toDataURL('image/png'); delete pdfBody[ii][barcodeColIndex].text; // set configs for the cell "margin/width/height etc" // pdfBody[ii][barcodeColIndex].margin = [5, 15, 5, 5]; pdfBody[ii][barcodeColIndex].width = canvas.width; pdfBody[ii][barcodeColIndex].height = canvas.height + 10; pdfBody[ii][barcodeColIndex].alignment = 'center'; // clear the canvas canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height); } // adjust column widths since we are injecting an image // for (ii = 0; ii < pdfTable.widths.length; ii++) { if (barcodeColIndex === ii) { pdfTable.widths[ii] = '*'; } else { pdfTable.widths[ii] = 'auto'; } } canvas = null; } originalGeneratePdf(obj); }; success();
NAB Grid.png
Let us know if you have any questionsAttached Files
Comment
-
Johnny Major this works great!
I'm not sure what to download and where to place it on my IFS. I downloaded the ZIP file from GitHub... it contains the "bwip-js-min.js"
Is that all I need?
Where do you suggest I store it on my IFS?
Comment
-
Great,
I would just copy the raw source from the CDN url that the example was using
Here is a developer diaries that goes over adding additional resources to NAB. However we suggest you create a folder on your IFS outside of the valence directory for NAB resources and update the apache config.- Create IFS directory
- Create new file in that directory called bwip-js-min.js and paste the source from the CDN "https://cdnjs.cloudflare.com/ajax/li...bwip-js-min.js"
- Edit the Valence instances Apache config via "2001/HTTPAdmin" to have a new alias for the new directory
- Add the new file bwip-js-min.js as an additional resource for NAB via Portal Admin > Settings
Code:Alias /nabResources /yourNewDirectory <Directory /yourNewDirectory> Order Allow,Deny allow from all </Directory>
Comment
Comment