---
schema_version: "1"
id: c398d2c96b7933a3b56550e5406c9d38237b01b7059f7483220280c849c89da5
title: Overriding Default Functions
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/ind/264-0-0/comms_overriding_default_functions.md
canonical_url: https://help.salesforce.com/s/articleView?id=ind.comms_overriding_default_functions.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: e56ac5e36f1969ebb179dc0cf56d176c90784a08174dac28427eb28201912ada
description: To override default JavaScript functions, the descendant class can override certain behavior in the ancestor class by specifying the modified behavior in protected methods (similar to the object-oriented technique of Java protected methods).
products:
  - Communications
  - Media
  - Energy and Utilities
release: "264"
---
# Overriding Default Functions

To override default JavaScript functions, the descendant class can override certain behavior in the ancestor class by specifying the modified behavior in protected methods (similar to the object-oriented technique of Java protected methods).

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-ind-comms_media_energy_managed-264-0-0-production-enus/ff4079f6-a384-475c-b863-578bbbb0ef9b/images/icon_note.png)

Note

For details about adding pre- and post-processing logic, see [Adding Pre- and Post-Processing Logic](https://help.salesforce.com/s/articleView?id=ind.comms_adding_pre__and_post_processing_logic.htm&release=264.0.0&type=5 "When adding or deleting products or promotions, you can define pre- and post-processing logic to be executed before and after the cart is modified by defining a method containing the desired logic and assigning it to the corresponding pre- or post-processing hook.").

This mechanism enables customers to override a function of the default JavaScript controller. The function must meet the following criteria:

- The function must be a scope function, that is, $scope.function.
- The function must be defined in the allowlist. Using an allowlist avoids abusive overrides of key functionality.

You can override the following controllers:

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d116861e70">
              <p style="margin-bottom:0;">Controller</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d116861e76">
              <p style="margin-bottom:0;">Functions</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Controller" class="slds-cell-wrap" rowspan="2" style="vertical-align:top;" headers="d116861e70 ">
              <p style="margin-bottom:0;">CPQPromotionItemController</p>
            </td>

            <td data-label="Functions" class="slds-cell-wrap" style="vertical-align:top;" headers="d116861e76 ">
              <p style="margin-bottom:0;">$scope.beforeAddToCartHook(payload)</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Functions" class="slds-cell-wrap" style="vertical-align:top;" headers="d116861e76 ">
              <p style="margin-bottom:0;">$scope.afterAddToCartHook(payload)</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Controller" class="slds-cell-wrap" rowspan="2" style="vertical-align:top;" headers="d116861e70 ">
              <p style="margin-bottom:0;">CPQPromotionsController</p>
            </td>

            <td data-label="Functions" class="slds-cell-wrap" style="vertical-align:top;" headers="d116861e76 ">
              <p style="margin-bottom:0;">$scope.beforeDeletePromotionItemHook(payload)</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Functions" class="slds-cell-wrap" style="vertical-align:top;" headers="d116861e76 ">
              <p style="margin-bottom:0;">scope.afterDeletePromotionItemHook(payload);</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Controller" class="slds-cell-wrap" rowspan="4" style="vertical-align:top;" headers="d116861e70 ">
              <p style="margin-bottom:0;">CPQCartItemController</p>
            </td>

            <td data-label="Functions" class="slds-cell-wrap" style="vertical-align:top;" headers="d116861e76 ">
              <p style="margin-bottom:0;">$scope.beforeAddToCartHook(payload)</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Functions" class="slds-cell-wrap" style="vertical-align:top;" headers="d116861e76 ">
              <p style="margin-bottom:0;">$scope.afterAddToCartHook(payload);</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Functions" class="slds-cell-wrap" style="vertical-align:top;" headers="d116861e76 ">
              <p style="margin-bottom:0;">$scope.beforeDeleteItemFromCartHook(payload)</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Functions" class="slds-cell-wrap" style="vertical-align:top;" headers="d116861e76 ">
              <p style="margin-bottom:0;">$scope.afterDeleteItemFromCartHook(payload)</p>
            </td>

          </tr>
        </tbody>
      </table>

![Tip](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-ind-comms_media_energy_managed-264-0-0-production-enus/ff4079f6-a384-475c-b863-578bbbb0ef9b/images/icon_tip.png)

Tip

Using this approach to override functions decreases maintenance and the risk of missing functionality in future releases. It also decreases maintenance needs.

![example](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-ind-comms_media_energy_managed-264-0-0-production-enus/ff4079f6-a384-475c-b863-578bbbb0ef9b/images/icon_note.png)

example

Sample Controller Override

```
vlocity.cardframework.registerModule.controller('customOverrideController',
 ['$scope', 'CPQOverrideService', function($scope, CPQOverrideService) {
  #var overrideFunctions = {
   'beforeAddToCartHook': function(parent, obj) {
    alert('Hurray!');;
   }
  };

  CPQOverrideService.addToOverrideList('CPQCartItemController', overrideFunctions);
 }]);
```

To override a controller:

1. Create a new controller.
2. Go to the Vlocity Template that contains the function to override.
3. On the HTML Code tab, enter the appropriate markup to initialize the custom controller. For example:
    
    ```
    <div ng-controller="customOverrideController"></div>
    ```
4. On the JavaScript Code tab, enter the appropriate code to register the custom controller and override the default function using CPQOverrideService.