Add a field to the service catalog checkout

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

About this task

Figure 1. Requested for field

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, configure the form before beginning.

To add a field to the Service Catalog Checkout:

Procedure

  1. Go to System UI > UI Macros and select servicecatalog_cart_template.
  2. 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]" />
  3. 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>
  4. 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.
  5. 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.

Result

Now, when an item is ordered, the company field appears on the Catalog form:
Added field on service catalog checkout