Introduction
The Apex component allows us to use custom components with attributes that can be passed to a Visualforce page by using <apex:component> tag. The attribute names can be used as a reference in VF pages, and the type attribute can be of list, primitives, sObjects, maps, and custom Apex classes. The following examples show how the custom component attributes are used with different types.
The example below shows how a list is passed to the custom component:
Listview – apex class
public class Listview{ public List<account> acclist{get;set;} public List<contact> conlist{get;set;} public void accview() { acclist=[select name from account]; } public void conview() { conlist=[select name from contact]; } }
listpage – VF page
<apex:page controller="Listview"> <apex:form > <apex:pageBlock title="listview"> <apex:commandButton action="{!accview}" value="Account"/> <c:componentlist accname="{!acclist}"></c:componentlist> <apex:commandButton action="{!conview}" value="cont"/> <c:componentlist conname="{!conlist}"></c:componentlist> </apex:pageBlock> </apex:form> </apex:page>
componentlist – VF component
<apex:component > <apex:attribute name="accname" type="account[]" description="display account view"/> <apex:attribute name="conname" type="contact[]" description="display contact view"/> <apex:pageBlock> <apex:pageBlockTable value="{!accname}" var="ac"> <apex:column value="{!ac.name}"/> </apex:pageBlockTable> <apex:pageBlockTable value="{!conname}" var="co"> <apex:column value="{!co.name}"/> </apex:pageBlockTable> </apex:pageBlock> </apex:component>
The following example shows how maps are passed to the custom component:
Mappage – VF Page
<apex:page controller="mapcontroller"> <apex:form > <apex:pageBlock > <c:componentmap contmap="{!conmap}"/> </apex:pageBlock> </apex:form> </apex:page>
componentmap – VF component
<apex:component > <apex:attribute name="contmap" description="componentmap" type="map"/> <apex:repeat value="{!contmap}" var="cmap"> <apex:outputText value="{!contmap[cmap]}" /><br/> </apex:repeat> </apex:component>
mapcontroller – Apex class
public class mapcontroller { public Map<String,String> conmap{get;set;} public mapcontroller(){ conmap=new Map<String,String>(); for(contact con:[select id,name from contact]){ conmap.put(con.name,con.name); } } }
The next example shows how an Apex class is passed to the custom component:
Classpage – VF Page
<apex:page controller="compclasscontrol"> <apex:form > <apex:pageBlock > <c:componentclass clasexample="{!cc}"/> </apex:pageBlock> </apex:form> </apex:page> compclasscontrol – Apex class public class compclasscontrol { public componclass cc{get;set;} public compclasscontrol(){ cc=new componclass(); } }
componentclass – VF component
<apex:component > <apex:attribute name="clasexample" description="classexample" type="componclass"/> <apex:pageBlock> <apex:pageBlockTable value="{!clasexample.leadlist}" var="var" > <apex:column value="{!var.name}"/> </apex:pageBlockTable> </apex:pageBlock> </apex:component>
componclass – Apex class
public class componclass{ public list<lead> leadlist{get;set;} public componclass(){ leadlist=new list<lead>(); leadlist=[select Name from lead]; } }
Default custom component attributes
Two attributes are always generated for custom components. These attributes don’t need to be included in the component definition:
Id: An identifier that allows the custom component to be referenced by other components in the page.
Rendered: A Boolean value that specifies whether the custom component is rendered on the page. If not specified, this value defaults to true.
Reference Link: