Show/hide field based on price change

[OlaT]

Hi,

I have a Catalog Item where the price is being build based on choices in select box variables. 

I want to display a variable if the price reaches above a certain treshold. 

From my understanding i cannot get the price of a select box variable choice client side, i cannot write catalog ui policies based on the catalog item price changing and i cannot get the sys id of a specific variable in a client script either. 

I understand that i could create a function in a client callable script include to get the price value of the question/choice by using GlideAjax but i refuse to create such a function only to be used for one specific variable. If i'm doing that i want to make it reusable which i could do if i could get the variable name or variable sys id client side. But as said, this is not possible.

So, how can i get the price on change (either from choice change or catalog item price change)?

[Ravi Gaurav]

Hi @OlaT 

Good question  this is one of those gaps between Catalog Client-side APIs and server-side pricing logic. Let’s break it down:

 

Why it doesn’t work OOTB

• Catalog UI Policies / Client Scripts don’t have access to the “price” object of a variable choice.

• The displayed price you see on a Catalog Item is actually calculated server-side by catalog pricing engine and refreshed via AJAX when you change variables.

• There’s no native client API like g_form.getPrice() or g_form.getVariablePrice("varName")

Use g_cart.getCatalogItem() API (Client Side)

ServiceNow provides a hidden but usable API in catalog forms:

g_cart.getCatalogItem(current.sys_id, function(item) {
console.log(item.price); // item.price is the calculated price
});

• This will give you the current calculated price of the item (including variable-based pricing).

• You can run this inside an onChange Catalog Client Script for your select box variables.

function onChange(control, oldValue, newValue) {
if (newValue) {
g_cart.getCatalogItem(g_form.getUniqueValue(), function(item) {
if (parseFloat(item.price) > 1000) {
g_form.setVisible('u_high_price_variable', true);
} else {
g_form.setVisible('u_high_price_variable', false);
}
});
}
}