Displaying data from the related Supplier__c records on a Visualforce page that has a custom controller for the Buyer__c object
How can a developer display data from the related Supplier__c records on a Visualforce page that has a custom controller for the Buyer__c object?
The Problem
An org has a data model with a Buyer__c object that has a lookup relationship to Region__c and a Supplier__c object has a lookup relationship to Region___c.
How can a developer display data from the related Supplier__c records on a Visualforce page that has a custom controller for the Buyer__c object?
I have first recreated a similar data model in my Dev Org -
I have also created a VF page with a custom controller for Buyer__c and a custom extension for querying related data from Supplier__c.
Don't forget to check out: Access sObject's (Salesforce Object Type) Fields and Its Record | Apex Developer Guide
BuyerPage.vfp -
<apex:page controller="BuyersSamplePageController" extensions="BuyersSamplePageControllerExt" sidebar="false"> <style type="text/css"> .outBorder { border:3px outset black; } .inBorder{ border-top:2px dotted blue; border-left:2px dotted blue; } .inlineTable { display: inline-flex !important; } </style> <apex:pageBlock title="List of Buyer & Suppliers" > <div class="inlineTable"> <apex:dataTable value="{!buyersList}" var="b" styleclass="outBorder" width="550px" > <apex:column styleclass="inBorder"> <apex:facet name="header">Buyer ID </apex:facet> <apex:outputText >{!b.Id}</apex:outputText> </apex:column> <apex:column styleclass="inBorder"> <apex:facet name="header">Buyer Name </apex:facet> <apex:outputText >{!b.Name}</apex:outputText> </apex:column> </apex:dataTable> <!-- nesting suppliers table (not recommended) --> <apex:dataTable value="{!supplierList}" var="s" styleclass="outBorder" width="550px"> <apex:column styleclass="inBorder"> <apex:facet name="header">Supplier ID </apex:facet> <apex:outputText >{!s.Id}</apex:outputText> </apex:column> <apex:column styleclass="inBorder"> <apex:facet name="header">Supplier Name </apex:facet> <apex:outputText >{!s.Name}</apex:outputText> </apex:column> </apex:dataTable> </div> </apex:pageBlock> </apex:page>
BuyersSamplePageController -
public class BuyersSamplePageController { public List<Buyer__c> buyersList{get;set;} public BuyersSamplePageController(){ buyersList = new List<Buyer__c>(); buyersList = [select id,name from Buyer__c]; } }
BuyersSamplePageControllerExt -
public class BuyersSamplePageControllerExt { public List<Supplier__c> supplierList{get; set;} public BuyersSamplePageControllerExt(BuyersSamplePageController custCtrl){ supplierList = new List<Supplier__c>(); supplierList = [SELECT id, name FROM Supplier__c] ; } }
Buyers/Suppliers list -
Check out an amazing tutorial video here: What is Apex? | Way to become a Salesforce Developer | Salesforce Development Tutorials
As you can see here, now I have been able to retrieve data from the Supplier on the VF page using extensions!
Side note: I have nested the 2 tables for buyers & suppliers, for illustration purposes only. If you want to combine two different objects in a single table and display it on a VF page then use a Wrapper class.