---
schema_version: "1"
id: 855f1845d6f1d2ee832c85ecd6196d3d2053a07136a6ce9f10056d8fd4a85ae6
title: "Example: Add an Approval Button on a Record Page"
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/ind/264-0-0/approvals_add_an_approval_button_for_sales_reps.md
canonical_url: https://help.salesforce.com/s/articleView?id=ind.approvals_add_an_approval_button_for_sales_reps.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 857090a74a800eaaabdb8483da9301b6649d97a302d4e9a0687d65874ee6102c
description: Add a button that users can click to submit a record for approval. Let’s see an example for adding a button on the quote page.
products:
  - Revenue Cloud
release: "264"
---
# Example: Add an Approval Button on a Record Page

Add a button that users can click to submit a record for approval. Let’s see an example for adding a button on the quote 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: 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 of <span>Revenue Management</span> <span>(formerly Revenue Cloud)</span> where Transaction Management is enabled</td></tr></tbody></table>

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-ind-revenue-264-0-0-production-enus/91ca99c6-d5c8-4986-b961-c6b7801e0d0d/images/icon_note.png)

Note In an autolaunched flow triggered by a quick action, $User resolves to the Automated Process User, not to the submitting user. If your flow needs details about the submitting user, use the Visualforce page and Apex controller approach to pass that information into the flow as an input variable. You can’t hard code the User, Group, or Queue ID in a packaged orchestration. See [Revenue Cloud Advanced Approvals: Cannot deploy or package Flow Orchestration with User, Group, or Queue assignee type](https://help.salesforce.com/s/articleView?id=005385087&type=1&language=en_US).

To add an approval button, follow the instructions in each of these sections.

## Create an Apex Class

Follow these steps to create and use the QuoteApprovalController Apex class, which begins the approval workflows.

1. From Setup, search for and select **Apex Classes**.
2. Click **New**.
3. In the class editor, enter the Apex code for the class.
    
    ```
    public class QuoteApprovalController {
        private Id quoteId;
        private String userId;
        public String submitterComments { get; set; }
       
        public QuoteApprovalController(ApexPages.StandardController controller) {
            Quote quote = (Quote) controller.getRecord();
            quoteId = quote.Id;
            userId = UserInfo.getUserId();
        }
        
        public void submitQuoteForApproval() {
            String flowApiName = 'Approval_Autolaunched_Flow';
            Map<String, Object> inputs = new Map<String, Object>();
            inputs.put('recordId', quoteId);
            inputs.put('submitter', userId);
            inputs.put('submissionComments', submitterComments);
            Flow.Interview myFlow = Flow.Interview.createInterview(flowApiName, inputs);
            myFlow.start();
        }
    }
    ```
4. Save your changes.

## Create a Visualforce Page

Follow these steps to create a Visualforce page called QuoteApprovalPage to trigger the Apex class.

1. From Setup, search for and select **Visualforce Pages**.
2. Click **New**.
3. Enter QuoteApprovalPage as the label and name.
4. Select **Available for Salesforce mobile apps** and **Require CSRF protection on GET requests**.
5. In the Visualforce Markup text box, enter Visualforce markup for the page.
    
    ```
    <apex:page standardController="Quote" extensions="QuoteApprovalController" showQuickActionVfHeader="false" lightningStylesheets="true">
        <script>
            function closePopupWindow() {
                if (typeof sforce != 'undefined' && sforce && sforce.one) {
                    var quoteId = '{!Quote.Id}';
                    sforce.one.navigateToSObject(quoteId);
                } else {
                    window.close();
                }
            }
        </script>
        <h2 align='center'>
            Submit for Approval
        </h2>
       <apex:form >
            <apex:pageBlock >
                <apex:pageBlockButtons location="bottom">
                    <p align='left'>Enter comments for Approver(s):</p>
                    <p align='center'><apex:inputTextarea value="{!submitterComments}" cols="100"/></p>          
                    <apex:commandButton value="Submit" action="{!submitQuoteForApproval}" oncomplete="closePopupWindow();" /> 
                </apex:pageBlockButtons>
            </apex:pageBlock>
        </apex:form>
    </apex:page>
    ```
6. Save your changes.
7. From Setup, search for and select **Visualforce Pages**.
8. Click **Security** against the QuoteApprovalPage.
9. Add your sales reps profiles to enable access to the Visualforce pages.

## Create a Custom Action

Follow these steps to create a custom action on an object. For example, let’s create this custom action on the Quote object.

1. From the Object Manager, search for and select **Quote**.
2. Select **Buttons, Links, and Actions**.
3. Click New Action and specify these details.
    - Action Type: Custom Visualforce
    - Visualforce Page: QuoteApprovalPage
    - Label: Request for Approval
    - Name: Request\_for\_Approval
4. Save your changes.

## Modify Page Layout of the Object

Follow these steps to add the newly created action, Submit for Approval to the page layout of the Quote object.

1. On the Quote object settings page, click **Page Layouts**.
2. Select **Quote Layout**.
3. In the palette, click **Mobile & Lightning Actions**.
4. Drag **Submit for Approval** to the Salesforce Mobile and Lightning Experience Actions section in the layout.
5. Save your changes.