Add new field to Service Portal Shopping Cart Widget

[Matthew Glenn]

I'm trying to add a new check box field to the Istanbul Service Portal Shopping Cart, with the ultimate goal of the true/false value making its way to the Request, but, I'm stuck.

What I've done so far:

• I've created the appropriate column on sc_request
• I've modified the 'large_shopping_cart.html' Angular ng-template to get the appropriate field on the Portal page
• I've modified the 'SC Shopping Cart' Widget Server Script and Client Controller so that everything is processed properly. I've logged what is being returned on submit, so I know we're working up until this point.

This is where things get a little fuzzy for me. From what I can tell, the 'SPCart' Script Include is called from the widget and all the appropriate data is sent on it's way.   But I don't know what to do from here?

Has anyone done something similar on the Portal Shopping Cart that can point me in the right direction?

[Harish KM]

yep you can do that. you need to modify accordingly in checkout function below in server script.

Step 1 : create the fields which you need in large shopping cart HTML:

<label for="deliver-to">${Deliver To}</label>

<textarea class="form-control" ngmodel="c.deliverTo"

id="deliver-to"></textarea>

</div>

<div>

<label

for="comments">${Comments}</label>

<textarea class="form-control" ngmodel="c.data.u_comments"

id="u_comments"></textarea>

</div>

<div>

<label for="approvalfor">${Aprover}</label>

<sn-record-picker id="u_approver"

field="c.data.u_approver" table="'sys_user'"

display-field="'name'" value-field="'sys_id'"

search-fields="'name'" page-size="100" ></snrecord-picker>

</div>

<div>

<label for="managerfor">${Manager}</label>

<sn-record-picker id="u_manager"

field="c.data.u_manager" table="'sys_user'"

display-field="'name'" display-fields="'email'"

value-field="'sys_id'" search-fields="'name'" pagesize="100"

></sn-record-picker>

</div>

<div>

After that Modify server script below

if (input && input.action === "checkout") {

cart.setSpecialInstructions(input.additionalDetails);

cart.setRequestedFor(input.cart.requested_for);

cart.setDeliveryAddress(input.deliverTo);

//cart.setDeliveryAddress1(input.u_comments);

gs.log('TEST1 approver'+ input.u_approver.value +" COmments" +input.u_comments);

var cartValues = "<root>";

if (input.u_approver.value)

{

cartValues += "<u_approver>"+ input.u_approver.value + "</u_approver>"; }

if (input.u_group.value)

cartValues += "<u_group>"+ input.u_group.value + "</u_group>";

// if (input.u_manager.value)

// {

gs.log("CART Manager" +request.getValue("u_manager"));

cartValues += "<u_manager>"+ data.man+ "</u_manager>";

// }

if (input.u_comments)  

cartValues += "<u_comments>"+ input.u_comments + "</u_comments>";    

cartValues += "</root>";  

  gs.log("CART XML"+cartValues);

var cart_item = new GlideRecord('sc_cart_item');//nishanth

    cart_item.addQuery('cart', cart.getCartID());

    cart_item.addQuery('active', 'true');

    cart_item.query();

if(cart_item.next()) {

cart_item.hints = "<hints><entry key='sysparm_processing_hint' value='setfield:request.u_cart_values="+escape(cartValues) +"'/></hints>";  

gs.log("CART hints" +cart_item.hints);

cart_item.update();

}

Then create the fields which you need on your custom table.

step3: Create a BR on that table

A business rule on the request will split the values from the xml into the actual fields

1. //Translates the XML in the cart values field, which are inserted when checking out the cart. The values are inserted into the appropriate fields  

2. readCartValues();  

3.    

4.    

5. function readCartValues(){  

6.         //Get the values to populate and split into name/value pairs  

7.    

8.    

9.           var xmlString = unescape(current.u_cart_values);  

10.    

11.           var helper = new XMLHelper(xmlString);            

12.           var obj = helper.toObject();  

13.            

14.           for(var label in obj){  

15.                     if(JSUtil.notNil(obj[label])){  

16.                               var textContent = obj[label];  

17.                               current.setValue(label, textContent);  

18.                     }  

19.           }  

20. }  

To understannd how this works

Follow this link

https://www.servicenowguru.com/system-ui/adding-fields-service-catalog-checkout-screen/

[SRJ]

thanks for sharing here:)

[Harish KM]

Happie to share and help

[SRJ]

HI Harish,

can we autopopulate Approver value   based on the Requested for user?

thanks in advance

[Harish KM]

Yes. You can do that.