Hi,
The requirement i have received is to have a numeric variable added to a Catalog item.
Default Appearance:- The only numeric variable - Numeric Scale variable type option seems to be appearing the below format in service portal:-
Appearance required:- However, the requirement is to have it in the below form in Service Portal:-
,
Please advise how this can be achieved for a Numeric variable in a Catalog item in ServiceNow ?
Create a new Variable as shown below
For widget field click on search icon then New Record provide some name for that record & paste the below code
Html Code:
<!-- HTML markup for the numeric field with up and down arrows -->
<input type="text" ng-model="quantity" />
<button ng-click="increaseQuantity()">▲</button>
<button ng-click="decreaseQuantity()">▼</button>
Client Controller Code:
// AngularJS controller logic for the widget
function($scope, $http) {
$scope.quantity = 1; // Default quantity
// Function to increase quantity
$scope.increaseQuantity = function() {
$scope.quantity++;
};
// Function to decrease quantity (prevent negative values)
$scope.decreaseQuantity = function() {
if ($scope.quantity > 1) {
$scope.quantity--;
}
};
// Add additional logic to handle form submission, backend interactions, etc.
}
Save the record. Open the portal & check if the display is as per expectation.
Mark my answer helpful & accepted if it helps you resolve your query.
Thanks,
Danish
