Create a Simple Tabbed View of Grids

Posted by Kelly Lam on Dec 19, 2014 11:34:00 AM | Share

One of the most popular use cases for GridBuddy is to create a tabbed view of a few of your favorite grids. The following example will give you a good overview of your oppties filtered by various close dates, using a single grid. This setup is ideal for a pipeline review meeting.  

The first 5 tabs point to the same grid, named Oppties, but the grid is filtered dynamically on the Close Date field using relative dates, through the use of the "fpf" and "fpv" parameters. 

To create your own tabbed view, just create a new Visualforce page using the example code below. Replace the grid names highlighted in red with your own grid names. You can also replace the tab labels highlighted in red below to something your users are more used to.

You can make this page accessible to your users as a custom Visualforce tab, custom Web tab, a custom link or button.

That's it! We've created a tabbed view of our favorite grids. Stay tuned for more tips and tricks on our blog.

Example code:
<apex:page sidebar="false" showHeader="true">
    <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="This Month"> <iframe id="gridFrame1" scrolling="auto" height="800" width="100%" frameborder="0" src="{!gridPage}gname=Oppties&fpf=CloseDate&fpv=THIS_MONTH&sh=0&ssb=0&sbb=1"> </iframe> </apex:tab> <apex:tab label="Next Month"> <iframe id="gridFrame2" scrolling="auto" height="800" width="100%" frameborder="0" src="{!gridPage}gname=Oppties&fpf=CloseDate&fpv=NEXT_MONTH&sh=0&ssb=0&sbb=1"> </iframe> </apex:tab> <apex:tab label="This Quarter"> <iframe id="gridFrame3" scrolling="auto" height="800" width="100%" frameborder="0" src="{!gridPage}gname=Oppties&fpf=CloseDate&fpv=THIS_QUARTER&sh=0&sbb=1&ssb=0"> </iframe> </apex:tab> <apex:tab label="Last Month"> <iframe id="gridFrame9" scrolling="auto" height="800" width="100%" frameborder="0" src="{!gridPage}gname=Oppties&fpf=CloseDate&fpv=LAST_MONTH&sh=0&ssb=0&sbb=1"> </iframe> </apex:tab> <apex:tab label="Next Quarter"> <iframe id="gridFrame4" scrolling="auto" height="800" width="100%" frameborder="0" src="{!gridPage}gname=Oppties&fpf=CloseDate&fpv=NEXT_QUARTER&sh=0&sbb=1&ssb=0"> </iframe> </apex:tab> <apex:tab label="Good Pipeline"> <iframe id="gridFrame5" scrolling="auto" height="800" width="100%" frameborder="0" src="{!gridPage}gname=GOOD PIPELINE&sh=0&sbb=1&ssb=0"> </iframe> </apex:tab> <apex:tab label="Early Stage"> <iframe id="gridFrame6" scrolling="auto" height="800" width="100%" frameborder="0" src="{!gridPage}gname=Oppties UNDERCOOKED&sh=0&sbb=1&ssb=0"> </iframe> </apex:tab> </apex:tabPanel> </apex:page>

Screenshot of end result:

Opportunity Review Tabbed Grids 

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


Subscribe To The AppBuddy Blog

Or Leave A Comment