Create Tabbed Editable Related Lists in Salesforce

Posted by Evan Michalski on Feb 17, 2013 6:38:00 PM | Share

With GridBuddy, you can easily create an editble, tabbed view of your related lists directly on a Salesforce record detail page.

Here is a screenshot of an Account record detail page with tabbed GridBuddy related lists (click to enlarge):

Tabbed Grids resized 600

Create Grids Containing the Objects You Want to Show in the Tabs

If you want GridBuddy tabbed grids for Accounts, for example, create grids with Account as the parent object. See the section GridBuddy Related Lists on Record Detail Pages for how to create grids for record detail pages. In our example, we created 4 grids.

Step 1: Create a Visualforce Page to render the Grid. Name it whatever you like. Example code appears below.

<!-- Note this Visualforce page must have the same object in the standardController
parameter as the object type of the detail page. There are 4 apex:tab elements
below that will generate 4 tabs on the page.  Within each apex:tab is an iframe element. 
In the first iframe, replace "Account Tasks" with the name of your grid.  Repeat this
for the remaining 3 iframes in this example.  Note that you can have any number of tabs
by adding or removing apex:tab elements.
If you are using GridBuddy Free, replace "gblite__grid" with "gbfree__grid".--> 
<apex:page standardController="Account" sidebar="false" showHeader="false">
    <apex:variable var="gridPage" value="{!URLFOR($Page.GBLite__Grid)}" />
    <apex:variable var="gridPage" value="{!gridPage & IF(CONTAINS(gridPage, '?'), '&', '?')}" />
    <apex:tabPanel switchType="client" selectedTab="tabdetails"
                      id="AccountTabPanel" tabClass="activeTab"
        <apex:tab label="Tasks">
            <iframe id="gridFrame1" scrolling="auto" height="480" width="100%" frameborder="0"
              src="{!gridPage}gname=Account Tasks&ID={!Account.Id}&sbb=1&sh=0&ssb=0">
        <apex:tab label="Opportunities">
             <iframe id="gridFrame2" scrolling="auto" height="480" width="100%" frameborder="0"
              src="{!gridPage}gname=Account Oppties&ID={!Account.Id}&sbb=1&sh=0&ssb=0">
        <apex:tab label="Contacts">
             <iframe id="gridFrame3" scrolling="auto" height="480" width="100%" frameborder="0"
              src="{!gridPage}gname=Account Contacts&ID={!Account.Id}&sbb=1&sh=0&ssb=0">
        <apex:tab label="Custom Objects">
             <iframe id="gridFrame4" scrolling="auto" height="480" width="100%" frameborder="0"
              src="{!gridPage}gname=Account Custom Objects&ID={!Account.Id}&sbb=1&sh=0&ssb=0">

Step 2: Incorporate the page into the detail view.

Edit the page layout that you would like to incorporate the tabbed grids into. Click on the Visualforce Pages left nav item in the top area, and drag the Visualforce page you created into the layout. Click on the properties wrench, set the width to 100% and the height to 525. Click OK, then save the page layout.

The next time you load a record detail page for this object, you will see the tabbed grids appear where you placed them on the page layout.

Want to give GridBuddy a try for yourself and don’t have it installed yet? Install 14-day cost-free/risk-free trial of GridBuddy Unlimited from the AppExchange now!

Try GridBuddy for FREE


Tips and Tricks

Subscribe To The AppBuddy Blog

Or Leave A Comment