+ Start a Discussion
Leigh0725Leigh0725 

One record per Tab using PanelGrid on Tab?

Hello!

 

This is my very first VF page attempt and was eager to jump in after attending some sessions at Dreamforce.  I was hoping someone can assist with how to set each tab to show a specifc record.  I created a VF page - Year to Date History - and it is setup as tabs.  Each tab represents a year and each record in the YTDH__C custom object houses data for that year.  The YTDH__c object is a child of our Program__c object.  So one program can have multiple YTDH__c records.  We would like each tab to show the figures for that year and then if the user clicks on a tab, it will be populated with the corrdinating year's data based ont eh tab's label.  Also have to make sure if a user clicks on a link to the record, the page will open up with the right tab selected. 

 

I used a Panelgrid (maybe this was a wrong layout choice?), as layout wise, we were able to get the display/format to look how we want.  I took a screen shot, but cannot figure out how to get the image to show.  I tried pulling up image hosting sites, but they're blocked here at work.  Here is the jist of what our code looks like (note: only coded first tab (2011).  I just cannot figure out how to make each tab (year) reflect each program's YTDH__C record.

 

 

<apex:page standardController="YTDH__c" sidebar="false">
    <apex:pageBlock title="Annual Program Details">
        <p><b>Client:</b> {!YTDH__c.Client__c}</p>
        <br/>
        <apex:tabPanel switchType="client" selectedTab="{!theSelectedTab}" id="theTabPanel">
            <apex:tab label="2011" name="2011" id="2011"><b>Program: </b>{!YTDH__c.Program_Name__c}
            <p></p>
                <apex:panelGrid style="text-align:center" columns="9" border="1" cellpadding="3" cellspacing="3">
                    <apex:outputtext style="font-weight:bold;" value="Month" id="Month"></apex:outputText>
                    <apex:outputText style="font-weight:bold;" value="Total Volume" id="TV"></apex:outputText>
                    <apex:outputText style="font-weight:bold;" value="LT Volume" id="LTV"></apex:outputText>
                    <apex:outputText style="font-weight:bold;" value="LVL III Volume" id="LVIIIV"></apex:outputText>
                    <apex:outputText style="font-weight:bold;" value="LT & LVL III Volume" id="LTIIIV"></apex:outputText>
                    <apex:outputText style="font-weight:bold;" value="Net Volume" id="NV"></apex:outputText>
                    <apex:outputText style="font-weight:bold;" value="Program Average" id="AT"></apex:outputText>
                    <apex:outputText style="font-weight:bold;" value="Combined Average" id="CAT"></apex:outputText>
                    <apex:outputText style="font-weight:bold;" value="Points" id="PS"></apex:outputText>
                    
                    <apex:outputText style="font-weight:bold;" value="January" id="Jan"></apex:outputText>
                    <apex:outputField value="{!YTDH__c.January_Total_Volume__c}" id="JANTV2011"></apex:outputField>
                    <apex:outputField value="{!YTDH__c.January_LT_Volume__c}" id="JANLTV2011"></apex:outputField>
                    <apex:outputField value="{!YTDH__c.January_LVL_III_Volume__c}" id="JANLVLIIIV2011"></apex:outputField>
                    <apex:outputField value="{!YTDH__c.January_LTI_LIII_Volume__c}" id="JANLTIIIV2011"></apex:outputField>
                    <apex:outputField value="{!YTDH__c.January_Net_Volume__c}" id="JANNV2011"></apex:outputField>
                    <apex:outputField value="{!YTDH__c.January_Program_Average__c}" id="JANAVT2011"></apex:outputField>
                    <apex:outputField value="{!YTDH__c.January_Combined_Average__c}" id="JANCAVT2011"></apex:outputField>
                    <apex:outputField value="{!YTDH__c.January_Points__c}" id="JANPS2011"></apex:outputField>

                    <apex:outputText style="font-weight:bold;" value="February" id="Feb"></apex:outputText>
                    <apex:outputField value="{!YTDH__c.February_Total_Volume__c}" id="FEBTV2011"></apex:outputField>
                    <apex:outputField value="{!YTDH__c.February_LT_Volume__c}" id="FEBLTV2011"></apex:outputField>
                    <apex:outputField value="{!YTDH__c.February_LVL_III_Volume__c}" id="FEBLVLIIIV2011"></apex:outputField>
                    <apex:outputField value="{!YTDH__c.February_LTI_LIII_Volume__c}" id="FEBLTIIIV2011"></apex:outputField>
                    <apex:outputField value="{!YTDH__c.February_Net_Volume__c}" id="FEBNV2011"></apex:outputField>
                    <apex:outputField value="{!YTDH__c.February_Program_Average__c}" id="FEBAVT2011"></apex:outputField>
                    <apex:outputField value="{!YTDH__c.February_Combined_Average__c}" id="FEBCAVT2011"></apex:outputField>
                    <apex:outputField value="{!YTDH__c.February_Points__c}" id="FEBPS2011"></apex:outputField>

                    <apex:outputText style="font-weight:bold;" value="March" id="Jan"></apex:outputText>
                    <apex:outputField value="{!YTDH__c.March_Total_Volume__c}" id="MARTV2011"></apex:outputField>
                    <apex:outputField value="{!YTDH__c.March_LT_Volume__c}" id="MARLTV2011"></apex:outputField>
                    <apex:outputField value="{!YTDH__c.March_LVL_III_Volume__c}" id="MARLVLIIIV2011"></apex:outputField>
                    <apex:outputField value="{!YTDH__c.March_LTI_LIII_Volume__c}" id="MARLTIIIV2011"></apex:outputField>
                    <apex:outputField value="{!YTDH__c.March_Net_Volume__c}" id="MARNV2011"></apex:outputField>
                    <apex:outputField value="{!YTDH__c.March_Program_Average__c}" id="MARAVT2011"></apex:outputField>
                    <apex:outputField value="{!YTDH__c.March_Combined_Average__c}" id="MARCAVT2011"></apex:outputField>
                    <apex:outputField value="{!YTDH__c.March_Points__c}" id="MARPS2011"></apex:outputField>
                </apex:panelGrid>
            </apex:tab>
            <apex:tab label="2012" name="2012" id="2012">
            	content for tab two - repeat above grid
            </apex:tab>
        </apex:tabPanel>
    </apex:pageBlock>
</apex:page>

 

 

 

Leigh0725Leigh0725

If it is easier to remove the tabs and have a picklist on the page, have the user select the pick list and then populate the grid, I think our users would be okay with that too.  They're sales reps and SOOO used to excel, so we're trying to stay a little in their comfort zone without having to keep the dang spreadsheets.  ;-)