Salesforce-Visualforce-2.内置组件(components)

一、Visualforce内置组件（built-in components）

1.简介

Visualforce 拥有近 150 个可在页面上使用的内置组件。

Visualforce 标准组件（ Standard Component Reference ）引用中列出了这些组件，并记录了它们的属性，包括如何使用组件的示例代码。

示例代码：

<apex:page sidebar="false" showHeader="false">
    <h1>Hello World</h1>
</apex:page>
1
2
3

※sidebar 和 showHeader 属性在 Lightning Experience 中无效，并且无法抑制 Lightning Experience 标头。虽然 showHeader 默认值是 true，但是它对 Lightning Experience 无效。

Note that both the sidebar and showHeader attribute have no effect in Lightning Experience, and that there’s no way to suppress the Lightning Experience header. Although the default value of showHeader is true, it has no effect in Lightning Experience.

页面包含一些 Salesforce 样式表，可匹配 Salesforce 选择的字体、大小等。要抑制 Salesforce 的所有输出，同样需要添加 standardStylesheets=“false” 来删除样式。

The page still includes some Salesforce style sheets, which let you match Salesforce choices for fonts, size, and so on. To suppress all Salesforce output, add standardStylesheets=“false” to remove the styles as well.

2.原理

请求页面时，组件会呈现为 HTML、CSS 或 JavaScript。

3.组件分类

• 粗粒度组件(Coarse-grained components)：在单个组件中提供了大量功能，并且会向使用它的页面添加大量信息和用户界面。向页面快速添加大量功能
• 细粒度组件(Fine-grained components)：提供更核心的功能，能够设计外观和行为符合需求的页面。更好地控制页面的特定细节

二、组件介绍

1. < apex:pageBlock >

是一种结构化的用户界面元素，用于对页面上的相关项目进行分组

2. < apex:pageBlockSection>

是向页面添加结构和层级的另一个组件。显示时，用户可以折叠 < apex:pageBlockSection> 元素以隐藏除节标题以外的所有元素。需要嵌套在 apex:pageBlock 标签内，否则无法使用

3.迭代组件< apex:repeat >

• Use the apex:outputLink component to link to the respective record detail page
• Record detail pages can be reached by placing a record ID at the root of the URL (e.g. < record id >)

<apex:page standardController="Account" recordSetVar="accounts">
    <apex:pageBlock >
        <apex:repeat value="{! accounts}" var="a">
            <ul>
                <li>
                    <apex:outputLink value="{! URLFOR($Action.Account.View,a.Id)}">
                        {!a.name}
                    </apex:outputLink>
                </li>
            </ul>            
        </apex:repeat>
    </apex:pageBlock>
</apex:page>
1
2
3
4
5
6
7
8
9
10
11
12
13

预览结果：

点击任意link，显示该Account的详细页面

4.< apex:detail>：粗粒度组件

将record的详细信息快速添加到使用标准控制器的页面。该组件显示特定记录详细信息，以及相关记录的列表，例如联系人、个案、业务机会等。

注意，通过这个组件添加到页面的所有内容都使用 Salesforce Classic 样式

• 示例代码：

< apex:page standardController="Account">
    < apex:detail />
1
2

• 执行结果：
  

5.< apex:relatedList>

使用 < apex:relatedList> 显示与当前记录相关的记录列表。

• 代码示例：
  不显示关联list：可以在 < apex:detail> 组件添加 relatedList=“false”

< apex:page standardController="Account">
    < apex:detail relatedList="false"/>
1
2

显示个别关联list：在 <apex:detail /> 行的下方，添加以下标记。
以下代码结果将除详细信息外，只显示【联系人】和【业务机会】两个关联list

< apex:page standardController="Account">
    < apex:detail relatedList="false"/>
    < apex:relatedList list="Contacts"/>
　　< apex:relatedList list="Opportunities" pageSize="5"/>
1
2
3
4

6.< apex:enhancedList>

7.< apex:listViews>

6和7组合可以取代< apex:relatedList>

8.< apex:outputField>：细粒度组件

显示记录中的单个字段，本身只输出字段的值。自动适应正在显示字段的数据类型，例如下面示例的货币类型数据，输出类型为货币，而不是上一篇文章看到的科学计数法

• 代码示例：

<apex:page standardController="Account">
    <apex:outputField value="{! Account.Name }"/>
    <apex:outputField value="{! Account.Phone }"/>
    <apex:outputField value="{! Account.Industry }"/>
    <apex:outputField value="{! Account.AnnualRevenue }"/>
</apex:page>
1
2
3
4
5
6

• 预览结果：
  
• 如果将其封装在 < apex:pageBlock> 中：

<apex:page standardController="Account">
    <apex:pageBlock title="Account Details">   
        <apex:outputField value="{! Account.Name }"/>
        <apex:outputField value="{! Account.Phone }"/>
        <apex:outputField value="{! Account.Industry }"/>
        <apex:outputField value="{! Account.AnnualRevenue }"/>
</apex:pageBlock>
</apex:page>
1
2
3
4
5
6
7
8

• 预览结果：
  
• 将其封装在 < apex:pageBlockSection> 中：

< apex:page standardController="Account">
    < apex:pageBlock title="Account Details">
        < apex:pageBlockSection >
            < apex:outputField value="{! Account.Name }"/>
            < apex:outputField value="{! Account.Phone }"/>
            < apex:outputField value="{! Account.Industry }"/>
            < apex:outputField value="{! Account.AnnualRevenue }"/>
1
2
3
4
5
6
7

• 预览结果：
  

9.迭代组件< apex:pageBlockTable>

• 迭代组件：可以使用迭代组件在自己的 Visualforce 标记中执行相同的操作。迭代组件处理类似项的集合，而不是单个值。
  如下示例中 {!Account.contacts} 是一个表达式，计算结果为客户的联系人列表。可以将此表达式与迭代组件一起使用，以创建包含这些相关联系人详细信息的列表或表格。

• < apex:pageBlockTable> ：用于生成数据表，并带有平台样式。采用了 Salesforce Classic 样式
  value属性设置为前面提到的表达式 {!Account.contacts}。这是 < apex:pageBlockTable> 使用的记录列表。
  < apex:pageBlockTable> 将该记录分配给 < apex:pageBlockTable> 的 var 属性中命名的变量（contact）

10.迭代组件< apex:column>

依次使用表示当前记录的 contact 变量来提取该记录的字段值。通过查找每个字段标签的方式来创建列标题。

• 9、10示例：

<apex:page standardController="Account">
    <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:page>
1
2
3
4
5
6
7
8
9

• 执行结果：
  

11.迭代组件apex:dataTable

12.迭代组件< apex:dataList>

13.< apex:form>

• ①简单示例代码

<apex:page standardController="Account">
    <h1>Edit Account</h1>
    <apex:form>
        <apex:inputField value="{! Account.Name }"/>
        <apex:commandButton action="{! save }" value="Save" />
    </apex:form>
</apex:page>
1
2
3
4
5
6
7

• 代码解析:
  < apex:page> ：定义客户标准控制器"Account"
  < apex:form> ：它将内部的所有内容打包成页面操作的一部分，并将其发送回服务器。※如果需要将数据发送回 Salesforce，大多数情况下会在 < apex:form> 中进行
  < apex:inputField> ：为与之关联的记录数据字段创建单页表单字段。可以通过引用 value 属性中相关字段的表达式来实现
  < apex:commandButton> ：将一个按钮添加到页面的用户界面。单击此按钮时会触发一个操作。这种情况下，操作是标准控制器中的 save()操作方法。与 < apex:inputField> 一样，通过引用要提供给 < apex:commandButton> 操作属性的表达式中调用的操作方法，将 < apex:commandButton> 与操作关联起来。
• 预览结果
  
• ②添加字段标签和平台样式

<apex:page standardController="Account">
    <apex:form>
    <apex:pageBlock title="Edit Account">
        <apex:pageBlockSection>
            <apex:pageBlockSection columns="1">
                <apex:inputField value="{! Account.Name }"/>
                <apex:inputField value="{! Account.Phone }"/>
                <apex:inputField value="{! Account.Industry }"/>
                <apex:inputField value="{! Account.AnnualRevenue }"/>
            </apex:pageBlockSection>
        </apex:pageBlockSection>
        <apex:pageBlockButtons>
            <apex:commandButton action="{! save }" value="Save" />
        </apex:pageBlockButtons>
    </apex:pageBlock>
    </apex:form>
</apex:page>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• 代码解析：
  < apex:inputField> ：根据标准或自定义对象字段的类型呈现相应的输入小部件。
  例如，当使用 < apex:inputField> 标记来显示日期字段时，表单上会显示一个日历小部件。如果使用 < apex:inputField> 标签来显示选项列表字段，会显示一个下拉列表。
  < apex:inputField> 可用于捕获任何标准或自定义对象字段的用户输入，并尊重字段定义中设置的任意元数据，例如该字段是必需的还是唯一的，或者当前用户是否拥有查看或编辑权限。
• 预览结果：
  
• ③显示表单错误和消息
  < apex:pageMessages> ：显示任何表单处理错误或消息。当出现问题时，页面应提供有用的反馈，例如缺少必填字段或字段值未通过验证。标准控制器会处理这一切。只需要告诉标准控制器信息放置在页面的哪个位置。

<apex:page standardController="Account">
    <apex:form>
    <apex:pageBlock title="Edit Account">
        <apex:pageMessages/>
        <apex:pageBlockSection>
            <apex:pageBlockSection columns="1">
                <apex:inputField value="{! Account.Name }"/>
                <apex:inputField value="{! Account.Phone }"/>
                <apex:inputField value="{! Account.Industry }"/>
                <apex:inputField value="{! Account.AnnualRevenue }"/>
            </apex:pageBlockSection>
        </apex:pageBlockSection>
        <apex:pageBlockButtons>
            <apex:commandButton action="{! save }" value="Save" />
        </apex:pageBlockButtons>
    </apex:pageBlock>
    </apex:form>
</apex:page>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• ④编辑相关记录

<apex:pageBlock title="Contacts">
        <apex:pageBlockTable value="{!Account.contacts}" var="contact">
            <apex:column>
                <apex:outputLink
                    value="{! URLFOR($Action.Contact.Edit, contact.Id) }">
                    Edit
                </apex:outputLink>
                  
                <apex:outputLink
                    value="{! URLFOR($Action.Contact.Delete, contact.Id) }">
                    Del
                </apex:outputLink>
            </apex:column>
            <apex:column value="{!contact.Name}"/>
            <apex:column value="{!contact.Title}"/>
            <apex:column value="{!contact.Phone}"/>
        </apex:pageBlockTable>
</apex:pageBlock>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• 预览结果
  

14.< apex:inputField>

具体示例参照13

15.< apex:commandButton>

具体示例参照13

16.< apex:pageMessages>

具体示例参照13

17.< apex:selectList>

具体示例参照：Salesforce-Visualforce-5.标准列表控制器(Standard List Controllers)

18.< apex:actionSupport>

具体示例参照：Salesforce-Visualforce-5.标准列表控制器(Standard List Controllers)

19.< apex:commmandLink>

具体示例参照：Salesforce-Visualforce-5.标准列表控制器(Standard List Controllers)

20.< apex:facet>：

具体示例参照：salesforce-Visualforce-7.自定义控制器(Custom Controllers)

Resources

Building a Table of Data in a Page
Create Visualforce Pages
Developer Console Functionality
Developing Visualforce With Your Browser
Displaying Related Lists for Custom Objects
Displaying Field Values with Visualforce
Using the Editor for Visualforce or Apex
Using the Visualforce Component Library
Using Input Components in a Page
Using Standard Controller Actions
Tools for Visualforce Development
Standard Component Reference
Standard Controllers
The Salesforce Extensions for Visual Studio Code
Lightning Platform Tools and Toolkits
Valid Values for the $Action Global Variable