Need help in Populating custom Text Field in the cart checkout Page and into the Request .

[Saisree Kota]

Hi All,

There is a custom Text field called "cost center" in the cart checkout page. 

Which is getting the field value from the cart->requestedforuser->costcenterdisplayvalue.

Here it is having dependency on the setcartfield value function - when ever a user enter data into the mentioned fields then only it is filling that value into the request.

We wanted to remove the dependency, even there is no change in any of the field values - it should populate into the request. - need help here.

Below is the codes responsible 

Macro - servicecatalog_cart_template 

<g2:evaluate var="costCenter" expression="costCenter = sc_cart.requested_for.cost_center.getDisplayValue();costCenter;"/>

                <!--<g2:evaluate var="businessName" expression="businessName = sc_cart.requested_for.company;businessName;"/> -->

                <tr class="header">

                    <td width="100%" colspan="2">

                        ${gs.getMessage('Other Information')}:

                    </td>

                </tr>          

                <tr>

                    <td width="50%" >

                        <label for="cost_center">${gs.getMessage('Cost Center:')}$[SP]$[SP]</label>

                        <input id="cost_center" name="cost_center" value="$[costCenter]" onchange="setCartValue()"/></td>

                    <td width="50%">  

                    </td>

                </tr>

UI Page - Servicecatalog cart checkout

if (gel('cost_center') && gel('cost_center').value != '') {

    document.getElementById("cost_center").setAttribute("readOnly","true");

    //document.getElementById('sys_display.cost_center').disabled = 'true';

}

function setCartValue() {

    var fieldSeparator = '^'; //Cannot be ':' or '='

    var nameValSeparator = 'IS'; //Cannot be ':' or '='

    //Get the new field elements we've added

    var costCenter = gel('cost_center');

    var u_location = g_form.getValue('sc_cart.u_location');  

    var requestedDate = gel('requested_date');

    var productCode = gel('product_code');

var checkoutValues = 'u_cost_center' + nameValSeparator + customEncodeURIComponent(costCenter.value);

    checkoutValues += fieldSeparator + 'location' + nameValSeparator + u_location;

    checkoutValues += fieldSeparator + 'requested_date' + nameValSeparator + requestedDate.value;

    checkoutValues += fieldSeparator + 'u_product_code' + nameValSeparator + customEncodeURIComponent(productCode.value);

  //Set the hints field

    var ajax = new GlideAjax('CartUtilityAjax');

    ajax.addParam('sysparm_name', 'setCartItemHints');

    ajax.addParam('sysparm_uid', g_user.userID);

    ajax.addParam('sysparm_popval', checkoutValues);

    ajax.getXMLWait();

}

Business Rule - Populate cart values

ar fieldsToDecodeArr = ['u_product_code', 'u_cost_center'];

var arrUtil = new ArrayUtil();

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

var popVals = current.u_cartpop.split("^");

for(var x in popVals){

    //Split each pair and populate the correct field

    var popVal = popVals[x].split("IS");

    if(popVal.length == 2){

        if(arrUtil.contains(fieldsToDecodeArr, popVal[0].toString())){

            var decodedUserInputField = customDecodeURIComponent(popVal[1]);

            GlideEvaluator.evaluateString('current.' + popVal[0] + '="' + decodedUserInputField + '";');

        }

        else {

            GlideEvaluator.evaluateString('current.' + popVal[0] + '="' + popVal[1] + '";');

        }

    }

}

Tried different ways - No luck.

Thankyou,

Saisree

[Akshay Gupta2 · Accepted solution]

Hi @Saisree Kota 

To remove the dependency on the `setCartValue` function and ensure that the "Cost Center" field value is always populated into the request regardless of whether a user enters data or not, you need to modify the process of setting the cost center value so that it occurs during the form load or another appropriate trigger, rather than relying solely on user interaction.

Here are the steps to achieve this:

### 1. Modify the Macro to Set the Cost Center Value Directly

Update the macro to set the value directly into the field without relying on user interaction. Ensure the cost center value is set when the form is loaded.

```html
<g2:evaluate var="costCenter" expression="costCenter = sc_cart.requested_for.cost_center.getDisplayValue(); costCenter;" />
<tr class="header">
<td width="100%" colspan="2">
${gs.getMessage('Other Information')}:
</td>
</tr>
<tr>
<td width="50%">
<label for="cost_center">${gs.getMessage('Cost Center:')}$[SP]$[SP]</label>
<input id="cost_center" name="cost_center" value="$[costCenter]" readonly="readonly"/>
</td>
<td width="50%">
</td>
</tr>
```

### 2. Modify the Client Script to Set the Value Automatically

Ensure that the client script does not rely on user interaction to set the cart value. Instead, trigger the `setCartValue` function automatically when the form loads or when the cost center field is pre-populated.

```javascript
document.addEventListener('DOMContentLoaded', function() {
setCartValue();
});

function setCartValue() {
var fieldSeparator = '^'; // Cannot be ':' or '='
var nameValSeparator = 'IS'; // Cannot be ':' or '='

// Get the new field elements we've added
var costCenter = gel('cost_center');
var u_location = g_form.getValue('sc_cart.u_location');
var requestedDate = gel('requested_date');
var productCode = gel('product_code');

var checkoutValues = 'u_cost_center' + nameValSeparator + customEncodeURIComponent(costCenter.value);
checkoutValues += fieldSeparator + 'location' + nameValSeparator + u_location;
checkoutValues += fieldSeparator + 'requested_date' + nameValSeparator + requestedDate.value;
checkoutValues += fieldSeparator + 'u_product_code' + nameValSeparator + customEncodeURIComponent(productCode.value);

// Set the hints field
var ajax = new GlideAjax('CartUtilityAjax');
ajax.addParam('sysparm_name', 'setCartItemHints');
ajax.addParam('sysparm_uid', g_user.userID);
ajax.addParam('sysparm_popval', checkoutValues);
ajax.getXMLWait();
}
```

### 3. Ensure the Business Rule Handles the Data Appropriately

Verify that your business rule correctly processes the populated cart values. The code you provided seems to handle decoding and setting the values. Ensure that this business rule runs at the appropriate time in the lifecycle (e.g., before insert/update).

```javascript
var fieldsToDecodeArr = ['u_product_code', 'u_cost_center'];
var arrUtil = new ArrayUtil();

// Get the values to populate and split into name/value pairs
var popVals = current.u_cartpop.split("^");
for (var x in popVals) {
// Split each pair and populate the correct field
var popVal = popVals[x].split("IS");
if (popVal.length == 2) {
if (arrUtil.contains(fieldsToDecodeArr, popVal[0].toString())) {
var decodedUserInputField = customDecodeURIComponent(popVal[1]);
GlideEvaluator.evaluateString('current.' + popVal[0] + '="' + decodedUserInputField + '";');
} else {
GlideEvaluator.evaluateString('current.' + popVal[0] + '="' + popVal[1] + '";');
}
}
}
```

### Summary

These changes ensure that the "Cost Center" field value is always populated into the request when the form loads, without requiring user interaction. This removes the dependency on the `setCartValue` function being triggered by user input and ensures consistent behavior.

Thanks