Majarkeun: Making Related List without using Apex Class

Wednesday, April 19, 2017

Making Related List without using Apex Class

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

Available link for download