Multi-Tabular Related List (Visualforce Markup)
Follow these steps:
- In Salesforce®, click Setup.
- Click Develop and click Visualforce Pages.
- Click New. A Page Information screen appears.
- Enter a Label, which will be the name of the tab containing the Visualforce page.
- Enter a Name that will make this list unique in Salesforce, using underscores instead of spaces.
- (Optional). Enter a Description.
- Click the Visualforce Markup tab.
-
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>
- 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>
- Visualforce Multi-Tabular Related List
- You can customize these examples as needed by following the instructions in Modify Multi-Tabular Related Lists.
- Click Save.
- Add the resulting Visualforce page to the Conga Grid Visualforce Pages permission set. See Security and Permission Sets for Visualforce Pages for instructions.