Hello Community,
Introduction:
I recently worked on a requirement for a client who wanted the ability to print barcodes for their asset records.
Specifically, they needed two functionalities:
- Print a barcode for a single asset record.
- Print barcodes in bulk for multiple asset records from the list view.
To achieve this, I used the JSBarcode library for barcode generation and implemented the solution using UI Pages and UI Actions. This approach ensures a seamless integration into the ServiceNow platform while providing an intuitive user experience. Below is a summary of the steps I followed:
Solution Implementation:
1.Print a barcode for a single asset record
Step 1: Create a UI Page
This page contains the logic to generate and display a barcode for the selected asset using its Asset Tag.
Name: generate_barcode
HTML:
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<html>
<head>
<title>Generate and Print Barcode</title>
<!-- Include JsBarcode Library -->
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
canvas {
margin: 20px 0;
}
button {
background-color: #0072C6;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 14px;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #005999;
}
</style>
</head>
<body>
<h2>Asset Barcode</h2>
<canvas id="barcode"></canvas>
<br />
<button onclick="window.print()">Print Barcode</button>
</body>
</html>
</j:jelly>
Client Script:
Step 2: Create a UI Action
- Use a UI Action to link the Asset record to the UI Page.
Add the script to pass the Asset Tag of the selected record to the barcode generator logic.
Name: Generate Barcode
Table: alm_asset
Client: True
Form button: True
Onclick: print();
Code:
2. Printing Barcodes from the List view
Step 1: Develop a UI Page for Bulk Barcode Printing
This UI Page processes multiple selected records and generates barcodes for each Asset Tag.
Name: generate_barcode_bulklist
HTML:
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<html>
<head>
<title>Generate and Print Barcodes</title>
<!-- Include JsBarcode Library -->
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.barcode-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.barcode-item {
margin: 20px;
text-align: center;
}
canvas {
border: 1px solid #ddd;
margin-bottom: 10px;
}
button {
background-color: #0072C6;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 14px;
cursor: pointer;
border-radius: 5px;
margin-top: 20px;
}
button:hover {
background-color: #005999;
}
</style>
</head>
<body>
<h2>Asset Barcodes</h2>
<div class="barcode-container" id="barcodes"></div>
<div style="text-align:center;">
<button onclick="window.print()">Print All Barcodes</button>
</div>
<script>
// Fetch the 'asset_tags' parameter from the URL
var urlParams = new URLSearchParams(window.location.search);
var assetTags = urlParams.get('asset_tags');
// Convert the asset tags to an array
var assetTagList = assetTags ? assetTags.split(',') : [];
// Generate barcodes dynamically
var container = document.getElementById("barcodes");
if (assetTagList.length > 0) {
assetTagList.forEach(function(tag) {
var div = document.createElement("div");
div.className = "barcode-item";
div.innerHTML = '<canvas class="barcode"></canvas><div>' + tag + '</div>';
container.appendChild(div);
// Generate barcode using JsBarcode
JsBarcode(div.querySelector("canvas"), tag, {
format: "CODE128",
displayValue: true,
fontSize: 14,
lineColor: "#000"
});
});
} else {
container.innerHTML = "<h3 style='color:red;'>No Asset Tags provided.</h3>";
}
</script>
</body>
</html>
</j:jelly>
Step 2: Create a List View UI Action
- Configure the UI Action to allow multiple records to be selected from the list view.
- Use the script to pass the Asset Tags of all selected records to the UI Page.
Name: Print Barcodes
Table: alm_asset
Client: True
Onclick: generateMultipleBarcodes();
List Banner button: True
Code:
With this setup, users can easily generate and print barcodes for both single assets and bulk asset tags directly from the list view.
If you have any questions or need further details about the code or configuration, feel free to reach out. I’d be happy to assist!
Happy Learning,
Sai Pusala
