Loading

Adding a Field to the Service Catalog Checkout

From ServiceNow Wiki
Home > Script > Useful Scripts > Adding a Field to the Service Catalog Checkout
Jump to: navigation, search
As-is functionality
Caution: The customization described here was developed for use in specific ServiceNow instances, and is not supported by ServiceNow Customer Support. This method is provided as-is and should be tested thoroughly before implementation. Post all questions and comments regarding this customization to our community forum.

1 Overview

The Service Catalog Checkout is controlled by the servicecatalog_cart_template UI Macro. Modifying the Service Catalog Checkout is an advanced customization which requires altering the Jelly script that generates it.

1.1 Impact

This is an advanced customization that has the following impact:

  • Because servicecatalog_cart_template UI Macro and servicecatalog_cart_one UI Page are customized, future updates to the Checkout will not be applied during the upgrade process.
  • Improperly changing the Jelly script which generates the Checkout can break the service catalog checkout.

2 Adding a Field to the Service Catalog Checkout

This is an example of adding a Company field to the checkout below the Requested for field:

Us-addingfield1.png

This field will then passing the value of that field to the Company field of the Service Catalog Request.

This example makes the following assumptions.

  • This example is for an instance using two-step checkout. If two-step checkout is not enabled, enable it before beginning.
  • This example populates the Company field on the Service Catalog Request form. If the field does not appear on the form, personalize the form before beginning.


To add a field to the Service Catalog Checkout:

Go to System UI > UI Macros and select servicecatalog_cart_template.
Find where there are hidden variables declared and add the following line:

<input type="HIDDEN" name="cart_id" id="cart_id" value="$[sc_cart.sys_id]" />

Find the following code, which generates the Requested For code:

 <tr class="header">
 <td width="30%" >
  ${gs.getMessage('Requested for')}:
  </td>
  <td width="70%">
    <label for="requestor_location">${gs.getMessage('Deliver to')}:</label>
  </td>
</tr>
<tr><td>$[SP]</td></tr>		
<tr>
  <td valign="top">	
    <j2:if test="$[jvar_can_delta_rf == false]">
      $[sc_cart.requested_for.getDisplayValue()]
    </j2:if>			
    <j2:if test="$[jvar_can_delta_rf != false]">
      <g2:catalog_requested_for />
    </j2:if>					
  </td>
  <td>								
    <textarea id="requestor_location" style="width: 100%" rows="4" 
      name="requestor_location" wrap="soft" onChange="catDeliveryAddress('$[sc_cart.sys_id]', 'requestor_location');" > 
      $[sc_cart.delivery_address]
    </textarea>								
  </td>			
</tr>	
<tr>
  <td>$[SP]</td>
</tr>

Add the following code afterwards:

<tr class="header"> 
  <td colspan="2">Company</td> 
</tr> 
<tr> 
  <td>$[SP]</td> 
</tr>  
<tr> 
  <td colspan="2"> 
    <g2:ui_reference name="core_company" table="core_company" onchange="setCartValue()"/> 
  </td> 
</tr> 
<tr> 
  <td>$[SP]</td> 
</tr>
  • Note that 'ui_reference' is another macro that defines a reference field. There are several macros for different field types. You can see examples of these field types under System UI -> UI Macros. These macros start with 'ui_'. For this example, the reference field created is named core_company.

Now navigate to System UI > UI Pages and select the servicecatalog_checkout_one UI Page. Add this script to the Client script field:

function setCartValue() {
  var newField = gel('core_company');
  var myCart = gel('cart_id');
  var cart_item = new GlideRecord('sc_cart_item');
  cart_item.addQuery('cart', myCart.value);
  cart_item.query();
  if(cart_item.next()) {
    cart_item.hints = "<hints><entry key='sysparm_processing_hint' value='setfield:request.company=" + newField.value + "'/></hints>";
    cart_item.update();
  }
}
  • For this example, the reference field was called core_company, and the field being populated on the request is company. If different fields are used:
    • Find this line: var company = gel('core_company'); and replace core_company with the name of the field in the checkout.
    • In the line that starts with 'cart_item.hints' replace 'request.company' with the name of the field to be populated on the request ticket where 'request' is the request being generated and 'company' is the name of the field.

Now, when an item is ordered, the company field appears on the Catalog form:

Us-addingfield2.png

Was this article helpful?
Yes, I found what I needed
No, I need more assistance
Views
Personal tools