0

I'm trying to design a VFP with TWO apex tabs with each tab having a table with list of records within along with some custom "search" logic. Tab 1 will load the data by default on initial page load but I want tab 2 data to be loaded only when clicked(as a best practice). i also have a custom button within each tab which will just get the specific records onto the table. I'm really having hard time in figuring out how to achieve this as i tried to use the actionfunction ontabenter which didn't work. Please shed some light on what i might be doing wrong or share any examples specific to my use case. Thanks in advance!

VFP Code:

<apex:page controller="MarginTrackerController" sidebar="false">
<apex:form >
    <apex:tabPanel title="Margin Tracker" id="tabpanelId" tabClass="activeTab" inactiveTabClass="inactiveTab" value="{!varTabId}">
        <apex:tab label="Summary" name="Summary" ontabenter="onClickSummaryTab();" switchType="ajax" id="Summary">

        </apex:tab>

        <apex:tab label="Margin" name="Margin" ontabenter="onClickMarginTab();" switchType="ajax" id="Margin">
        <div style="width:800px;float:left;">
        <!-- this is the filter used to SearchAction-->
        <apex:selectList multiselect="false" size="1" value="{!selectedTimeframe}">
            <apex:selectOptions value="{!timeframeList}"></apex:selectOptions>
        </apex:selectList>
        <apex:commandButton value="Go" action="{!searchAction}" status="status" rerender="formId,oppsPanel">
        </apex:commandButton>
        </div>
            **<apex:outputPanel id="myOppsTablePanel">**
            <p><div class="oppstbldiv">
            <table class="oppstbl" id="myOppsTable">
            <thead>
                <tr>
                    <th colspan="1">Opportunity</th>
                    <th colspan="1"> Type</th>
                    <th colspan="1"> Start</th>
                    <th colspan="1"> End</th>
                    <th colspan="1">Net Budget</th>
                    <th colspan="1">Sold Margin ($)</th>
                    <th colspan="1">Sold Margin (%)</th>
                    <th colspan="1">Booking Margin ($)</th>
                    <th colspan="1">Booking Margin (%)</th>
                    <th colspan="1">Revised Margin ($)</th>
                    <th colspan="1">Revised Margin (%)</th>
                </tr>
            </thead>
            <tbody>
                <apex:repeat value="{!oppList}" var="opp">
                    <tr>
                        <td style="text-align:left">{!opp.Name}</td>
                        <td>{!opp.Market__c}</td>
                        <td>
                            <apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
                                <apex:param value="{!opp.Start_Date__c}" /> 
                            </apex:outputText>
                        </td>
                        <td>
                            <apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
                                <apex:param value="{!opp.End_Date__c}" /> 
                            </apex:outputText>
                        </td>
                        <td>
                            <apex:outputText value="{0, number, currency}">
                                <apex:param value="{!opp.Net_Budget__c}" />
                            </apex:outputText>
                        </td>
                        <td>
                            <apex:outputText value="{0, number, currency}">
                                <apex:param value="{!opp.Sold_Margin__c}" />
                            </apex:outputText>
                        </td>
                        <td>
                            <apex:outputText value="{0, number, ##.##}%" rendered="{!NOT(ISNULL(opp.Sold_Margin_Percentage__c))}">
                                <apex:param value="{!opp.Sold_Margin_Percentage__c}"/>
                            </apex:outputText>
                        </td>
                        <td>
                            <apex:outputText value="{0, number, currency}">
                                <apex:param value="{!opp.Booked_Margin__c}" />
                            </apex:outputText>
                        </td>
                        <td>
                            <apex:outputText value="{0, number, ##.##}%" rendered="{!NOT(ISNULL(opp.Booked_Margin_Percentage__c))}">
                                <apex:param value="{!opp.Booked_Margin_Percentage__c}"/>
                            </apex:outputText>
                        </td>
                        <td>
                            <apex:outputText value="{0, number, currency}">
                                <apex:param value="{!opp.Revised_Margin__c}" />
                            </apex:outputText>
                        </td>
                        <td>
                            <apex:outputText value="{0, number, ##.##}%" rendered="{!NOT(ISNULL(opp.Revised_Margin_Percentage__c))}">
                                <apex:param value="{!opp.Revised_Margin_Percentage__c}"/>
                            </apex:outputText>
                        </td>
                    </tr>
                </apex:repeat>
            </tbody>
        </table>
        </div></p>
        **</apex:outputpanel>**
        </apex:tab>
        **<apex:actionFunction action="{!SummaryTab}" name="onClickSummaryTab" reRender="Summary,tabpanelId"/>
        <apex:actionFunction action="{!MarginTab}" name="onClickMarginTab" reRender="Margin,tabpanelId"/>**
    </apex:tabPanel>
</apex:form>

Controller:

public class MarginTrackerController {
public List<Opportunity> oppList{get; set;}
public Opportunity opp{get;set;}
public List<SelectOption> timeframeList{get;set;}
public String selectedTimeframe { get; set; }
public String varTabId { get; set; }
public MarginTrackerController(){
}
public pageReference SummaryTab(){
    varTabId = 'Summary';
    /*some logic to fetch records*/
    return null;
}
public pageReference MarginTab(){
    varTabId = 'Margin';
    opp = new Opportunity();
    timeframeList = new List<SelectOption>();
    timeframeList.add(new SelectOption('', '--None--'));
    selectedTimeframe = '';
    oppList = new List<Opportunity>();
    oppList = [SELECT Id, Name,Market__c, Start_Date__c, End_Date__c, Net_Budget__c, Sold_Margin__c, Sold_Margin_Percentage__c, Booked_Margin__c, Booked_Margin_Percentage__c, Revised_Margin__c, Revised_Margin_Percentage__c FROM Opportunity ORDER BY createdDate DESC LIMIT 100];
    return null;
}   
public void searchAction(){
    timeframeList.add(new SelectOption('', '--None--'));
    timeframeList.add(new SelectOption('Q1', 'Q1'));
    timeframeList.add(new SelectOption('Q2', 'Q2'));
    timeframeList.add(new SelectOption('Q3', 'Q3'));
    timeframeList.add(new SelectOption('Q4', 'Q4'));
    timeframeList.add(new SelectOption('Date', 'Date'));
    /*fetch the filtered records here*/
} 

}

1
  • @sfdcfox - Can you please help me with what i'm missing. Really appreciate your inputs. Thanks!
    – SMorse
    Jun 5, 2020 at 0:02

2 Answers 2

0

You can add an apex:outputpanel inside the tab and rendered it based on varTabId. Below is the rough Vf page code. Let me know if you need anything.

<apex:page controller="MarginTrackerController" sidebar="false"><apex:form >
<apex:tabPanel title="Margin Tracker" id="tabpanelId" tabClass="activeTab" inactiveTabClass="inactiveTab" value="{!varTabId}">
    <apex:tab label="Summary" name="Summary" ontabenter="onClickSummaryTab();" switchType="ajax" id="Summary">
      ***<apex:outputpanel rendered="{!varTabId == 'Summary'}" >
      </apex:outputpanel>***
    </apex:tab>
    <apex:tab label="Margin" name="Margin" ontabenter="onClickMarginTab();" switchType="ajax" id="Margin">
      ***<apex:outputpanel rendered="{!varTabId == 'Margin'}" >***
        <div style="width:800px;float:left;">
        <!-- this is the filter used to SearchAction-->
        <apex:selectList multiselect="false" size="1" value="{!selectedTimeframe}">
            <apex:selectOptions value="{!timeframeList}"></apex:selectOptions>
        </apex:selectList>
        <apex:commandButton value="Go" action="{!searchAction}" status="status" rerender="formId,oppsPanel">
        </apex:commandButton>
        </div>
            <p><div class="oppstbldiv">
            <table class="oppstbl" id="myOppsTable">
            <thead>
                <tr>
                    <th colspan="1">Opportunity</th>
                    <th colspan="1"> Type</th>
                    <th colspan="1"> Start</th>
                    <th colspan="1"> End</th>
                    <th colspan="1">Net Budget</th>
                    <th colspan="1">Sold Margin ($)</th>
                    <th colspan="1">Sold Margin (%)</th>
                    <th colspan="1">Booking Margin ($)</th>
                    <th colspan="1">Booking Margin (%)</th>
                    <th colspan="1">Revised Margin ($)</th>
                    <th colspan="1">Revised Margin (%)</th>
                </tr>
            </thead>
            <tbody>
                <apex:repeat value="{!oppList}" var="opp">
                    <tr>
                        <td style="text-align:left">{!opp.Name}</td>
                        <td>{!opp.Market__c}</td>
                        <td>
                            <apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
                                <apex:param value="{!opp.Start_Date__c}" /> 
                            </apex:outputText>
                        </td>
                        <td>
                            <apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
                                <apex:param value="{!opp.End_Date__c}" /> 
                            </apex:outputText>
                        </td>
                        <td>
                            <apex:outputText value="{0, number, currency}">
                                <apex:param value="{!opp.Net_Budget__c}" />
                            </apex:outputText>
                        </td>
                        <td>
                            <apex:outputText value="{0, number, currency}">
                                <apex:param value="{!opp.Sold_Margin__c}" />
                            </apex:outputText>
                        </td>
                        <td>
                            <apex:outputText value="{0, number, ##.##}%" rendered="{!NOT(ISNULL(opp.Sold_Margin_Percentage__c))}">
                                <apex:param value="{!opp.Sold_Margin_Percentage__c}"/>
                            </apex:outputText>
                        </td>
                        <td>
                            <apex:outputText value="{0, number, currency}">
                                <apex:param value="{!opp.Booked_Margin__c}" />
                            </apex:outputText>
                        </td>
                        <td>
                            <apex:outputText value="{0, number, ##.##}%" rendered="{!NOT(ISNULL(opp.Booked_Margin_Percentage__c))}">
                                <apex:param value="{!opp.Booked_Margin_Percentage__c}"/>
                            </apex:outputText>
                        </td>
                        <td>
                            <apex:outputText value="{0, number, currency}">
                                <apex:param value="{!opp.Revised_Margin__c}" />
                            </apex:outputText>
                        </td>
                        <td>
                            <apex:outputText value="{0, number, ##.##}%" rendered="{!NOT(ISNULL(opp.Revised_Margin_Percentage__c))}">
                                <apex:param value="{!opp.Revised_Margin_Percentage__c}"/>
                            </apex:outputText>
                        </td>
                    </tr>
                </apex:repeat>
            </tbody>
        </table>
        </div></p>
      **</apex:outputpanel>**
    </apex:tab>
    <apex:actionFunction action="{!SummaryTab}" name="onClickSummaryTab"/>
    <apex:actionFunction action="{!MarginTab}" name="onClickMarginTab"/>
</apex:tabPanel>

1
  • Thanks for the response @Salman. I was able to figure that out but the other problem i'm facing is that on the initial load of tab 2, there is a delay seen where the table header loads first and after 3 to 4 seconds the data gets loaded into the table. Though i use the action status to show spinner on tab 2 click, the status is unable to cover the lag which leaves a gap between the spinner completion and data load.Please refer comments from below.Thx developer.salesforce.com/forums#!/…
    – SMorse
    Jun 9, 2020 at 15:51
0

For any one wondering for a solution, I ended up moving tab2 id="Margin" under an Outputpanel and rerendered the "tabpanelId, Margin" in action function. Added the changes to my original posted code with '**'

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .