- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-05-2025 01:31 PM - edited 08-05-2025 02:28 PM
Hello,
I wanted to update the catalog item price when quantity changes in service portal.
Thanks
SR
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
3 weeks ago - last edited 3 weeks ago
I used the below code and achieved it.
HTML:
<select id="catItemQuantity"
ng-if="c.showQuantitySelector()"
ng-disabled="submitting || submitted"
class="m-r-xs sn-select-basic inline"
ng-model="c.quantity"
ng-change="c.updateQuantity(data.sc_cat_item)"
sn-select-width="65px"
aria-label="${Quantity}">
<option ng-repeat="num in data.choiceListQuantity" value="{{::num.value}}">
{{::num.label}}
</option>
</select>
Client:
c.announceQuantityChange = function(item) {
spAriaUtil.sendLiveMessage(
c.data.msgs.updatedMsg + " " + item.name + " " + c.data.msgs.quantityToMsg + " " + c.quantity
);
};
c.updateQuantity = function(item) {
var qty = parseInt(c.quantity || 1, 10);
if (isNaN(qty) || qty < 1) qty = 1;
var unitPrice = resolveUnitPrice(c.data);
var subtotal = unitPrice * qty;
c.unitPrice = unitPrice;
c.subtotal = subtotal; // never null at qty=1
if (!$scope.$$phase) $scope.$apply();
};
function parsePrice(val) {
if (typeof val === 'number') return val;
if (!val) return 0;
return parseFloat(String(val).replace(/[^0-9.]/g, '')) || 0;
}
function resolveUnitPrice(data) {
var item = data && data.sc_cat_item;
var pr = item && item._pricing;
if (pr && pr.price) return parsePrice(pr.price);
if (pr && pr.display_price) return parsePrice(pr.display_price);
if (item && item.price_display) return parsePrice(item.price_display);
if (item && item.price) return parsePrice(item.price);
return 0;
}
// ---- Initialize quantity/price/subtotal ----
var quantity = parseInt(c.quantity || 1, 10);
if (isNaN(quantity) || quantity < 1) quantity = 1;
var unitPrice = resolveUnitPrice(c.data);
c.unitPrice = unitPrice;
c.subtotal = unitPrice * quantity;
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-05-2025 04:27 PM - edited 08-05-2025 04:28 PM
Hi @Reddy
May you use the Catalog Client Script
Go to the Catalog Item → Catalog Client Scripts and create a new one:
- Type: onChange
- Variable name: quantity
function onChange(control, oldValue, newValue, isLoading) {
if (isLoading || newValue == '') {
return;
}
var unitPrice = 50; // Set your unit price here
var totalPrice = unitPrice * parseInt(newValue);
// Show price dynamically (e.g., in a read-only variable or description)
g_form.setValue('price_display', '$' + totalPrice); // 'price_display' is a read-only variable to show price
}
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
a month ago
@Rafael BatistotCatalog item quantity and price are displayed using the out-of-the-box service catalog item widget. I'm not using any variables.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
a month ago
this doesn't happen OOTB i.e. based on quantity it won't change the price.
you will have to do customization for this
check this link and enhance
price not updating when changing quantity in service portal item
If my response helped please mark it correct and close the thread so that it benefits future readers.
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
3 weeks ago - last edited 3 weeks ago
I used the below code and achieved it.
HTML:
<select id="catItemQuantity"
ng-if="c.showQuantitySelector()"
ng-disabled="submitting || submitted"
class="m-r-xs sn-select-basic inline"
ng-model="c.quantity"
ng-change="c.updateQuantity(data.sc_cat_item)"
sn-select-width="65px"
aria-label="${Quantity}">
<option ng-repeat="num in data.choiceListQuantity" value="{{::num.value}}">
{{::num.label}}
</option>
</select>
Client:
c.announceQuantityChange = function(item) {
spAriaUtil.sendLiveMessage(
c.data.msgs.updatedMsg + " " + item.name + " " + c.data.msgs.quantityToMsg + " " + c.quantity
);
};
c.updateQuantity = function(item) {
var qty = parseInt(c.quantity || 1, 10);
if (isNaN(qty) || qty < 1) qty = 1;
var unitPrice = resolveUnitPrice(c.data);
var subtotal = unitPrice * qty;
c.unitPrice = unitPrice;
c.subtotal = subtotal; // never null at qty=1
if (!$scope.$$phase) $scope.$apply();
};
function parsePrice(val) {
if (typeof val === 'number') return val;
if (!val) return 0;
return parseFloat(String(val).replace(/[^0-9.]/g, '')) || 0;
}
function resolveUnitPrice(data) {
var item = data && data.sc_cat_item;
var pr = item && item._pricing;
if (pr && pr.price) return parsePrice(pr.price);
if (pr && pr.display_price) return parsePrice(pr.display_price);
if (item && item.price_display) return parsePrice(item.price_display);
if (item && item.price) return parsePrice(item.price);
return 0;
}
// ---- Initialize quantity/price/subtotal ----
var quantity = parseInt(c.quantity || 1, 10);
if (isNaN(quantity) || quantity < 1) quantity = 1;
var unitPrice = resolveUnitPrice(c.data);
c.unitPrice = unitPrice;
c.subtotal = unitPrice * quantity;