Skip to main content
Conga Support

Multi-Tabular Related List (Visualforce Markup)

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:
  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 ActionGrid Visualforce Pages permission set. See Security and Permission Sets for Visualforce Pages for instructions.

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 ActionGrid℠ 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>