|
| 1 | +# 🧩 ServiceNow Asset QR Code Generator (UI Action) |
| 2 | + |
| 3 | +This repository contains a **ServiceNow UI Action** script that generates and displays a QR Code for an Asset record from list view. |
| 4 | +When the user selects a record and clicks the UI Action, a modal window pops up showing a dynamically generated QR Code that links to asset details. |
| 5 | + |
| 6 | + |
| 7 | +A supporting **Script Include** (server-side) is required in your ServiceNow instance but **is not included** in this repository. |
| 8 | +At the bottom of file , a sample Script Include Code is given , check for the reference. |
| 9 | + |
| 10 | +--- |
| 11 | + |
| 12 | +## 🚀 Features |
| 13 | + |
| 14 | +- Generates a QR Code for the selected Asset record. |
| 15 | +- Displays the QR Code inside a ServiceNow modal (`GlideModal`). |
| 16 | +- Uses **QrIckit API** for quick and free QR code generation. |
| 17 | +- Clean, modular client-side code that integrates seamlessly with UI Actions. |
| 18 | +- Includes a `qr-code-image` file showing example QR Code generated. |
| 19 | + |
| 20 | +--- |
| 21 | + |
| 22 | +## 🧠 How It Works |
| 23 | + |
| 24 | +1. The `onClickQR()` function is triggered when the user clicks a UI Action button. |
| 25 | +2. It calls `generateQRCodeForAsset(sys_id)` and passes the record’s `sys_id`. |
| 26 | +3. A `GlideAjax` request fetches asset data from a **Script Include** on the server. |
| 27 | +4. That data is encoded and sent to the **QrIckit** API to generate a QR Code image. |
| 28 | +5. A ServiceNow modal (`GlideModal`) displays the generated QR Code to the user. |
| 29 | + |
| 30 | +--- |
| 31 | + |
| 32 | +## 💻 UI Action Script |
| 33 | + |
| 34 | +```javascript |
| 35 | +function onClickQR() { |
| 36 | + generateQRCodeForAsset(g_sysId); // get the sys_id of the selected record |
| 37 | +} |
| 38 | + |
| 39 | +function generateQRCodeForAsset(sys_id) { |
| 40 | + var ga = new GlideAjax('GenerateAssetQR'); // Script Include reference |
| 41 | + ga.addParam('sysparm_name', 'getAssetQRData'); |
| 42 | + ga.addParam('sysparm_sys_id', sys_id); |
| 43 | + |
| 44 | + ga.getXMLAnswer(function(response) { |
| 45 | + var qrData = response; |
| 46 | + var qrURL = 'https://qrickit.com/api/qr.php?d=' + encodeURIComponent(qrData) + '&addtext=Get Asset Data'; |
| 47 | + |
| 48 | + var modalHTML = ` |
| 49 | + <div style="text-align:center"> |
| 50 | + <img id="qrCodeImage" src="${qrURL}" alt="QR Code" style="margin-bottom:10px;" /> |
| 51 | + <p>Scan to view asset details</p> |
| 52 | + </div> |
| 53 | + `; |
| 54 | + |
| 55 | + var gModal = new GlideModal("QR Code"); |
| 56 | + gModal.setTitle('Asset QR Code'); |
| 57 | + gModal.setWidth(500); |
| 58 | + gModal.renderWithContent(modalHTML); |
| 59 | + }); |
| 60 | +} |
| 61 | + |
| 62 | +``` |
| 63 | +**Note :** |
| 64 | +1) As the UI action calls a Script Include , in this folder no script include is present |
| 65 | +2) You can modify script include part as required(i.e Which fields are to be shown when QR is scanned) |
| 66 | +3) A sample Client Callable Script-Include is given here. |
| 67 | + |
| 68 | +``` Script Include Code |
| 69 | + var GenerateAssetQR = Class.create(); |
| 70 | +GenerateAssetQR.prototype = Object.extendsObject(AbstractAjaxProcessor, { |
| 71 | + getAssetQRData: function() { |
| 72 | + var sys_id = this.getParameter('sysparm_sys_id'); |
| 73 | + var asset = new GlideRecord('alm_asset'); |
| 74 | + if (asset.get(sys_id)) { |
| 75 | + return 'Asset: ' + asset.name + ', Serial: ' + asset.serial_number; |
| 76 | + } |
| 77 | + return 'Invalid asset record.'; |
| 78 | + } |
| 79 | +}); |
| 80 | +``` |
0 commit comments