numeric variable display type change required.

[Vivek Kumar Tya]

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 ?

[Danish Bhairag2]

Hi @Vivek Kumar Tya ,

You need to create a custom variable where u can add widget to it & create field of that type by writing custom code in that widget.

Thanks,

Danish

[Danish Bhairag2]

Hi @Vivek Kumar Tya ,

Create a new Variable of type Custom as shown below:

For widget field click on search icon then create 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 form on the portal & check if the display is as per expectation.

Mark my answer helpful & accepted if it helps you resolve your query.

Thanks,

Danish

[RichardL2]

Trying to use your script / approach.  It appears the function is missing.

The up down arrows do not work.