I've been struggeling to show a barcode in a form and also to be able to do a "clean" barcode printout on a Zebra label printer.

The printout in this case is done by using the web browser print dialog. I'm also writing an article on how to do "silent printing" directly to a Zebra printer using Zebra's Browser Print, hope to have it posted soon

But in this article we focus on the JsBarcode implementation.

I've come up with a solution that works and is pretty easy to set up (when you finally know how ;-)).

To start with i use JsBarcode, an "Easy to use, yet powerful barcode generator for the web and Node.js" as Johan Lindell (the creator) has stated on his page. And i agree, JsBarcode is really nice and easy to work with and Johan has provided some samples to use it.

The aim for this article is to show a barcode and additional fields as a label in a form.

We will also add a UI Action to be able to print the label using the browser printing functionality.

We use the Asset table/form (alm_asset) as an use case for demo purpose.

Steps to get this running:

1. Download the JsBarcode Javascript library and upload it (as it is, no "prettify") to your instance as a UI Script.Tip: Create an empty UI Script (naming it "JsBarcode") and save the UI Script not pasting/inserting the script. From list view add "Script" field and paste the code using the list view. This preventing syntax check and being able to save when using the form view.
   
   If you want to use the UI Script from different forms etc. make it global (Check "Global" field) otherwise leave it unchecked and load the UI Script in an OnLoad Client Script using ScriptLoader.In this example i'll leave it unchecked and use ScriptLoader described further on.

2. Create a UI macro (naming it "barcode_label") and use below code snippet as a starting point.In this case i've added a function to set additional fields for the label but the important field for the barcode itself is html "svg" tag.
   
   ```
   
   <?xml version="1.0" encoding="utf-8" ?>
   
   
   
   <br><br> // This function is only used for adding extra text to the label itself, remove it if you don&#39;t need it.<br><br> function setBarCodeLabelText(model, serial) {<br><br> document.getElementById(&quot;model&quot;).innerHTML = &quot;Model: &quot; + model;<br><br> document.getElementById(&quot;serial&quot;).innerHTML = &quot;Serial no: &quot; + serial;<br><br> }<br><br>
   
   <br><br> td{font-size:10px;align:center;vertical-align:top;white-space:nowrap;}<br><br> p{font-size:10px;align:center;vertical-align:top;white-space:nowrap;}<br><br>

/j:jelly​


3. Create a Formatter "Barcode Label" as shown below.
![image](https://community.servicenow.com/community/image/serverpage/image-id/142511iB99355E941CE4116/image-size/large?v=v2&px=999)
4. Add the Barcode Label Formatter to the form. I've added the Formatter to a separate section named "Barcode Label".
![image](https://community.servicenow.com/community/image/serverpage/image-id/142505iC348ADFE77617775/image-size/large?v=v2&px=999)
5. In my example we use a Client Script to set the values but feel free to do it your way.We'll use the Asset table/form (alm\_asset) so create an OnChange script for "Asset Tag" field.I've also added Model and Serial Number as additional text to the label. That's the purpose with function "setBarCodeLabelText()".The important thing here is the loading of the JsBarcode script and calling the JsBarcode function. Please take a look at the JsBarcode documentation for available options (parameters).


function onChange(control, oldValue, newValue, isLoading, isTemplate) {

/*

if (isLoading || newValue === '') {

return;

}

*/

var labelText = "Asset tag: " + newValue;

// This statement will call the funtion in the UI Macro "bar_code_label" to set additional fields

setBarCodeLabelText(g_form.getDisplayValue("model"), g_form.getValue("serial_number"));

// Using JsBarcode http://lindell.me/JsBarcode/#download  
ScriptLoader.getScripts('jsbarcode.jsdbx', function() {  
    JsBarcode("#barcode", newValue, {format: "CODE39", textAlign: "left", text: labelText});  
});  

}​

```

Reload the Asset form and you should see a barcode and additional text.

• Next step is to create a UI action and a UI page being able to do a "clean" barcode print.
• Create a UI action "Print Barcode" as shown below.
  
  Code snippet:
  function printBarCodeLabel() { var sysid = g_form.getUniqueValue(); var features = "resizable=yes,scrollbars=yes,status=no,toolbar=no,menubar=yes,location=no,width=600,height=400"; var href = "printBarCodeLabel.do?sysparm_stack=no&sysparm_view=print&sysparm_media=print&sysparm_id=" + sysid; win = window.open(href, "Printer_friendly_format", features); win.focus(); }​
• Create a UI page "printBarCodeLabel" as shown below.
  
  HTML code snippet:
  ```
  <?xml version="1.0" encoding="utf-8" ?>
  
  

var sysparm_id = RP.getParameterValue("sysparm_id");

sysparm_id;

/g:evaluate

var gr = new GlideRecord("alm_asset");

gr.get(jelly.sysparm_id);

gr;

/g:evaluate



<!-- -->

<br><br> td{font-size: 8px;align:center;vertical-align:top;}<br><br> @media print {@page { margin: 0; }}<br><br>

Model: ${jvar_record.getDisplayValue('model')}	Serial No: ${jvar_record.getDisplayValue('serial_number')}
Click to Print

window.onload = function() { window.print(); }

/j:jelly​


Client Script code snippet:


var barcode = gel("assetTag").value;

var labelText = "Asset tag: " + gel("assetTag").value;

// Link to JsBarcode docs and options: http://lindell.me/JsBarcode/

JsBarcode("#barcode", barcode, {format: "CODE39", width: 1, height: 30, margin: 1, textMargin: 1, textAlign: "left", fontSize: 8, text: labelText});​

```

Labels:

• User Experience and Design