Page Block Component in Visual Force (Salesforce)

Page Block Component in salesforce

This component is used in visualforce to get the same look and feel which salesforce provides in details page of any record.

This component is used as a child component of <apex:page> tag and also has few child tags.

Syntax:

<apex:pageBlock>

                ……….

</apex:pageBlock>

Child component of <apex:pageBlock>:

1.       <apex:pageBlockSection>: This component creates a section in the page block which is exactly similar to the section displayed for standard detail page of any record.

·         There is a limitation in salesforce standard section that the number of columns can not be more than two but with the help of this component  you can define the number of columns in your VF page.

·         Attribute name: columns

·         Each column contains to cells, one for label and one for value.

·         If the number of columns defined for this component is two then it will place the two child component in a single row and if there are more child components then it will add it in next row.

·         If you use <apex:inputField> or <apex:outputField> component as a child component of this tag then it automatically assigns the label and value in the column.

2.       <apex:pageBlockSectionItem>: This component is used to define data in one row.

·         It can support upto two child components.

·         It renders the components dynamically in the row. For example if only one child component is defined then it will span both the column automatically.

·         This component cannot be rerendered.

·         If you will use <apex:inputField> or <apex:outputField> inside this component then its label will not be displayed in the page.

3.       <apex:pageBlockTable>: This component is used to get the list of records present in an object. This will provide you the exact look and feel of standard list view.

·         It displays one record in a row.

·         It contains one or more column component which specify the information to be displayed.

4.       <apex:pageBlockButtons>: This component is used to display the command buttons in a page with the same look and feel of standard button present in detail or edit page.

Example:

<!-- Page: -->
<apex:page standardController="Account">
    <apex:form>
        <apex:pageBlock title="My Content" mode="edit">
            <apex:pageBlockButtons>
                <apex:commandButton action="{!save}" value="Save"/>
            </apex:pageBlockButtons>
            <apex:pageBlockSection title="My Content Section" columns="2">
                <apex:inputField value="{!account.name}"/>
                <apex:inputField value="{!account.site}"/>
                <apex:inputField value="{!account.type}"/>
                <apex:inputField value="{!account.accountNumber}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>

</apex:page>