Barcode or QR codes generation in ServiceNow

Printing barcodes or QR codes in ServiceNow can be achieved using JavaScript and HTML to generate the barcode or QR code image and then render it on a form or a UI page. Here’s a step-by-step guide to printing a barcode or QR code in ServiceNow:

Follow below step by step guide to generate Barcode or QR code.

1. Create Script Include
Navigate to System Definition > Script include create a script include. In this context, we should implement the logic responsible for retrieving asset details. We will invoke this logic by making an AJAX call from a client script embedded in a UI page.

Use below code in script include.

var barcodeutils = Class.create();
barcodeutils.prototype = Object.extendsObject(AbstractAjaxProcessor, {
    getAssetDetails: function() {
        var sysIds = this.getParameter('sysparm_sys_ids');
        var arr = [];
        var almAssetGr = new GlideRecord("alm_asset");
        almAssetGr.addEncodedQuery('sys_idIN'+ sysIds);
        almAssetGr.query();
        while (almAssetGr.next()) {
            var payload = {};

            payload.asset_tag = almAssetGr.getValue('asset_tag');
            payload.serial_number = almAssetGr.getValue('serial_number');
            payload.model_category = almAssetGr.getDisplayValue('model_category');
           
            arr.push(payload);
        }
        var json = new JSON();
        var data = json.encode(arr);

       return data;
    },

getInstance: function() {
        var instanceURL = gs.getProperty('glide.servlet.uri');

        return instanceURL;

    },

    type: 'barcodeutils'
});

From this script include we are returning 3 values, you can add or subtract attributes to return based on your need.

2. Create a UI Page
In order to display the barcode or QR code on a separate page, you create a UI Page in ServiceNow. Go to “UI Pages” in the application navigator and create a new UI Page. Define the HTML and JavaScript code for generating the barcode or QR code on this page.

Place below code in HTML attribute.

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<div id="assetTags"></div>
                        
                        
</j:jelly>

Place below code in Client Script attribute.

var myparm = getParmVal('selSysIds');

var sysIdList = myparm.split(',');
var numSel = sysIdList.length;
var tags='';

var ga = new GlideAjax('barcodeutills');
    ga.addParam('sysparm_name', 'getAssetDetails');
    ga.addParam('sysparm_sys_ids', sysIdList);
    ga.getXML(displayBarCode);

    function displayBarCode(response) {
        var answer = response.responseXML.documentElement.getAttribute("answer");
        
    answer = answer.evalJSON(); //Transform the JSON string to an object

    for( var i=0 ; i < answer.length ; i++) { //Loop into the array
       
 tags += '<div style="page-break-after: always">'+
    '<table border="0" cellpadding="0" cellspacing="0" style="">'+
        '<tr>'+
            '<td colspan="2"><center><strong>ServiceNow With Runjay</strong></center></td>'+
            
       ' </tr>'+
       '<tr>'+
            '<td><strong>Serial Number</strong></td>'+
            '<td id="x">'+answer[i].serial_number+'</td>'+
       ' </tr>'+
      
        '<tr>'+
           ' <td><strong>Category</strong></td>'+
            '<td>'+answer[i].model_category+'</td>'+
        '</tr>'+
       ' <tr>'+
            '<td colspan="2" style="border-top-style: none; font-family: Verdana; font-size: 15px;">'+
                '<font face="\'Free 3 of 9\'" size="6">*'+answer[i].asset_tag+'*</font>'+
           ' </td>'+
        '</tr>'+
   ' </table>'+
'</div>';
}
document.getElementById('assetTags').innerHTML = tags;
    }



function getParmVal(name) {
    var url = document.URL.parseQuery();
    if (url[name]) {
        return decodeURI(url[name]);
    } else {
        return;
    }
}

Explanation: In client script we are retrieving the assets details while making a ajax call and then running loop to display the details which need to be printed on label.

3. Create UI Action
Navigate to System Definition > UI Action and create new action on Asset table. check the client checkbox and call a funtion from onclick. in this example i have used “callPage();”. Write the below logic to call your UI Page created in step 2.

function callPage() {
    selSysIds = g_list.getChecked();
    var ga = new GlideAjax('barcodeutils');
    ga.addParam('sysparm_name', 'getInstance');
    ga.getXML(getInstanceName);

    function getInstanceName(response) {
        var instance = response.responseXML.documentElement.getAttribute("answer");
        var url = instance + "/barcode.do?selSysIds=" + selSysIds;
        g_navigation.openPopup(url, "_target");
    }

}

4. Install font in local machine
You need to install font in your local machine from which you wanted to print on label. After installing the font restart the system and then try to print the barcode or QR code.

You can download the open source font (free3of9) online.

5. Test and Verify
Follow below steps to test and verify the barcode or QR code generation.

1. 1. Navigate to Asset table (alm_asset).
   2. From listview select few record.
   3. Go to list choice menu and look for ui action created in step 3. in my case ui action name is “Generate Barcode”
   4. A new window will open after clicking on UI Action Generate Barcode.
   5. Verify the details for each record.

6. Print Barcode QR Code
To print the barcode or QR code, you can use their browser’s print functionality to print the page with the image displayed.

Please note that this is a simplified example, and the actual implementation may require additional customization and considerations based on your specific use case and ServiceNow instance configuration. Additionally, make sure to respect any licensing and legal requirements when using third-party libraries for barcode and QR code generation.