Making Related List without using Apex Class

Thursday, May 5, 2011 by Aslam - The Alexendra
Hi All,
Here i want to give some sample code to show you how to make RelatedList on your VF page without using any Apex Code. There are two solutions for this problem.

1) Using <apex:relatedlist>
Suppose you have standard Case object and have one custom child object named "Child__c" to case. Then you can show your relatedlist on vf page using below code.

<apex:page standardController="Case">
<apex:relatedList list="Childs__r"/>
</apex:page>

The list will be displayed on your page but it always gives "Action" column also with "Edit | Del" links. If you want to get rid off that then you need to do a little jquery trick to remove that. See the below code.

<apex:page standardController="Case">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script>
$(document).ready(function(){
$('#Childs a').attr('target','_blank');
});
</script>

<style>
.pbButton{
display:none;
}
.actionColumn{
display:none;
}
</style>

<Div id="Childs">
<apex:relatedList list="Childs__r"/>
</Div>

</apex:page>

The main issue i found using above approach of making list is that it depends on fields selected on page layout for that relatedlist. If you have added 2 fields on your layout, your vf will also show two fields. If you remove that related list from layout, then your vf will show only default fields ( name) only. So, in some sitations this solution is not perfect. For that reason, here is another solution.

3) Using relations objects iteration and Standard Tags.
Here is the other way to achieve your related list on vf page:

<apex:page standardController="Case">
<apex:sectionHeader title="http://www.aslambari.com" subtitle="Related List Example"/>
<apex:pageBlock>
<apex:pageBlockTable value="{!Case.Childs__r}" var="child">
<apex:column headervalue="Name"><apex:outputLink value="/{!child.id}">{!child.name}</apex:outputLink></apex:column>
<apex:column value="{!child.detail__c}"/>
<apex:column value="{!child.is_active__c}"/>
<apex:column value="{!child.createddate}"/>
<apex:column value="{!child.createdbyId}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:page>
Here is a working demo for above code sample:
http://labsprojects-developer-edition.ap1.force.com/apex/RelatedListSample?id=50090000000sW5q


The above way, you can customize your list as you want.

Hope It helps developers to find quick solution for related list.

Thanks
Aslam Bari

9 comments:

Ankit Arora said...

Nice post, but can you please explain why we are using the script to hide the "Edit" and "Del" links as we can do this by simply remove the rights "Delete" and "Edit" from the child object.

By this we can use and remove the links from related list.

Blog : http://forceguru.blogspot.com

Anonymous said...

Nice One. :)

Aslam - The Alexendra said...

@Ankit: Sometimes customers need that they still need "Edit | Del" Links on of there Custom page layouts, or at least they want to Edit or delete records individually. Revoking edit/delete permission from profile will no longer gives user access to edit/delete records from UI, that is the disadvantage for that. For that specific scenario we can go for jquery to hide links.

Manish said...

This is very useful post, we dont need to create any controller class for display related list. I used this in my project.

Anonymous said...

Aslam,

The post was certainly helpful. Is there a way we can create a Visualforce Page as a Related List.
Example:Assume that you have 2 users with 2 different profiles.Also on the opportunity you have 2 record types.So, when the users log in they can only see their opportunity record types related to an account. Any ideas?..

Aslam - The Alexendra said...

@anonymous: Using apex as controller everything is possible. But if you asking me without using apex controller then there might be things possible or some not possible. For example, if you want to do simple filters on records then that is possible like recordtype filtering, amount filtering, any other field filtering.

Robin said...

Hi,

Can you use this as a method to show the related list from a child object?

Something like:

Robin said...

guess code is turned off

want the related list to lockup in the following style if possible, I apreciate this is wrong but you might get the idea of what I am trying to do :-)

list="Child__c.Account__c.Asset__c"

window phones said...

very nice

Post a Comment