How to create a tabbed view of grids in Salesforce | GridBuddy

Posted by Kelly Lam on May 30, 2017 1:13:46 PM | Share

One of the most popular use cases for GridBuddy is to create a tabbed view of a few of your favorite grids. In this example we'll have a number of Opportunity grids filtered by their expected close date. 

This page will give you a good overview of your oppties with 6 grids on one page. This setup is ideal for a pipeline review meeting. See example code below with comments and read on to learn step-by-step how to create your own tabbed view.

Example code:
<apex:page sidebar="false" showHeader="true">
  <link rel="stylesheet" href="//"></link>
  <script src="//"></script>
  <script src="//"></script>
  <apex:variable var="gridPage" value="{!URLFOR($Page.GBLite__Grid)}" />
  <apex:variable var="gridPage" value="{!gridPage & IF(CONTAINS(gridPage, '?'), '&', '?')}" />
    <apex:variable var="firstGridUrl" value="{!gridPage}gname=Oppties THIS MONTH&sh=0&ssb=0&sbb=1" />
  // (1) Add tab configuration here. Keys below should match the div IDs, values should contain the grid URL.
  // The first grid's URL is should be specified above within the value of "firstGridUrl".
  <script type="text/javascript">
  var pagesToLoad = {
    'tabs-2': '{!gridPage}gname=Oppties NEXT MONTH&sh=0&ssb=0&sbb=1',
    'tabs-3': '{!gridPage}gname=Oppties LAST MONTH&sh=0&ssb=0&sbb=1',
    'tabs-4': '{!gridPage}gname=Oppties THIS QUARTER&sh=0&sbb=1&ssb=0',
    'tabs-5': '{!gridPage}gname=Oppties NEXT QUARTER&sh=0&sbb=1&ssb=0',
    'tabs-6': '{!gridPage}gname=This Quarter Products and Schedules&sh=0&sbb=1&ssb=0'

  function loadPage(pageKey) {
    var pageURL = pagesToLoad[pageKey];
    if (pageURL && pageURL.length > 0) {
    if (pageURL[0] === '@') {
    // load the default tab for the subtab

  var pageWrapper = document.getElementById(pageKey);
  if (pageWrapper.innerHTML.length == 0) {
    // page not loaded yet
    pageWrapper.innerHTML = '<iframe id="gridFrame" scrolling="auto" height="800" width="100%" frameborder="0" src="' + pageURL + '"></iframe>';

$(function() {
    activate: function(event, ui) {
    var tabId = ui.newTab.find('a').attr('href').substring(1);

<div id="tabs">
    <li><a href="#tabs-1">This Month</a></li>
    <li><a href="#tabs-2">Next Month</a></li>
    <li><a href="#tabs-3">Last Month</a></li>
    <li><a href="#tabs-4">This Quarter</a></li>
    <li><a href="#tabs-5">Next Quarter</a></li>
    <li><a href="#tabs-6">Q2 2014 Schedules</a></li>

    <!-- (2) Add tabs here. Only labels go to the list, content definitions go outside. -->
<div id="tabs-1">

<!-- The first tab is referenced here -->
<iframe id="gridFrame" scrolling="auto" height="800" width="100%" frameborder="0" src="{!firstGridUrl}"></iframe>
<div id="tabs-2"></div>
<div id="tabs-3"></div>
<div id="tabs-4"></div>
<div id="tabs-5"></div>
<div id="tabs-6"></div>

<!-- (3) Add new tab content here. Simply copy one of the divs above and make sure the ID is unique. -->

.ui-widget {
font-family: Arial, Verdana, sans-serif;
font-size: 1em;

.ui-widget-content {
border: none;
background: none;
padding: 0;

.ui-widget-header {
border: none;
background: none;

.ui-tabs .ui-tabs-nav {
padding-left: 6px;

.ui-tabs .ui-tabs-nav li {
margin-right: 3px;

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
border-top-right-radius: 6px;

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
border-top-left-radius: 6px;

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
color: #222;
font-weight: bold;
padding: 4px 7px 3px 7px;

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: #f8f8f8; /* Old browsers */
background: -moz-linear-gradient(top, #f8f8f8 0%, #f8f8f8 3%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(3%,#f8f8f8), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f8f8f8 0%,#f8f8f8 3%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f8f8f8 0%,#f8f8f8 3%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f8f8f8 0%,#f8f8f8 3%,#ededed 100%); /* IE10+ */
background: linear-gradient(to bottom, #f8f8f8 0%,#f8f8f8 3%,#ededed 100%); /* W3C */
border-color: #dbdbdb;

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
background: #fff;
border-color: #eee;

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
margin-bottom: -3px;
padding-bottom: 3px;

.ui-tabs .ui-tabs-panel {
border: 1px solid #d4dadc;
border-top: 3px solid #747e96;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
padding: 6px;


Step 1: Add tab configuration 

Specify the list of grid URLs. First, specify the first tab's URL in the APEX variable called "firstGridUrl". After that, specify the rest of the tab URLs in the variable called "pagesToLoad". Keys should match the tab IDs (see example), values should have the grid URL.

Step 2: Add tabs

This is where we specify tab labels, as well as tab IDs that we used in Step1. The labels defined here will be visible to the user. Only labels go to the list, content definitions are handled separately in step 1 and 3.

Step 3: Add new tab content (optional)

If you'd like to add more tabs, just copy one of the divs above and make sure the ID is unique. You'll have to specify the grid URL for the new tab under comment #1 with the new unique ID.

That's it! we've just created a tabbed view of our grids, to give us better overview of our oppties for the next 6 months. Stay tuned for more tips and tricks on our blog.

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