Simple Tabbed View of Grids embedded on an Account Detail Page


When embedding grids on an Account detail page, we found with many of our customers that one grid isn't enough. Today, we're going to step through the process of embedding a tabbed view of grids on an Account detail page. This is combining solutions from 2 of our previous blog posts: Embedding a Grid on an Account Detail Page and Create a Simple Tabbed View of Grids


Step 1: Create a Visualforce page that references the Grid

1. Go to your Grid, click configure 

Opportunities with Oppty Products   GridBuddy   salesforce com   Developer Edition resized 600

2. Open the Embed grid widget 

GridBuddy Grid Wizard   Create Grid Configuration   salesforce com   Developer Edition resized 600 

3. Set the filters
   1. Select the Filter by Opportunity Field
   2. Enter AccountId
   3. Enter {!Account.Id}
   4. Select Account from dropdown
   5. Enter 'Oppties with Products' or any other name you want to give your tab

Note: if you want to set up this grid on a Custom Object page, you can do it like this:
   1. Select the Filter by Opportunity Field
   2. Enter the custom object's API name on the Opportunity (e.g. Custom_Object__c)
   3. Enter {!Custom_Object__c.Id}
   4. Select Custom Object from dropdown
   5. Enter 'Oppties with Products' or any other name you want to give your tab 




4. Click Create Page. Please note that it might take up to a few minutes to create a page.


4. Copy the page name once it's created. We'll need it later. After that, you can close the widget. 



Step 2: Incorporate the page into the detail view

Edit the page layout that you would like to incorporate this grid into. Drag a new section onto the page layout. Then, click on the Visualforce Pages left nav item in the top area, and drag the Visualforce page you created in Step 2 into the new section. 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 multi-object grid appear where you placed them on the page layout.


Step 3: Turn the Visualforce page into a tabbed view of grids

Go to Setup > Develop > Pages and edit the Visualforce page we just created at the end of step 1.

In the page code, you'll see that we have a Visualforce tabPanel with one single tab in it with an iframe. We're going to copy the code of the tab as many times as many tabs we need. After this, we'll replace the tab labels and the Grid names in the iframe. This way we'll have created a tabPanel with multiple tabs in it, and a different grid in each tab. 

Below is the sample code for the end result. The code in green is the original part we need to copy, and the code in red in the other tabs are the values we need to change: the label is what the user will see as the tab's title on the page, and the Grid name part of the URL in the iframe.

We also added two stylesheets to our page as you can see at the top of the code snippet to make our tabs look better.

<apex:page standardController="Account" sidebar="false" showHeader="false">
    <apex:stylesheet value="/sCSS/25.0/sprites/1342034628000/Theme3/default/gc/versioning.css" />
<apex:stylesheet value="/sCSS/25.0/sprites/1342034628000/Theme3/default/gc/extended.css" />

<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" inactiveTabClass="inactiveTab"> <apex:tab label="Oppties with Products"> <iframe id="gridFrame1" scrolling="auto" height="800" width="100%" frameborder="0" src="{!gridPage}gname=Opportunities with Oppty Products&fpf=AccountId&fpv={!Account.Id}&sh=0&ssb=0&sbb=1"> </iframe> </apex:tab> <apex:tab label="Tasks"> <iframe id="gridFrame2" scrolling="auto" height="800" width="100%" frameborder="0" src="{!gridPage}gname=Tasks&sh=0&ssb=0&sbb=1"> </iframe> </apex:tab> <apex:tab label="Account Hierarchy"> <iframe id="gridFrame3" scrolling="auto" height="800" width="100%" frameborder="0" src="{!gridPage}gname=Account Hierarchy&sh=0&sbb=1&ssb=0"> </iframe> </apex:tab> <apex:tab label="Contacts"> <iframe id="gridFrame9" scrolling="auto" height="800" width="100%" frameborder="0" src="{!gridPage}gname=Contacts&sh=0&ssb=0&sbb=1"> </iframe> </apex:tab> </apex:tabPanel> </apex:page>


Here's a screenshot of the end result:



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


About The Author