Recently, it was requested of my team that a Catalog Item have a field added that would accept a monetary value (in USD) that only accepted multiples of $5. I looked for an existing solution, and did not find one. However, I have developed a repeatable Single Line Text field that will serve this purpose.
Setup:
- Create Variable
Either in a variable set, or on the catalog item, create a Single Line Text variable. - Regex (Optional)
Create a new Variable Validation Regex that will validate whether or not the entered text is valid. In my case, for a valid USD price, the regex will match an exact dollar amount, and the regex is as follows:
(\$?[0-9]+(\.[0-9]+)?)For building custom regex, regex101 is incredibly useful. Once the record for the Variable Validation Regex is created, add it to the variable in
Record >> Type Specifications >> Validation Regex:
And save the record. - Catalog Client Script
This can either be added to the variable set, or the catalog item in question, however besides the Applies To field, the remaining configuration will stay the same:- Name: Ideally will reflect what the field is being rounded to. (e.g., "Round 'Input Price' to the nearest $5)
- Applies To: "A Catalog Item" if the variable was created directly on the Catalog Item, "A Variable Set" if the variable exists in a set
- UI Type: All
- Type: onChange
- Variable name: Reference variable created earlier
- [Applies to ...]: In my configuration, I have this applying on all Views; Catalog Item, Requested Item, and Catalog Tasks, however depending on your use case, you may not want this to apply to all views.
- Script (Replacing VAR_NAME with the name of the variable created, and changing the value of roundTo to the increment that you want to round to):
function onChange(control, oldValue, newValue, isLoading) { //Value for increment rounding var roundTo = 5; //Standard onChange code + if the value is now empty, return if (isLoading || newValue == '') return; //Get the existing value, and remove the $, if it exists var existingVal = newValue.replace('$', ''); //Make sure the field contains a valid numerical value if(!Number.isInteger(parseInt(existingVal))) return; //Round up if not a multiple of the increment if(existingVal % roundTo !=0) { //Calculate the rounded value var newVal = (Math.ceil(existingVal/roundTo)*roundTo); //Set the value of the field to the new, rounded value g_form.setValue('VAR_NAME', "$"+ newVal); //Show a message beneath the field indicating it was rounded, and the new value g_form.showFieldMsg('VAR_NAME', "Rounded $" + existingVal + " to $" + newVal); } }Note: This will round UP, if you would rather round down, change Math.ceil on line 19 to Math.floor
What this will look like in practice:
Entering either 12.50 or $12.50 (for example) in the text field, and losing focus from the field will round the field, and display a message to the user:
If regex is added to the field, and the value input is not a number, the regex error message (the Validation Message field on the Variable Validation Regex record) will be displayed:
