Thursday, July 10, 2014

How to create a baisc table to display the list of data in Visualforce

So this is a quick example to bind list of data from the controller or extension to the visualforce page. Below is the visualforce page and extensions:

<apex:page standardController="Account" extensions="VFBasic3"> <!-- Give the name for extension -->
<apex:form >

<!-- Declare a page block to contain every thing in  -->
    <apex:pageBlock title="Account List">

<!-- Declare a page block section for formating  -->
<apex:pageBlockSection columns="1">

<!-- Declare a page block table to display the data in  -->
            <apex:PageBlockTable var="row" value="{!accList}">
            <!-- {!accList} is our list in the extension and row is our variable for each record -->
<!-- Declare a column  -->
                <apex:column headerValue="Name">

<!-- Declare a field to bind the values with-->
                    <apex:outputField value="{!row.Name}"/>
                </apex:column>
                <apex:column headerValue="Phone">
                    <apex:outputField value="{!row.Phone}"/>
                </apex:column>
                <apex:column headerValue="Fax" >
                    <apex:outputField value="{!row.Fax}"/>
                </apex:column>
            </apex:PageBlockTable>
            <hr/>
            <apex:dataTable var="row" value="{!accList}">
                <apex:column headerValue="Name" width="200">
                    <apex:outputField value="{!row.Name}"/>
                </apex:column>
                <apex:column headerValue="Phone" width="200">
                    <apex:outputField value="{!row.Phone}"/>
                </apex:column>
                <apex:column headerValue="Fax" width="100">
                    <apex:outputField value="{!row.Fax}"/>
                </apex:column>
            </apex:dataTable>
            <hr/>
            <apex:repeat var="row" value="{!accList}">
                <apex:outputField value="{!row.Name}"/>
            </apex:repeat>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>
</apex:page>
public class VFBasic3 {
public List<Account> accList{get;set;}
    //Initialize the list to avoid null pointers
    public VFBasic3(ApexPages.StandardController controller) {
        accList=getListAcc();
    }
    //Use SOQL to get records
    public List<Account> getListAcc(){
        List<Account> acc= [select Id,Name,Phone,Fax from Account limit 10];
        return acc;
    }
}
The above code is mostly self explanatory if you have any questions please post a comment.

Hope this helped you!! 

No comments:

Post a Comment