Render a barcode in a grid?

[gwilburn]

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.

[sean.lanktree]

I assume that you have an image of your barcode. You can just apply custom formatting to your grid column:

return '<img src="PATH_TO_MY_BARCODE"></img>';

[gwilburn]

We do not have images of the barcode. Looking to generate the image from only the GTIN.

It was a long shot.

[sean.lanktree]

There is still hope...we will send you an example later today showing how you can create these barcodes on the fly.

[Johnny Major]

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:

// 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();

Here is the grid that has the column labeled Zip which gets converted into a barcode and I attached an example pdf that was created

NAB Grid.png

Let us know if you have any questions

[gwilburn]

WOW.. thanks. I will give that a try

[gwilburn]

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?

[Johnny Major]

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

Example alias

Alias /nabResources /yourNewDirectory
<Directory /yourNewDirectory>
   Order Allow,Deny
   allow from all
</Directory>