Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

How to add fields to the shopping cart Service Portal Helsinki/Istanbul

tommyjensen
Giga Expert

I am trying to add new fields to the shopping cart checkout screen.

Shopping cart.png

I have been able to add a normal text field by modifying the server script in the widget SC Shopping Cart. I set the field directly on the generated request and then do an update.

However this approach has the problem that some of the fields I need to add are mandatory so the request cannot be created without them filled in.

So the bottomline is that I need to modify the following code the the script include "cart"

  placeOrder: function() {

              var req = new GlideappRequestNew();

              var rc = req.copyCart(this.cartName, this.userID);

              this.clearCart();

              return rc;

      }

More specifically the function copyCart. But how do I do that, there is not scriptinclude named GlideappRequestNew.

ps I have searched and found some old threads but all point to a solution from 2010 so do not take the new Service Portal / widgets design into account.

1 ACCEPTED SOLUTION

If you want some code as inspiration here is what I have



Client script checkout button:


c.checkout = function() {


        //Don't checkout if cart is empty (prevent multiple click on submit button)


        if (c.data.cart.items.length == 0)


        return;



        //Run check on required fields, just to be sure


        c.data.mandatoryMessage = requiredFields();


        if (c.data.mandatoryMessage > 0)


        return;



        c.data.checkedOut = "true";



        showLoading();


        c.data.checkout = true;



        c.server.update().then(function(data) {


                  c.data.checkout = undefined;


                  var parms = {};


                  parms.id = c.data.success_page;


                  parms.table = "sc_request";


                  parms.sys_id = c.data.req;


                  $location.search(parms);


        })


}


Server side part


// Checkout


if (input && input.checkout && input.cart.items.length > 0) {


//Save cart values


saveCartValues(cart);



var req = cart.checkout();


data.req = req.getUniqueValue();


}



function saveCartValues(cart) { //Transfer PC, Asset ect. to request


var cartValues = "<root>";


cartValues += "<u_wait_for_ritm_generation>"+ cart.cartGR.u_wait_for_ritm_generation + "</u_wait_for_ritm_generation>";



if (input.validate.pc_visible)


cartValues += "<u_user_pc>"+ input.cart.user_pc + "</u_user_pc>";




if (input.showIncident && input.cart.incident)


cartValues += "<u_created_for_incident>" + input.cart.incident + "</u_created_for_incident>";




if (input.mandatoryReason)


cartValues += "<u_reason>"+ input.cart.reason + "</u_reason>";




if (input.showDelivery) {


var str = "Leveringsmetode: " + input.cart.delivery_method;


if (input.cart.delivery_information)


str+= "\nLeveringsinformation:\n" + input.cart.delivery_information


cartValues += "<delivery_address>" + str + "</delivery_address>";


}




if (input.showAccessBypass && input.cart.change_request) {


cartValues += "<u_created_for_change>"+ input.cart.change_request + "</u_created_for_change>";


if (input.cart.bypassApproval != undefined)


cartValues += "<u_bypass_approvals>"+ input.cart.bypassApproval + "</u_bypass_approvals>";


if (input.cart.bypassNotification != undefined)


cartValues += "<u_bypass_notifications>"+ input.cart.bypassNotification + "</u_bypass_notifications>";


}




cartValues += "</root>";



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



var cart_item = new GlideRecord('sc_cart_item');


cart_item.addQuery('active',true);


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


cart_item.query();


if(cart_item.next()) {


cart_item.hints = hints;


cart_item.update();


}


}


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


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


readCartValues();




function readCartValues(){


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




        var xmlString = unescape(current.u_cart_values);



        var helper = new XMLHelper(xmlString);        


        var obj = helper.toObject();


     


        for(var label in obj){


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


                            var textContent = obj[label];


                            current.setValue(label, textContent);


                  }


        }


}


View solution in original post

10 REPLIES 10

larstange
Mega Sage

Hi Tommy



You will need to use the same approach as was needed on the old service catalog - Adding a Custom Field to the Service Catalog Checkout form when Cart Layout(sc_layout) is enabled!



You basically need to add code in the widget to push any custom values you have to the "hints" fields on one of the items in your shopping cart (sc_cart_item table).



Then a build in functionality in the checkout function will carry these values forward to the generated request


If you want some code as inspiration here is what I have



Client script checkout button:


c.checkout = function() {


        //Don't checkout if cart is empty (prevent multiple click on submit button)


        if (c.data.cart.items.length == 0)


        return;



        //Run check on required fields, just to be sure


        c.data.mandatoryMessage = requiredFields();


        if (c.data.mandatoryMessage > 0)


        return;



        c.data.checkedOut = "true";



        showLoading();


        c.data.checkout = true;



        c.server.update().then(function(data) {


                  c.data.checkout = undefined;


                  var parms = {};


                  parms.id = c.data.success_page;


                  parms.table = "sc_request";


                  parms.sys_id = c.data.req;


                  $location.search(parms);


        })


}


Server side part


// Checkout


if (input && input.checkout && input.cart.items.length > 0) {


//Save cart values


saveCartValues(cart);



var req = cart.checkout();


data.req = req.getUniqueValue();


}



function saveCartValues(cart) { //Transfer PC, Asset ect. to request


var cartValues = "<root>";


cartValues += "<u_wait_for_ritm_generation>"+ cart.cartGR.u_wait_for_ritm_generation + "</u_wait_for_ritm_generation>";



if (input.validate.pc_visible)


cartValues += "<u_user_pc>"+ input.cart.user_pc + "</u_user_pc>";




if (input.showIncident && input.cart.incident)


cartValues += "<u_created_for_incident>" + input.cart.incident + "</u_created_for_incident>";




if (input.mandatoryReason)


cartValues += "<u_reason>"+ input.cart.reason + "</u_reason>";




if (input.showDelivery) {


var str = "Leveringsmetode: " + input.cart.delivery_method;


if (input.cart.delivery_information)


str+= "\nLeveringsinformation:\n" + input.cart.delivery_information


cartValues += "<delivery_address>" + str + "</delivery_address>";


}




if (input.showAccessBypass && input.cart.change_request) {


cartValues += "<u_created_for_change>"+ input.cart.change_request + "</u_created_for_change>";


if (input.cart.bypassApproval != undefined)


cartValues += "<u_bypass_approvals>"+ input.cart.bypassApproval + "</u_bypass_approvals>";


if (input.cart.bypassNotification != undefined)


cartValues += "<u_bypass_notifications>"+ input.cart.bypassNotification + "</u_bypass_notifications>";


}




cartValues += "</root>";



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



var cart_item = new GlideRecord('sc_cart_item');


cart_item.addQuery('active',true);


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


cart_item.query();


if(cart_item.next()) {


cart_item.hints = hints;


cart_item.update();


}


}


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


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


readCartValues();




function readCartValues(){


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




        var xmlString = unescape(current.u_cart_values);



        var helper = new XMLHelper(xmlString);        


        var obj = helper.toObject();


     


        for(var label in obj){


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


                            var textContent = obj[label];


                            current.setValue(label, textContent);


                  }


        }


}


A question about this line



c.data.mandatoryMessage = requiredFields();  



where is teh requiredFields() function defined?


Karthik Reddy T
Kilo Sage

Hello Tommy,



Refer the below link may helpful to you.



Configure cart layout


Configure catalog item widgets


Karthik Reddy T.
ServiceNow Commnunity MVP -2018 class.