The <apex: pageBlockSectionItem> is another component used with the <apex: pageBlock> and <apex: pageBlockSection> components. The <apex: pageBlockSectionItem> component specifies a single data piece that contains one column in one row.
We can add up to two components inside a single <apex: pageBlockSectionItem> component. If there is no child specified inside this component, the column is rendered as an empty space.
If only a single child is specified inside this component, the contents span both cells of the column.
If two children are specified inside this component, the first component is rendered on the left, and the second is rendered on the right.
This component supports the HTML pass-through attributes by adding "html-" as a prefix.
The <apex: pageBlockSectionItem> component has the following attributes on the Visualforce page:
1. dataStyle
The "dataStyle" is a string-type attribute used for specifying the CSS style used for displaying the content of the right "data" cell of the page block section column.
Syntax:
<apex: pageBlockSectionItem dataStyle="background-color:red;"></apex: pageBlockSectionItem>
2. dataStyleClass
The "dataStyleClass" is a string-type attribute used for specifying the CSS class used for displaying the content of the right "data" cell of the page block section column.
Syntax:
<apex: pageBlockSectionItem dataStyleClass="className"></apex: pageBlockSectionItem>
3. dataTitle
The "dataTitle" is a string-type attribute used for specifying the text displayed when we hover over the right "data" cell of the page block section column.
Syntax:
<apex: pageBlockSectionItem dataTitle="Item Title"></apex: pageBlockSectionItem>
4. dir
The "dir" is a string-type attribute used for specifying the direction in which the generated HTML component should be read. RTL and LTR are the two possible values for this attribute.
AD
Syntax:
<apex: pageBlockSectionItem dir="RTL"></apex: pageBlockSectionItem>
5. helpText
The "helpText" is a string-type attribute used for specifying the text displayed as a hover-based tooltip next to this field.
Syntax:
<apex: pageBlockSectionItem helpText="Help Text"></apex: pageBlockSectionItem>
6. id
AD
The id is a string-type attribute, i.e., a unique identifier that allows this component to be referenced by other components on the page.
Syntax:
<apex: pageBlockSectionItem id="itemId"></apex: pageBlockSectionItem>
7. labelStyle
The "labelStyle" is a string-type attribute used for specifying the CSS style used for displaying the content of the left "label" cell of the page block section column.
Syntax:
<apex: pageBlockSectionItem labelStyle="background-color:red;"></apex: pageBlockSectionItem>
8. labelStyleClass
The "labelStyleClass" is a string-type attribute used for specifying the CSS class used for displaying the content of the left "label" cell of the page block section column.
Syntax:
<apex: pageBlockSectionItem labelStyleClass="className"></apex: pageBlockSectionItem>
9. labelTitle
The "labelTitle" is a string-type attribute used for specifying the text displayed when we hover over the left "label" cell of the page block section column.
Syntax:
<apex: pageBlockSectionItem lableTitle="Item Label Title"></apex: pageBlockSectionItem>
10. lang
The lang is a string-type attribute used to specify the base language that will be used for the generated HTML output. The values can be "en" or "en-US" etc.
Syntax:
<apex: pageBlockSectionItem language="en"></apex: pageBlockSectionItem>
11. onDataclick
The "onDataclick" is another string-type attribute used to specify the JavaScript method invoked when the onDataclick event occurs or when the user clicks the right "data" cell of the page block section column.
Syntax:
<apex: pageBlockSectionItem onDataclick="saveRecords();"></apex: pageBlockSectionItem >
12. onDatadblclick
The "onDatadblclick" is a string-type attribute used for specifying the JavaScript method invoked when the onDatadblclick event occurs or when the user clicks the right "data" cell of the page block section column twice.
Syntax:
<apex: pageBlockSectionItem onDatadblclick="saveRecords();"></apex: pageBlockSectionItem>
13. onDatakeydown
The "onDatakeydown" is a string-type attribute used for specifying the JavaScript method invoked when the onDatakeydown event occurs or when the user presses a keyboard key.
Syntax:
<apex: pageBlockSectionItem onDatakeydown="saveRecords();"></apex: pageBlockSectionItem>
14. onDatakeypress
The "onDatakeypress" is a string-type attribute used for specifying the JavaScript method invoked when the onDatakeypress event occurs or when the user holds down or presses a keyboard key.
Syntax:
<apex: pageBlockSectionItem onDatakeypress="saveRecords();"></apex: pageBlockSectionItem>
15. onDatakeyup
The "onDatakeyup" is a string-type attribute used to specify the JavaScript method invoked when the onDatakeyup event occurs or when the user releases a keyboard key.
Syntax:
<apex: pageBlockSectionItem onDatakeyup="saveRecords();"></apex: pageBlockSectionItem>
16. onDatamousedown
The "onDatamousedown" attribute is a string-type attribute used to invoke the JavaScript method when the onDatamousedown event occurs or when the user presses the mouse button.
Syntax:
<apex: pageBlockSectionItem onDatamousedown="countKeys();"></apex: pageBlockSectionItem>
17. onDatamousemove
The "onDatamousemove" is a string-type attribute used for specifying the JavaScript method that needs to be invoked when the onDatamousemove event occurs or when the user moves the mouse pointer.
Syntax:
<apex: pageBlockSectionItem onDatamousemove="countKeys();"></apex: pageBlockSectionItem>
18. onDatamouseout
The "onDatamouseout" is a string-type attribute used for specifying the JavaScript method invoked when the onDatamouseout event occurs or when the user moves the mouse pointer away from the right "data" cell of the page block section column.
Syntax:
<apex: pageBlockSectionItem onDatamouseout="countKeys();"></apex: pageBlockSectionItem>
19. onDatamouseover
The "onDatamouseover" attribute is a string-type attribute used to invoke the JavaScript method when the onDatamouseover event occurs or when the user moves the pointer over the right "data" cell of the page block section column.
Syntax:
<apex: pageBlockSectionItem onDatamouseover="countKeys();"></apex: pageBlockSectionItem>
20. onDatamouseup
The "onDatamouseup" is a string-type attribute used for specifying the JavaScript method that needs to be invoked when the onDatamouseup event occurs or when the user releases the mouse button.
Syntax:
<apex: pageBlockSectionItem onDatamouseup="countKeys();"></apex: pageBlockSectionItem>
21. onLabelclick
The "onLabelclick" is a string-type attribute used for specifying the JavaScript method invoked when the onLabelclick event occurs or when the user clicks the left label cell of the page block section column.
Syntax:
<apex: pageBlockSectionItem onLabelclick="countKeys();"></apex: pageBlockSectionItem>
22. onLabeldblclick
The "onLabeldblclick" is a string-type attribute used for specifying the JavaScript method invoked when the onLabeldblclick event occurs or when the user clicks the left label cell of the page block section column twice.
Syntax:
<apex: pageBlockSectionItem onLabeldblclick="countKeys();"></apex: pageBlockSectionItem>
23. onLabelkeydown
The "onLabelkeydown" is a string-type attribute used for specifying the JavaScript method invoked when the onLabelkeydown event occurs or when the user presses a keyboard key.
Syntax:
<apex: pageBlockSectionItem onLabelkeydown="countKeys();"></apex: pageBlockSectionItem>
24. onLabelkeypress
The "onLabelkeypress" is a string-type attribute used to specify the JavaScript method invoked when the onLabelkeypress event occurs or when the user presses or holds a keyboard key.
Syntax:
<apex: pageBlockSectionItem onLabelkeypress="countKeys();"></apex: pageBlockSectionItem>
25. onLabelkeyup
The "onLabelkeyup" is a string-type attribute used for specifying the JavaScript method invoked when the onLabelkeyup event occurs or when the user releases a keyboard key.
Syntax:
<apex: pageBlockSectionItem onLabelkeyup="countKeys();"></apex: pageBlockSectionItem>
26. onLabelmousedown
The "onLabelmousedown" is a string-type attribute used to specify the JavaScript method invoked when the onLabelmousedown event occurs or when the user clicks a mouse button.
Syntax:
<apex: pageBlockSectionItem onLabelmousedown="countKeys();"></apex: pageBlockSectionItem>
27. onLabelmousemove
The "onLabelmousedown" is a string-type attribute used for specifying the JavaScript method invoked when the onLabelmousemove event occurs or when the user moves the mouse pointer.
Syntax:
<apex: pageBlockSectionItem onLabelmousemove="countKeys();"></apex: pageBlockSectionItem>
28. onLabelmouseout
The "onLabelmouseout" is a string-type attribute used for specifying the JavaScript method invoked when the onLabelmouseout event occurs or when the user moves the mouse pointer away from the left label cell of the page block section column.
Syntax:
<apex: pageBlockSectionItem onLabelmouseout="countKeys();"></apex: pageBlockSectionItem>
29. onLabelmouseover
The "onLabelmouseover" is a string-type attribute used for specifying the JavaScript method invoked when the onLabelmouseover event occurs or when the user moves the mouse pointer over the left label cell of the page block section column.
Syntax:
<apex: pageBlockSectionItem onLabelmouseover="countKeys();"></apex: pageBlockSectionItem>
30. onLabelmouseup
The "onLabelmouseup" is a string-type attribute used to specify the JavaScript method invoked when the onLabelmouseup event occurs or when the user releases the mouse button.
Syntax:
<apex: pageBlockSectionItem onLabelmouseup="countKeys();"></apex: pageBlockSectionItem>
31. rendered
The "rendered" is a boolean-type attribute used to specify whether the component is rendered on the page. The Boolean value true is set as a default value for this attribute.
Syntax:
<apex: pageBlockSectionItem rendered="false"></apex: pageBlockSectionItem>
Let's take an example to understand how we can use this component on the Visualforce page:
<!-- apex page to understand the functioning of <apex: pageBlockSectionItem> -->
<apex:page standardController="Contact">
<!-- use the form to show contact information-->
<apex:form>
<apex:pageBlock title="Contact Information" mode="edit">
<!-- user <apex: pageBlockButtons> to create a save button -->
<apex:pageBlockButtons>
<apex:commandButton action="{!save}" value="Save"/>
</apex:pageBlockButtons>
<!-- use <apex: pageBlockSection> to display general information-->
<apex:pageBlockSection title="Basic Information" columns="2">
<!-- use <apex: pageBlockSectionItem> for displaying each fields-->
<apex:pageBlockSectionItem>
<apex:outputLabel value="Contact Name" for="conName"/>
<apex:inputText value="{!contact.Name}" id="conName"/>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem>
<apex:outputLabel value="Contact Phone" for="phone"/>
<apex:inputText value="{!contact.Phone}" id="phone"/>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem>
<apex:outputLabel value="Contact Email" for="email"/>
<apex:inputText value="{!contact.Email}" id="email"/>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem>
<apex:outputLabel value="Lead Source" for="leadSource"/>
<apex:inputText value="{!contact.LeadSource}" id="leadSource"/>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
