anusha(salesforce developer)

Friday, 29 July 2016

How To Use APEX:PAGEBLOCKSECTION In Visualforce Page? 


<apex:pageBlockSection> :
This tag helps to create a section inside a page block. Multiple sections can be created in a page block and each section can be used to display any fields (input/output).
       
   A pageBlockSection component consists of one or more columns, By default it's two.each of which spans two cells: one for a field's label, and one for its value. Each component found in the body of an < apex:pageBlockSection > is placed into the next cell in a row until the number of columns is reached. 

This tag supports following attributes:

Attribute
Description
collapsible
A Boolean value that specifies whether the page block section can be expanded and collapsed by a user. If true, a user can expand and collapse the section. If not specified, this value defaults to true.
columns
The number of columns that can be included in a single row of the page block section. Note that a single column spans two cells - one for a field's label, and one for its value. If you use child inputField, outputField, or pageBlockSectionItem components in the pageBlockSection, each of the child components is displayed in one column, spanning both cells. If you use any other components in the pageBlockSection, each of the child components is displayed in one column, displaying only in the rightmost cell of the column and leaving the leftmost column cell blank. While you can specify one or more columns for a pageBlockSection, Salesforce stylesheets are optimized for either one or two columns. If not specified, this value defaults to 2.
dir
The direction in which the generated HTML component should be read. Possible values include "RTL" (right to left) or "LTR" (left to right).
id
An identifier that allows the pageBlockSection component to be referenced by other components in the page.
lang
The base language for the generated HTML output, for example, "en" or "en-US".
onclick
The JavaScript invoked if the onclick event occurs that is, if the user clicks the page block section.
ondblclick
The JavaScript invoked if the ondblclick event occurs that is, if the user clicks the page block section twice.
onkeydown
The JavaScript invoked if the onkeydown event occurs that is, if the user presses a keyboard key.
onkeypress
The JavaScript invoked if the onkeypress event occurs that is, if the user presses or holds down a keyboard key.
onkeyup
The JavaScript invoked if the onkeyup event occurs that is, if the user releases a keyboard key.
onmousedown
The JavaScript invoked if the onmousedown event occurs that is, if the user clicks a mouse button.
onmousemove
The JavaScript invoked if the onmousemove event occurs that is, if the user moves the mouse pointer.
onmouseout
The JavaScript invoked if the onmouseout event occurs that is, if the user moves the mouse pointer away from the page block section.
onmouseover
The JavaScript invoked if the onmouseover event occurs that is, if the user moves the mouse pointer over the page block section.
onmouseup
The JavaScript invoked if the onmouseup event occurs that is, if the user releases the mouse button.
rendered
A Boolean value that specifies whether the component is rendered on the page. If not specified, this value defaults to true.
showHeader
A Boolean value that specifies whether the page block section title is displayed. If set to true, the header is displayed. If not specified, this value defaults to true.
title
The text displayed as the title of the page block section.

Visualforce Example :

<apex:page standardController="Account">
    <apex:form >
        <apex:pageBlock title="Accountt" mode="edit">
              <apex:pageBlockSection title="My Account details" 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>

save image

No comments:

Post a Comment