How to Create Custom Related-List on Visualforce Pages

In the past few weeks in many cases I came across the requirement to add a custom list to the Object's detail page.

The list should be just like related-lists such as "Open Activities" or "Google Docs, Notes, & Attachments", however it is suppose to view a list of data which is somehow relevant to the object but not necessarily from an object directly related to the current object's page.

Let's consider this example, imagine we need to view a list of opportunities related to a Contact through it's Account relationship (not the ones that are directly linked to the Contact).

This is to say that if Contact A is linked to Account X and Account X has 5 opportunities linked to it, by viewing Contact A's details we would be able to view those opportunities as well.

Ok, now action, in order to do this we will need to create a new Visualforce Page and Controller extension.

So I add this text in front of http://yourOrg.salesforce.com/apex/SampleDetailPage and create the new page instantly (This is only possible when you profile is set to work in developer mode).

I set the page's Controller attribute to "Contact" and call my extension "SampleDetailPageCon".
On the page all I need to do is to show the existing Contact details based on whatever active layout target user has chosen and then add my related-list to the bottom of the page. The page code goes like this:

<apex:page standardController="Contact" extensions="sampleDetailPageCon">
<style>
.fewerMore { display: none;}
</style>
<apex:form >
 <apex:pageMessages />
 <apex:detail relatedList="true"></apex:detail>
<apex:pageblock id="CustomList" title="Related Opportunities"  >
   <apex:pageBlockTable value="{!oppz}" var="o" rendered="{!NOT(ISNULL(oppz))}">
        <apex:column value="{!o.Name}"/>
        <apex:column value="{!o.Account.Name}"/>
        <apex:column value="{!o.Type}"/>
       <apex:column value="{!o.Amount}"></apex:column>
       <apex:column value="{!o.CloseDate}"/>
   </apex:pageBlockTable>
   <apex:outputLabel value="No records to display" rendered="{!(ISNULL(oppz))}" styleClass="noRowsHeader"></apex:outputLabel>
 </apex:pageblock>
</apex:form>
</apex:page>

A few tips, normally at the end of detail page Salesforce publishes a component for viewing a few more or a few less records to adjust the size of the page.

Since our related list will be rendered under this component it might not be a bad idea to get rid of it. If you pay attention to be page's code you will see that a style tag has been added to the page that will just do that.

Apart from this everything else is very straight forward. Now all we need to do is to extend the Contact's standard controller and make it able to generate a list of related Opportunities as well.

Here is the Controller's Code:

public class sampleDetailPageCon {
    private List<Opportunity> oppz;
    private Contact cntact; 
    public sampleDetailPageCon(ApexPages.StandardController controller) {
        this.cntact= (Contact)controller.getRecord();
    }
    public List<Opportunity> getOppz()
    {
        Contact con = [Select id, Account.id FROM Contact where id = :cntact.id];
        if (con.Account == null)
         return null;
        oppz = [Select id, Name, Account.Name, CloseDate, Amount, Type from Opportunity where Account.id = :con.Account.id];
        return oppz;
    }
}

As you can see this also very simple. In the above code, I have just added a method called "getOppz()" in which I first try to see if the Contact is linked to any accounts and if yes then use the Account id to get a list of its Opportunities.



That's it! Now if you need your page to be used by Salesforce as default detail page all you need to do is:

• Go to: Setup -> Customize -> Contacts -> Buttons and Links
• Click on "override" next to "View" label
• Select "Visualforce Page" and then your page from the drop down list

Now there is only one thing left, as you all have noticed every related-list has a hover feature on the top of the page where user can quickly view all the related-lists without scrolling down the whole page.

In my next article I will show you how you can go through the backdoor to add your related-list on the top of the page!