How to create Custom Visualforce Component in Salesforce.com

Those who have patience and want to read theory of Custom Visualforce Component, first visit Visualforce Component Theory, then come back here. Others, stay tuned, follow steps and watch it in action.
In just 4 steps we can create a custom visualforce component:

1. Create Visualforce Component
   1. Go to Setup -> Develop -> Visualforce Component -> New
   2. Enter Label and Name
2. Write code for visualforce component and save it

<pre class="brush: js">
function foo()
{
}
</pre>

<pre class = "brush: html">

&lt;apex:component &gt;
    &lt;apex:attribute name="textValue" description="This is the value for the component" type="String" required="true"/&gt;
    &lt;apex:attribute name="textColor" description="This is color for the border." type="String" required="true"/&gt;
    &lt;apex:outputText value="{!textValue}" style="color:{!textColor};"/&gt;
&lt;/apex:component&gt;
</pre>

3. Use our component in Visualforce Page
   1. Open the VF in which you want to use the component
   2. Use the <c:componentName > to inject the component. You can give attributes also.

<apex:page tabStyle="Account">
    <apex:pageBlock >
        <apex:pageBlockSection title="myComponent Test" collapsible="false">
            <c:myComponent textValue="This Text is blue" textColor="blue" />
            <c:myComponent textValue="But this is red" textColor="red" />
        </apex:pageBlockSection>
    </apex:pageBlock>  
</apex:page>

4. Save and Preview the page, dear

Share on Google Plus

About Ajay Sainy

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.