created a service portal widget but after entering the serial number nothing happens.
Client :
// Widget Script
function handleCheckIn() {
// Get the scanned barcode from the input field
var scannedBarcode = document.getElementById('barcodeInput').value;
// Call a function to process the scanned barcode (e.g., initiateCheckInProcess)
initiateCheckInProcess(scannedBarcode);
// Clear the input field for the next scan
document.getElementById('barcodeInput').value = '';
}
function initiateCheckInProcess(scannedBarcode) {
// Example: Query the alm_hardware table to find the hardware record based on the scanned barcode
var hardwareRecord = new GlideRecord('alm_hardware');
hardwareRecord.addQuery('serial_number', scannedBarcode);
hardwareRecord.query();
if (hardwareRecord.next()) {
// Hardware record found, get the assigned user
var assignedUser = hardwareRecord.assigned_to;
// Check if the assigned user is valid
if (assignedUser) {
// Create an interaction ticket
var interaction = new GlideRecord('interaction');
interaction.initialize();
interaction.caller_id = assignedUser;
interaction.location = hardwareRecord.location; // Assuming 'location' is a field on the hardware table
interaction.reason = "Laptop refresh";
interaction.insert();
// Log success or perform additional actions
gs.info('Check-in process initiated for user: ' + assignedUser.getDisplayValue());
} else {
// Assigned user not found, log an error or handle as needed
gs.error('Assigned user not found for hardware with serial number: ' + scannedBarcode);
}
} else {
// Hardware record not found, log an error or handle as needed
gs.error('Hardware record not found for serial number: ' + scannedBarcode);
}
}
html template. :
<!-- Barcode Check-In Widget Template -->
<div class="barcode-checkin-widget">
<label for="barcodeInput">Scan Barcode:</label>
<input type="text" id="barcodeInput" placeholder="Scan barcode..." autofocus>
<button onclick="handleCheckIn()">Check-In</button>
</div>
In order to create widgets you need to 1st familiarize yourself with at least the basics of
- AngularJS
- ServiceNow Scripting.
Portal is based around AngularJS, widgets should be creating by adhering to that paradigm.
That means using AngularJS directives to get data from and into the DOM.
No document.whatever or window.whatever or jQuery().whatever (e.g. document.getElementById).
Than you need to know that in ServiceNow - as any any web application - there is two major kind of scripts and entity availability: server side scripts and entities and client side (browser) scripts and entities.
And the two never mix together.
Your Client controller script mixes objects/constructors available only server side into client side code.
There is no GlideRecord in client controllers.
That is a server side (only) capability.
Strictly speaking Core UI (UI 16)/CMS (Portal predecessor) and to some extent, in select widgets Portal to has some GlideRecords support, but not in the form you are using it, and most importantly, while named the same, server side GlideRecord has absolutely nothing to do with client side GlideRecord.
The former is a Java object made available to the server side JavaScript run-time (of course executing server side, in the Tomcat environment, in the Rhino JavaScript engine) while the latter is a JavaScript object that exists/executes in the browser.
Therefore if you want to do stuff on the server as a result of stuff happening in the browser, you need to use - one way or another - XMLHttpRequest.
This is - of course - wrapped into some more usable objects/APIs in most frameworks and so is in Portal too.
The ServiceNow specific APIs to use are server.get(), server.update() or server.refresh().
Back to the original problem, this is how the solution might look like:
Body HTML Template:
<div class="x-contents">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="javascript:void(0)"><span style="vertical-align: middle;"><svg xmlns="http://www.w3.org/2000/svg" height="128" viewBox="0 -960 960 960" width="128">
<path d="M240-120q-60 0-95.5-46.5T124-270l72-272q-33-21-54.5-57T120-680q0-66 47-113t113-47h320q45 0 68 38t3 78l-80 160q-11 20-29.5 32T520-520h-81l-11 40h12q17 0 28.5 11.5T480-440v80q0 17-11.5 28.5T440-320h-54l-30 112q-11 39-43 63.5T240-120Zm0-80q14 0 24-8t14-21l78-291h-83l-72 270q-5 19 7 34.5t32 15.5Zm40-400h240l80-160H280q-33 0-56.5 23.5T200-680q0 33 23.5 56.5T280-600Zm480-160-25-54 145-66 24 55-144 65Zm120 280-145-65 25-55 144 66-24 54ZM760-650v-60h160v60H760Zm-360-30Zm-85 160Z" />
</svg></span></a>
</div>
<div class="collapse navbar-collapse">
<form class="navbar-form navbar-left">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">${Scan Barcode}:</span>
<!--
because of the ng-model directive AngularJS will by magic copy values to the scope and from the scope
-->
<input autofocus="autofocus" class="form-control" ng-model="barCode" placeholder="${Scan barcode}..." type="text">
</div>
</div>
<!--
because of directive ng-click AngularJS will link the click even of the button to the specified method of the scope
because of directive ng-disabled the button will be disabled if property barCode of the scope is null/falsy
-->
<button class="btn btn-default" ng-click="handleCheckIn()" ng-disabled="!barCode || runningRequests > 0" type="submit">${Check-In}</button>
</form>
</div>
</div>
</nav>
<!--
Display the error that resulted from submitting the scan - if such an error resulted
-->
<div class="alert alert-danger" ng-if="scanError" role="alert">{{ scanError }}</div>
<!--
Display the list of created interaction records with an anchor opening each
-->
<div class="alert alert-info" ng-repeat="interactionUniqueValue in interactionUniqueValues track by interactionUniqueValue.uniqueValue" role="alert"><a href="/interaction.do?sys_id={{ interactionUniqueValue.uniqueValue }}" target="_SN">${Interaction for: {{ interactionUniqueValue.barCode }}}</div>
</div>
Throw in some Bootstrap goodies - another thing/framework on which Portal is based; makes it look something like:
CSS:
.navbar-brand svg {
position: relative;
top: 50%;
transform: translate(0, -50%);
}
.x-contents {
padding: 2em;
}
Not really necessary, but will make the log look centered, in case it is too big.
Server script:
(function ($sp, options, input, data) {
if (barCodeScanned(input)) {
data.interactionUniqueValue = lookUpAssetAndCreateInteraction(input.barCode);
}
function barCodeScanned (input) {
return input && input.barCode;
}
function lookUpAssetAndCreateInteraction (barCode) {
var alm_hardware = new GlideRecord('alm_hardware');
alm_hardware.setLimit(1);
if (alm_hardware.get('serial_number', barCode)) {
if (!alm_hardware.assigned_to.nil()) {
var interaction = new GlideRecord('interaction');
interaction.initialize();
interaction.caller_id = alm_hardware.assigned_to;
interaction.location = alm_hardware.location; // Assuming 'location' is a field on the hardware table
interaction.reason = "Laptop refresh";
return interaction.insert();
}
else {
data.error = gs.getMessage('Assigned user not found for hardware with serial number: {0}', barCode);
}
}
else {
data.error = gs.getMessage('Hardware record not found for serial number: {0}', barCode);
}
}
})($sp, options, input, data);
Contains the logic extracted from the original solution that actually belongs to server side
Client controller:
api.controller = function ($scope) {
/* widget controller */
var c = this;
$scope.interactionUniqueValues = [];
$scope.runningRequests = 0;
// The method on the $scope object needs to be created, because only stuff on the $scope object can be referenced in the Template HTML
$scope.handleCheckIn = handleCheckIn;
function handleCheckIn () {
// Set the transaction running flags - when higher then 0 the button will be disabled
$scope.runningRequests++;
// The framework takes care extracting the value from the input and of placing the value into property barCode of the widget's scope
// Though this is not really necessary, one could use $scope.barCode directly in the next instruction (below)
var scannedBarcode = $scope.barCode;
// Execute the call to server side, passing in data to be used in the server script and doing something with the response
c.server
.get({ 'barCode': scannedBarcode, })
.then(makeCheckInHandled(scannedBarcode))
// ['<method name>'] accessor is necessary because stupid SN linter
['finally'](checkInFinally);
}
function makeCheckInHandled (barCode) {
return function checkInHandled (response) {
console.log('checkInHandled', response);
// Update the data in scope with new values received from the server
if (response.data.interactionUniqueValue)
$scope.interactionUniqueValues.splice(0, 0, { 'barCode': barCode, 'uniqueValue': response.data.interactionUniqueValue, });
// Set or reset the "last" error message
$scope.scanError = response.data.error;
};
}
function checkInFinally () {
console.log('checkInFinally');
// Reset transaction running flags - when reachis 0 the button will be enabled
$scope.runningRequests--;
}
};
Contains the original logic re-written for AngularJS paradigm.
Also adds some goodies, like showing error and info messages and disabling the button while a transaction is on-going or while there is no serial number entered.
To learn more about AngularJS just visit their API reference site.
@-O- thank a lot for this, i am still very new to this
i meant with some errors :
when i input the data, it did show something but it did not open the interaction
