In-Line Visual Force page Related List

Question

I am creating a visualforce page component to go on the Account Page that will display all related Sales_History__c records. I would like to include a drop down that will allow the end user to select the year to view. This does not have to be a drop down, it could be an input as well.

EDIT

Okay so here is what I have right now.

Controller:

public class SalesHistoryOverviewController {
public Id AccountId { get; set; }

public String SelectedYear { get; set; }
public List<SelectOption> Options { get; set; }

public SalesHistoryOverviewController() {
    SelectedYear = '2017';

    Options = new List<SelectOption>();

    Options.add(new SelectOption('2017', '2017'));
    Options.add(new SelectOption('2016', '2016'));
    Options.add(new SelectOption('2015', '2015'));
    Options.add(new SelectOption('2014', '2014'));
    Options.add(new SelectOption('2013', '2013'));
    Options.add(new SelectOption('2012', '2012'));
    Options.add(new SelectOption('2011', '2011'));
}

public List<Sales_History__c> Sales_Histories {
    get {
        return [SELECT Id, Name FROM Sales_History__c WHERE Account_Name__c = :AccountId AND CALENDAR_YEAR(Sale_Date__c) = :Integer.valueOf(SelectedYear)];
    }
}

public PageReference Rerender() {
    return null; 
}
}

Component:

<apex:component controller="SalesHistoryOverviewController">
<apex:attribute name="id_param" assignTo="{!AccountId}" description="..." type="String" required="true"/>

<apex:outputPanel id="componentPanel">
    <apex:form>
        <apex:selectList value="{!SelectedYear}" multiselect="false">
            <apex:selectOptions value="{!Options}"/>
        </apex:selectList>

        <apex:commandButton value="Filter Records" action="{!Rerender}" rerender="componentPanel" />

    </apex:form>

    <apex:dataList value="{!Sales_Histories}" var="s">
        <apex:outputText value="{s.Name}"/>
        <apex:outputText value="{s.Account_Name__c}"/>
        <apex:outputText value="{s.Invoice_Number__c}"/>
        <apex:outputText value="{s.Sale_Date__c}"/>
        <apex:outputText value="{s.Grand_Total__c}"/>
    </apex:dataList>

</apex:outputPanel>

Page:

<apex:page standardController="Account">
<s.SalesHistoryOverviewComponent id_param="{!Account.Id}" />
</apex:page>

I put the page on an Account Page Layout and nothing is showing. Not sure where I am going wrong here.

Answer 1

Since work was slow this morning, I wrote a basic component, controller, and page, which works as a basic implementation of what you're looking for.

The concept is simple- create a component which accepts an id, and provides data on the page filtered with that id, put that component on a page which has a standard controller of the type you need, provided the id to the component, and then add that visualforce page to the object layout.

The component filtering is fairly simple, it takes advantage of the selectList tag to create a picklist, using the SelectOption list created in the controller as the options for the picklist. Whichever picklist value is selected gets assigned to the variable in the value attribute when the form is submitted to the server. This component also refreshes the page when this happens, causing the Contacts variable to execute some soql and filter the records before displaying them on the page.

SomeController

public class SomeController {

    // Passed in by component, used to filter contacts
    public Id AccountId { get; set; }

    // Set by selectList
    public String SelectedYear { get; set; }
    public List<SelectOption> Options { get; set; }

    public SomeController() {
        // Define a default year - should be something like "Date.today().Year()"
        SelectedYear = '2017';

        // Create a list of SelectOptions to be used in the SelectList as options
        // This list could also be generated by finding the first and last years that contacts were created and filling in the rest 
        Options = new List<SelectOption>();

        Options.add(new SelectOption('2017', '2017'));
        Options.add(new SelectOption('2016', '2016'));
        Options.add(new SelectOption('2015', '2015'));
    }

    /** Variable to fetch cotacts- could also query all relevant records, and use filter on data in the component instead of running soql **/
    public List<Contact> Contacts {
        get {
            return [SELECT Id, Name FROM Contact WHERE AccountId = :AccountId AND CALENDAR_YEAR(CreatedDate) = :Integer.valueOf(SelectedYear)];
        }
    }

    /** Rerender the page to display the update filter data - could also run something like this using the onChange event of the selectList **/ 
    public PageReference Rerender() {
        return null; 
    }
} 

SomeComponent

<apex:component controller="someController">
    <!-- Assign a provided id to the AccountID variable -->
    <apex:attribute name="id_param" assignTo="{!AccountId}" description="..." type="String" required="true"/>

    <!-- Panel to rerender to show data -->
    <apex:outputPanel id="componentPanel">
        <apex:form>
            <!-- Our picklist with the created options from the controller  -->
            <apex:selectList value="{!SelectedYear}" multiselect="false">
                <apex:selectOptions value="{!Options}"/>
            </apex:selectList>

            <!-- A button to filter the records by refreshing the page and submitting the selected year to the controller -->
            <apex:commandButton value="Filter Records" action="{!Rerender}" rerender="componentPanel" />

        </apex:form>

        <!-- Data list to store all data provided from the Contacts variable - which should be filtered by the SelectedYear -->
        <apex:dataList value="{!Contacts}" var="c">
            <apex:outputText value="{!c.Name}"/>
        </apex:dataList>

    </apex:outputPanel>

</apex:component>

SomePage

<apex:page standardController="Account">
    <c:someComponent id_param="{!Account.Id}" />
</apex:page>

When all's said and done, you should have a visualforce page on your page layout that looks something like this:

---

As an aside, try to write your own component before asking a question like this. Being able to say, "This is my component, but I'm having trouble getting x to do y", makes the question much easier to answer, and increases the chances of you getting a quality answer. If you're ever entering a new area of Salesforce development, try the Relevant Trailhead and create a minimal example before asking.