Apex pageblocksectionItem component

Apex pageblocksectionItem component

Apex pageblocksectionItem component can include up to two child components where an <apex: pageblocksection> creates one column in one row. If there is no content included in apex pageblocksectionItem component, then the content spans both cells of the column. If two child components are specified , the content of the first is rendered in left, “label” cells of the column, while the content of the second is rendered in the right , “data’’ cell of the column.

Apex pageblocksectionItem component attributes

dataStyleThis attribute is used to style the content using CSS.
dataTitleThis is used to display the pageblocksection column.
dirThis is used to display the direction of the text (RTL or LTR).
labelStyleIts a string type, these style used to display the content of the left “label” cell of the page block section column and uses all JavaScript enabled tags
renderdIt is a Boolean types, that specifies whether the component is rendered on the page or not.

In this Salesforce tutorial, we are going to create Visualforce page for addition of two number, subtraction and multiplication using apex pageblocksection and Apex pageblockSectionItem.

Visualforce page

In above Visualforce page, We have used controller “Subtraction” to perform addition, subtraction and multiplication operation. Apex : CommandButton and Apex:commandLink components must be defined inside Apex:form component.

  • Add pageblock and enter Title as “Calculator”.
  • Now add pageblocksection, Title and specify the number of columns that to be displayed.
  • Now in Apex pageblockSectionItem component, enter <apex:outputLabel> and <apex:inputText> as shown above.



Apex pageblocksectionItem component

  • Enter x value and Y value.
  • Now click on the operation that you want to perform.
  • The result will be displayed as shown above.