Follow these steps:

  1. In Salesforce®, click Setup.
  2. Click Develop and click Visualforce Pages.
  3. Click New. A Page Information screen appears.
  4. Enter a Label, which will be the name of the tab containing the Visualforce page.
  5. Enter a Name that will make this list unique in Salesforce, using underscores instead of spaces.
  6. (Optional). Enter a Description.
  7. Click the Visualforce Markup tab.
  8. Copy and paste the code below into the markup field. See the following examples:
    • Visualforce Multi-Tabular Related List
      <apex:page sidebar="false" showHeader="true" doctype="html-4.01-strict"> <div id="tabstrip"> <ul> <li class="k-state-active">This Month</li> <li>Last Month</li> <li>This Quarter</li> <li>Next Quarter</li> <li>By Stage</li> <li>My Tasks</li> </ul> <div style="overflow:hidden;"> <CRMC_PP:Grid objectName="Opportunity" ViewID="a06o000000Hy0myAAB" /> <CRMC_PP:DrillUp /> </div> <div style="overflow:hidden;"> <CRMC_PP:Grid objectName="Opportunity" ViewID="a06o000000Hy0n3AAB" /> <CRMC_PP:DrillUp /> </div> <div style="overflow:hidden;"> <CRMC_PP:Grid objectName="Opportunity" ViewID="a06o000000Hy0nDAAR" /> <CRMC_PP:DrillUp /> </div> <div style="overflow:hidden;"> <CRMC_PP:Grid objectName="Opportunity" ViewID="a06o000000Hy0nIAAR" /> <CRMC_PP:DrillUp /> </div> <div style="overflow:hidden;"> <CRMC_PP:Grid objectName="Opportunity" ViewID="a06o000000Hy0o0AAB" /> <CRMC_PP:DrillUp /> </div> <div style="overflow:hidden;"> <CRMC_PP:Grid objectName="Task" ViewID="a06o000000FCsz2AAD" /> <CRMC_PP:DrillUp /> </div></div><script>$(document).ready(function() { $("#tabstrip").kendoTabStrip({ });});</script></apex:page>
      CODE

    • Embedded Multi-Tabular Related List

      This example creates a Multi-Tabular Conga Grid℠ embedded in an Account page layout:

      <apex:page standardController="Account" showHeader="false"><div id="tabstrip"> <ul> <li class="k-state-active">Contacts</li> <li>Cases</li> <li>Opportunities</li> <li>Invoices</li> <li>Assets</li> <li>Tasks</li> </ul> <div style="overflow:hidden;"> <CRMC_PP:Grid objectName="Contact" FKName="AccountId" FKValue="{!Account.Id}" /> <CRMC_PP:DrillUp /> </div> <div style="overflow:hidden;"> <CRMC_PP:Grid objectName="Case" FKName="AccountId" FKValue="{!Account.Id}" /> <CRMC_PP:DrillUp /> </div> <div style="overflow:hidden;"> <CRMC_PP:Grid objectName="Opportunity" FKName="AccountId" FKValue="{!Account.Id}" /> <CRMC_PP:DrillUp /> </div> <div style="overflow:hidden;"> <CRMC_PP:Grid objectName="crmc_Invoice__c" FKName="BillTo_Account__c" FKValue="{!Account.Id}" /> <CRMC_PP:DrillUp /> </div> <div style="overflow:hidden;"> <CRMC_PP:Grid objectName="Asset" FKName="AccountId" FKValue="{!Account.Id}" /> <CRMC_PP:DrillUp /> </div> <div style="overflow:hidden;"> <CRMC_PP:Grid objectName="Task" FKName="AccountId" FKValue="{!Account.Id}" /> <CRMC_PP:DrillUp /> </div></div><script>$(document).ready(function() { $("#tabstrip").kendoTabStrip({ });});</script></apex:page>
      CODE

  9. You can customize these examples as needed by following the instructions in Modify Multi-Tabular Related Lists.

  10. Click Save.

  11. Add the resulting Visualforce page to the Conga Grid Visualforce Pages permission set. See Security and Permission Sets for Visualforce Pages for instructions.