Salesforce - Developer - Visualforce - Tags

salesforce-developer-visualforce

https://developer.salesforce.com/docs/atlas.en-us.204.0.pages.meta/pages/pages_compref.htm

apex:page
  sidebar="false"
  standardController="..."

apex:pageBlock
apex:pageBlockSection

apex:detail
apex:relatedList
apex:enhancedList
apex:listViews
apex:dataTable
apex:dataList
apex:repeat
apex:pageBlockTable
apex:column

apex:outputField

apex:form
apex:inputField

apex:outputLink
apex:commandButton
Use <apex:detail> to quickly add record details to a page that uses a standard controller.
Use <apex:relatedList> to display lists of records related to the current record.
Use <apex:outputField> to display individual fields from a record.
Use <apex:pageBlockTable> to add a table of data to a page.
<apex:detail> is a coarse-grained output component that adds many fields, 
sections, buttons, and other user interface elements to the page in just one 
line of markup. Notice also that everything it adds to the page uses the 
Salesforce Classic styling. There are quite a few attributes for customizing 
the appearance of <apex:detail>. Spend a few minutes now and try changing a 
few to see what they do.
When you need even more control over your page layout, you can add fields 
individually. The <apex:outputField> component is designed for doing exactly 
that.

<apex:outputField value="{! Account.Name }"/>
<apex:outputField value="{! Account.Phone }"/>
<apex:outputField value="{! Account.Industry }"/>
<apex:outputField value="{! Account.AnnualRevenue }"/>

By itself, the <apex:outputField> only outputs the field’s value. But when you 
wrap it in <apex:pageBlock> and <apex:pageBlockSection> components, its 
behavior changes quite a bit.

The <apex:pageBlock> and <apex:pageBlockSection> components are required to 
activate the platform look and feel. When you use <apex:outputField> within a 
<apex:pageBlockSection> it adopts the two column layout, adds field labels, 
aligns and styles fields and labels nicely, and so on.

Although <apex:outputField> seems like a fine-grained component because it only 
outputs one field, it’s actually doing quite a lot. It knows if it’s being used 
inside certain other components, and changes its output and styling 
appropriately. It’s also smart about formatting and display. Notice that the 
Annual Revenue field is formatted as currency. <apex:outputField> automatically 
adapts to the data type of the field being displayed. Try adding a date, 
checklist, or picklist field to the page, and see what happens.
<apex:relatedList> grabs a list of similar data elements. For example, a list 
of contacts for the account.  <apex:relatedList> sets up a table with columns 
for each field, headers atop each column, and so on. For each item in the list, 
and for each related contact, <apex:relatedList> adds a row to the table, and 
fills in each column with the appropriate field from that record.
We can do the same thing as  <apex:relatedList> in your own Visualforce markup 
using iteration components. An iteration component works with a collection of 
similar items, instead of on a single value. For example, {!Account.contacts} 
is an expression that evaluates to a list of contacts for an account. You can 
use this expression with an iteration component to create a list or table with 
details of these related contacts.

Replace the two <apex:relatedList/> lines with the following markup.

<apex:pageBlock title="Contacts">
   <apex:pageBlockTable value="{!Account.contacts}" var="contact">
      <apex:column value="{!contact.Name}"/>
      <apex:column value="{!contact.Title}"/>
      <apex:column value="{!contact.Phone}"/>
   </apex:pageBlockTable>
</apex:pageBlock>

<apex:pageBlockTable> is an iteration component that generates a table of data, 
complete with platform styling. Here’s what’s going on in your markup.

1. The value attribute of <apex:pageBlockTable> is set to the expression 
   mentioned previously, {!Account.contacts}. This is the list of records that 
   <apex:pageBlockTable> will work with.

2. For each record in that list, one record at a time, <apex:pageBlockTable> 
   assigns that record to the variable named in the <apex:pageBlockTable>’s 
   var attribute. In this case, that variable is named contact.

3. For each record, <apex:pageBlockTable> constructs a new row in the table, 
   using the row defined by the set of <apex:column>components within the body 
   of <apex:pageBlockTable>. The <apex:column> components, in turn, use the 
   contact variable that represents the current record to pull out the field 
   values for that record.

4. Outside of the loop, <apex:pageBlockTable> uses the fields in the 
   <apex:column> components to create column headers, by looking up the label 
   for each field.

The value attribute of <apex:pageBlockTable> is set to the expression mentioned 
previously, {!Account.contacts}. This is the list of records that 
<apex:pageBlockTable> will work with.  For each record in that list, one record 
at a time, <apex:pageBlockTable> assigns that record to the variable named in 
the <apex:pageBlockTable>’s var attribute. In this case, that variable is named 
contact.  For each record, <apex:pageBlockTable> constructs a new row in the 
table, using the row defined by the set of <apex:column>components within the 
body of <apex:pageBlockTable>. The <apex:column> components, in turn, use the 
contact variable that represents the current record to pull out the field values 
for that record.  Outside of the loop, <apex:pageBlockTable> uses the fields in 
the <apex:column> components to create column headers, by looking up the label 
for each field.

<apex:pageBlockTable> is an iteration component that picks up the platform styling.
<apex:pageBlockTable> is an iteration component that picks up the platform 
styling. <apex:dataTable> and <apex:dataList> are iteration components for 
creating tables and lists without the platform styling. And <apex:repeat> 
is an iteration component that you can use to generate any arbitrary markup for 
a collection of records.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License