Print out a bar code from within a widget

[ppicazo1]

Co-pilot came up with a possiblitiy since it has to be done in a widget which mandates java script  so co-pilot said I needed to run

npm install jsbarcode .

I do not know how I can do that within the servicenow environment.   Does anyone know how?  Of course running that from my pc environment does no good.   Does anyone know how I can print out a bar code from within a servicenow widget?

[KrishnaMohan]

Hi @ppicazo1 

You cannot run npm install directly within a ServiceNow widget or the ServiceNow platform environment. The ServiceNow platform is a cloud-based application development framework, and it does not have a Node.js runtime or a command-line interface (CLI) for installing packages.

Step 1: Find a Barcode Library

Since you cannot use npm install, you must find a library that provides a minified JavaScript file (.js) that you can upload to ServiceNow. A common choice is JsBarcode, which you've already found. Instead of using npm, you will download the minified version of the library or directly use below cdn link

https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.3/JsBarcode.all.min.js

• Create a widget and give it name (Generate Bar Code) 

Step 2 : Reference the Library in Your Widget

Now that the library is in ServiceNow, you can reference it in your widget.

1. Open Your Widget: Go to Service Portal > Widgets and open the widget where you want to add the barcode.

2. Add a Dependency:

   • On the widget form, scroll down to the Related Lists.

   • Click the Dependencies tab.

   • Click New.

   • In the Dependency record, give it a Name (e.g., bar_code) and for the Type, select "JS".

   • For the Source, select "URL" and choose the paste below cdn link

https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.3/JsBarcode.all.min.js

• Save the dependency

• 

Likewise based on requirement you can modify/implement.

This approach, which involves uploading the library as CDN LINK and using a dependency, is the standard and correct way to use external JavaScript libraries in ServiceNow widgets.

If this helped to answer your query, please mark it helpful & accept the solution.
Thanks!
Krishnamohan

[ppicazo1]

I think it would be helpful if you were to copy what you have in HTML Template and Link Function and any other ones you have input within and paste them into the written part of a reply so that they could be readable.

[KrishnaMohan]

@ppicazo1 

Link function

function link(scope, element, attrs, controller) {
  document.getElementById("btn").addEventListener("click", function() {
  var text = document.getElementById("text").value;
  JsBarcode("#barcode", text);
});
}

HTML 

<div class="content">
    <input type="text" id="text">
    <svg id="barcode"></svg>
    <button id="btn">Generate</button>
  </div>

CSS 

body{
    background-color: rgb(3, 138, 210);
  }

  #barcode{
    box-shadow: 0 0 20px rgba(0,139,253,0.25);
    width: 300px;
    margin: 30px 0px 30px 0px;
  }
  #btn{
    padding: 12px 40px;
    background-color: rgb(2, 103, 66);
    color: #fff;
    font-size: 17px;
    border: none;
    border-radius: 3px;
  }

If this helped to answer your query, please mark it helpful & accept the solution.
Thanks!
Krishnamohan

[ben_hollifield]

Hi @ppicazo1 ,

If you're looking for a turnkey solution, Yansa Labs has a certified app on the ServiceNow Store for exactly this purpose. You can check the links below for more information. Feel free to reach out to Yansa Labs directly with any questions!

• Product Page
• Documentation Page
• ServiceNow Store Page