We recently revamped our effort to improve employee onboarding and our BL wanted to use the order guide and allow users to select quantity of certain items based on the no_quantity checkbox on the catalog item. Initial attempts was to use the Cart Business Rule but we found that confusing for the user on the summary page. So we cloned the SC Order Guide widget and inserted the quantity dropdown.
!Important: This is custom code to a complex cloned widget, if you're not comfortable supporting this, I wouldn't recommend customizing. If your org is using health scans, this is not recommended unless you know how to correct the HSF's.
Some things to consider:
- placement of quantity selector somewhere in the section of ng-if="guide_step == 1" somewhere after the options. You'll have to use CSS to get placement right for your orgs setup of the catalog item data
- We have a global quantity of 20, you'll have to consider how you're org wants to set the max for each item in the order guide.
- Rely on the catalog item, portal settings, 'hide quantity' checkbox for decisioning whether to show quantity for that item in the order guide. Anything else will get difficult really quick.
- Test very carefully with the Product Owner that everything is working and quantities and prices calculate correctly
HTML:
<label class="label-name" ng-if="c.showQuantitySelector() && !item.no_quantity">${Qty:}</label>
<select id="item.sys_id"
name="Quantity"
ng-if="c.showQuantitySelector() && !item.no_quantity"
ng-disabled="submitting || submitted"
class="select m-b sn-select-basic m-t m-r-sm hidden-xs hidden-sm"
ng-model="item.quantity"{
aria-label="${Quantity}">
<option ng-model="item.sys_id" ng-repeat="num in data.choiceListQuantity" class="select-option" value="{{::num.value}}">{{::num.label}}</option>
</select>
Server Script:
var choiceListQuantity = clGenerator.getChoiceList("sc_cart_item", "quantity");
var choicelistQuantityData = [];
for (var i = 0; i < choiceListQuantity.size(); i++) {
var choice = choiceListQuantity.get(i);
if (!isNaN(choice.getValue()))
choicelistQuantityData.push({value : parseInt(choice.getValue()), label : choice.getLabel()});
}
data.choiceListQuantity = choicelistQuantityData;
data.quantity = choicelistQuantityData[0].value;
Client Script:
c.showQuantitySelector = function() {
// Following if block is code for hard-setting an aria-label on the quantity select box
// for displaying the label "quantity"
if ($('#catItemQuantity') != null) {
var quantityElement = $('#catItemQuantity');
quantityElement.prev().find(".select2-offscreen").removeAttr("aria-labelledby").attr("aria-label", "Quantity " + c.quantity);
}
return c.data.sc_cat_item.sys_class_name !== "sc_cat_item_producer" &&
c.data.sc_cat_item.sys_class_name !== "std_change_record_producer" &&
!c.data.sc_cat_item.no_quantity &&
(c.data.sc_cat_item.cart_guide === undefined || c.data.sc_cat_item.cart_guide === null) &&
(!c.data.sc_cat_item.no_order_now || !c.data.sc_cat_item.no_cart);
};
