---
schema_version: "1"
id: 335b75da29399cfbe3a4e2e6ef6ec26134d0a14d6ce8a92ace3c007cffc7914b
title: Create and Test a Visualforce Page for the Quip Associated Documents Component
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/admin_files_quip_create_visualforce_page.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.admin_files_quip_create_visualforce_page.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 777636872c983a00d9a27a10e709ef2d859bffb066fa6d3039ceed3e0c45995f
description: Create your Visualforce page and test it. Then your users can add documents to their records in Salesforce Classic.
products:
  - Quip
  - Cross Cloud
release: "264"
---
# Create and Test a Visualforce Page for the Quip Associated Documents Component

Create your Visualforce page and test it. Then your users can add documents to their records in Salesforce Classic.

### 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: Salesforce Classic</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="d24691e52">User Permissions
              Needed</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d24691e52 ">To create Visualforce pages:</td>

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

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

1. Go to a Salesforce record and take note of its object type (_Example:_ account, opportunity, or lead) and its recordId.
2. From your Developer Console, click **File** | **New** | **Visualforce Page**.
3. Name your page QuipCard.
4. Copy and paste the following code, replacing the `//commented out//` portions with the object type and recordId from step 1.
    
    ```
    <apex:page sidebar="false" standardController="//insert object type here//" >
    
          <apex:includeLightning />
      <div id="quipCardContainer"/>
    
      <script>
        $Lightning.use("c:QuipCard", function() {
    
          $Lightning.createComponent("lightning:quipCard", 
            { "parentRecordId":
          "//insert recordId here//" },
            "quipCardContainer",
            function(cmp)
          {}
          );
        });
      </script>
    </apex:page>
    ```
5. Go back to the record you noted from step 1, and then click **Edit Layout**.
6. Add a section, preferably one column, and then drag QuipCard.vfp into it.
7. Save your layout and verify that the component works.
8. [Give access to the Visualforce page](https://help.salesforce.com/articleView?id=000005011&type=1&language=en_US) for the user profiles of your choice, so that your users can add documents to their records using the Quip Associated Documents component.
    
    ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-anywhere_app-264-0-0-production-enus/c0406050-7b26-469a-9dc5-10d6c0c9c576/images/icon_note.png)
    
    Note Tell your users to sign in to Quip the first time they use the component. And then tell them to refresh their browser window after they connect.