---
schema_version: "1"
id: 9a910094a018c84ab40b4f2d2ebf355fc8b9d338147edaa205ef3a7b36c8a5f7
title: Add the Commission Estimator Component to Record Details Pages
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/sales/264-0-0/spiff_estimator_component_page.md
canonical_url: https://help.salesforce.com/s/articleView?id=sales.spiff_estimator_component_page.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: b26a80a2aeb5578697e51a8f05dbf3ccc4577673d6b698cdcceb992d6b720b11
description: Add a component to record details pages for showing the Salesforce Spiff Commission Estimator. For quotes, add the component to the Salesforce CPQ Quote details page. For opportunities, add the component to the Opportunity details page.
products:
  - Sales Cloud
  - Sales Enablement
release: "264"
---
# Add the Commission Estimator Component to Record Details Pages

Add a component to record details pages for showing the Salesforce Spiff Commission Estimator. For quotes, add the component to the Salesforce CPQ Quote details page. For opportunities, add the component to the Opportunity details page.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition"><colgroup><col></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: both Salesforce Classic (not available in all orgs) and Lightning Experience</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: <strong>Enterprise</strong>, <strong>Unlimited</strong>, and <strong>Developer</strong> Editions</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available for an additional cost in: <strong>Professional</strong> Edition with Web Services API Enabled</td></tr></tbody></table>

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d70989e76">User Permissions Needed</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d70989e76 ">To edit Salesforce record details pages:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d70989e76 ">(Salesforce) Customize Application</td>

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

## Add the Component to a Page

1. Log in to Salesforce as an admin.
2. Navigate to a quote or opportunity, click **Setup**, and select **Edit Page**.
    
    ![Edit the Quote page.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-sales-sales_performance_management-264-0-0-production-enus/b1f2feb4-26b8-444f-97f7-be2349869d93/sales_performance_management/images/spiff/spiff_estimator_component_1.png)
3. From the Components tab in Lightning App Builder, find the **userCommissions** component.
    
    ![The userCommissions component in Lightning App Builder components menu](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-sales-sales_performance_management-264-0-0-production-enus/b1f2feb4-26b8-444f-97f7-be2349869d93/sales_performance_management/images/spiff/spiff_estimator_component_2.png)
4. Drag the userCommissions component to the right column of the page.
    
    - In the Quote details page, add the userCommissions component above the Activity component.
    - In the Opportunity details page, add the userCommissions component above the Related component.
    
    ![The userCommissions component on the Quote detail page](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-sales-sales_performance_management-264-0-0-production-enus/b1f2feb4-26b8-444f-97f7-be2349869d93/sales_performance_management/images/spiff/spiff_estimator_component_3.png)

## Configure the userCommissions Component

1. With the component selected, go to Set Component Visibility and click **Add Filter**.
    
    ![Add a filter for the userCommissions component.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-sales-sales_performance_management-264-0-0-production-enus/b1f2feb4-26b8-444f-97f7-be2349869d93/sales_performance_management/images/spiff/spiff_estimator_component_4.png)
2. Enter these values.
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small "><tbody><tr class=""><th style="vertical-align:top;" headers="d70989e249-option" id="d70989e253">Filter Type</th><td style="vertical-align:top;" headers="d70989e249-desc d70989e253"><strong class="uicontrol">Advanced</strong></td></tr><tr class=""><th style="vertical-align:top;" headers="d70989e249-option" id="d70989e263">Field</th><td style="vertical-align:top;" headers="d70989e249-desc d70989e263"><span class="menucascade"><strong class="uicontrol">Permissions</strong> | <strong class="uicontrol">Custom Permission</strong> | <strong class="uicontrol">SpiffCE.Get_Commission</strong></span></td></tr><tr class=""><th style="vertical-align:top;" headers="d70989e249-option" id="d70989e278">Operator</th><td style="vertical-align:top;" headers="d70989e249-desc d70989e278"><strong class="uicontrol">Equals</strong></td></tr><tr class=""><th style="vertical-align:top;" headers="d70989e249-option" id="d70989e288">Value</th><td style="vertical-align:top;" headers="d70989e249-desc d70989e288"><kbd>True</kbd></td></tr></tbody></table>
3. Click **Done**.
4. Confirm that the orange eye icon, which indicates an applied filter, appears on the userCommissions component.
    
    ![Eye icon on the userCommissions component in the Quote detail page](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-sales-sales_performance_management-264-0-0-production-enus/b1f2feb4-26b8-444f-97f7-be2349869d93/sales_performance_management/images/spiff/spiff_estimator_component_5.png)
5. Save your changes.

## Activate and Verify the Page

Activate the page for the users, profiles, and apps as the org default. You can also activate the page for a phone, a desktop app, or both. Then, verify that the page is created in Lightning App Builder.

1. Activate the page.
    1. Navigate to a quote or opportunity, click **Setup**, and select **Edit Page**.
    2. Click **Activation**.
    3. In the Activation window, click **Assign as Org Default**.
        
        ![Activate the page as the org default.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-sales-sales_performance_management-264-0-0-production-enus/b1f2feb4-26b8-444f-97f7-be2349869d93/sales_performance_management/images/spiff/spiff_estimator_component_default.png)
    4. In Assign form factor, select **Desktop and Phone**, and click **Next**.
    5. Save your changes.
2. Verify the page.
    1. From Setup, in the Quick Find box, enter User Interface, and then select **Lightning App Builder**.
    2. Select any standard or custom Quote or Opportunity record details page where you want to show the commission for a sales user.
    3. Click **Edit** and check that you see the Commission Estimator component.
        
        ![Quote record details page in App Builder](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-sales-sales_performance_management-264-0-0-production-enus/b1f2feb4-26b8-444f-97f7-be2349869d93/sales_performance_management/images/spiff/spiff_estimator_component_6.png)