How to Embed tabbed view of grids on Salesforce account details page


How to Embed tabbed view of grids on Salesforce account details page

Posted by Kelly Lam on Mar 12, 2015 6:34:00 PM | Share

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


2. Open the Embed grid widget 

GridBuddy Grid Wizard


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 


Creating Grid Configurations in Salesforce


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

Creating Grid Configurations in Salesforce 

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

Creating Grid Configuration on Salseforce


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:

Salesforce GenePoint


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


GridBuddy, Blogs

Subscribe To The AppBuddy Blog

Or Leave A Comment


Stay Connected

Related Posts

Popular Posts

New Call-to-action