为了展示 Visualforce 的基本元素，本章包括一组示例： 演示语言的功能。虽然这些示例没有涉及每个细节，但规则或 例外，新的 Visualforce 开发人员可以使用本教程来 了解 Visualforce 的工作原理，然后再继续阅读 本指南的其余部分。

这些示例分为初级和高级部分。初学者的例子主要是 使用 Visualforce 标记。高级示例除了使用 Lightning Platform Apex 代码外，还使用 Visualforce 标记。

高深 需要 Apex 的示例在它们自己的章节中。

成功编译 Visualforce

您无法保存 Visualforce 页面 和组件，除非它们正确编译。以下是以下需要注意的事项 创建 Visualforce 页面：

• 验证组件标记是否以正确的命名空间标识符开头，例如 — 即后跟冒号。apex:apex
• 确保每个开头的引号和括号都有一个结束的引号。
• 验证控制器或控制器扩展的名称是否正确。
• Visualforce 页面和组件 使用 Salesforce API 版本创建 19.0 或更高版本必须编写为格式正确的 XML。通常，这意味着元素必须 正确嵌套的非空元素必须具有结束标记，空元素必须终止 带有右斜杠 （“”），依此类推。这 万维网联盟 （W3C） 提供了一篇文章 关于格式良好的 XML 的规范。/允许以下例外情况：
  • JavaScript 中允许违反格式正确的 XML 的代码。例如，你没有 需要在 Visualforce 中使用标签。<![CDATA[]]>
  • 表达式中允许使用违反格式正确的 XML 的代码。例如，您 不需要在公式中转义引号。
  • 通常在页面开头需要的 XML 指令（如 ）可以 出现在顶级容器标记中，如 和 。<?xml version=”1.0″ encoding=”UTF-8″?><apex:page><apex:component>

创建您的第一个页面

启用开发模式后，您将 可以通过在浏览器中输入页面的 URL 来创建您的第一个 Visualforce 页面 地址栏作为 遵循：

https://MyDomainName.my.salesforce.com/apex/myNewPageName

例如，如果您想创建一个名为“HelloWorld”的页面和您的 Salesforce 组织使用 ，输入 http:// MyDomainName.my.salesforce.com/apex/HelloWorld。MyDomainName.my.salesforce.com

由于该页面尚不存在，因此系统会将您定向到中介 页面，您可以从中创建新页面。单击创建 页面 <myNewPageName> 创建它 自然而然。

注意

如果您没有 Visualforce 启用开发模式后，您还可以通过输入“快速查找”框从“设置”中创建新页面， 然后选择 Visualforce 页面，然后单击“新建”。Visualforce Pages

Visualforce 页面始终可以 从设置的这一部分进行编辑，但要查看编辑结果，您必须 导航到页面的 URL。出于这个原因，大多数开发人员更喜欢工作 启用开发模式，以便他们可以在单个中查看和编辑页面 窗。

新的 Visualforce 页面

你现在有 包含默认文本的 Visualforce 页面。要编辑新页面，请点击 显示在底部的页面编辑器栏 的浏览器。它将展开以显示以下 Visualforce 标记：

<apex:page>
    <!-- Begin Default Content REMOVE THIS -->
    <h1>Congratulations</h1>
    This is your new Apex Page: HelloWorld
    <!-- End Default Content REMOVE THIS -->
</apex:page>

此默认标记包含任何页面唯一必需的标记 — 标记 开始和结束任何页面标记。嵌入在开始和结束标记中的是纯文本， 其中一些使用标准 HTML 标记 .<apex:page><apex:page><h1>

只要保留所需的标签，就可以添加尽可能多的纯文本或有效标签 HTML 添加到此页面。例如，在输入以下内容后 代码，然后在页面编辑器中单击“保存”， 页面以粗体显示文本“Hello World！”：<apex:page>

<apex:page>
    <b>Hello World!</b>
</apex:page>

提示

注意警告 – 如果您使用 HTML 保存页面，则 Visualforce 编辑器会显示警告 不要为每个打开的标签都包含匹配的结束标签。虽然 页面保存时，此格式错误的 HTML 可能会导致渲染出现问题 页。

使用 Visualforce 显示字段值

Visualforce 页面使用 与公式相同的表达式语言，也就是说，其中的任何内容都被计算为可以 从当前位于上下文中的记录中访问值。{! }例如，您可以 通过向页面添加表达式来显示当前用户的名字：{!$User.FirstName}

<apex:page>
    Hello {!$User.FirstName}!
</apex:page>

$User是一个全局变量，总是 表示当前用户记录。所有全局变量都使用 $ 符号引用。 有关可在 Visualforce 中使用的全局变量列表，请参阅全局变量。

访问字段 来自全球不可用的记录，例如特定客户、联系人或 自定义对象记录，您需要将页面与控制器关联。 控制器为页面提供数据和业务逻辑，这些数据和业务逻辑使应用程序成为现实 run，包括指定如何访问特定对象的记录的逻辑。 虽然您可以使用 Apex 为任何页面定义自定义控制器，但 Salesforce 包括标准 每个标准和自定义对象的控制器。

例如，要对帐户使用标准控制器，请将属性添加到标记中，并为其分配 Account 对象：standardController<apex:page>

<apex:page standardController="Account">
    Hello {!$User.FirstName}!
</apex:page>

保存页面后，页面的“帐户”选项卡将突出显示，并且 页面上组件的外观与“帐户”选项卡匹配。此外，您 现在，可以使用表达式语法访问当前在上下文中的客户记录上的字段。{!account.<fieldName>}

例如，若要在页面上显示帐户名称，请在页面标记中使用：{!account.name}

<apex:page standardController="Account">
    Hello {!$User.FirstName}!
    <p>You are viewing the {!account.name} account.</p>
</apex:page>

表达式调用 标准帐户中的方法 controller 返回当前在上下文中的帐户的记录 ID。然后它使用 dot 表示法来访问该字段 记录。

{!account.name}getAccount()name

注意

保存页面时，所有输入的属性 组件—, ,等 – 经过验证以确保 它是一个表达式，没有文字文本或空格，是一个 对单个控制器方法或对象属性的有效引用。value<apex:inputField><apex:inputText>错误 将阻止保存页面。若要将客户记录引入当前上下文，必须 向指定记录 ID 的页面 URL 添加查询参数。为此，请执行以下操作：

1. 通过您希望的任何方式查找帐户的 ID。一种简单的方法是查看 客户记录的详细信息页面，并复制 网址。例如，如果您导航到包含以下内容的帐户详细信息页面 网址：https://MyDomainName.my.salesforce.com/001D000000IRt53然后是 帐户。001D000000IRt53
2. 返回页面，将帐户 ID 作为查询字符串参数添加到 浏览器的地址栏。例如，如果您的页面位于 在：https://MyDomainName.my.salesforce.com/apex/HelloWorld2添加到末尾 这 网址：?id=001D000000IRt53https://MyDomainName.my.salesforce.com/apex/HelloWorld2?id=001D000000IRt53

注意

如果在 URL 中使用该参数，则必须引用 到标准控制器中引用的同一实体。id

在 URL 中指定帐户 ID 后，页面将显示相应的帐户 名称，如下图所示。

在 Visualforce 中显示帐户数据 页

使用 Visualforce 组件库

到目前为止，示例中唯一使用的 Visualforce 标记是必须放置的必需标记 在所有 Visualforce 标记的开头和结尾。但是，就像您可以将图像或表格插入 带有 or 标签的 HTML 文档， 您可以使用 Visualforce 组件库中定义的标签将用户界面组件添加到 Visualforce 页面。<apex:page><img><table>

例如，要添加一个组件，该组件看起来像 详情页面中，请使用 component 标签：<apex:pageBlock>

<apex:page standardController="Account">
    <apex:pageBlock title="Hello {!$User.FirstName}!"> 
            You are viewing the {!account.name} account.
    </apex:pageBlock> 
</apex:page>

<apex：pageBlock> 组件

其他常见的 Salesforce 界面也存在标签 组件，例如相关列表、详细信息页面和输入字段。 例如，要添加详情页面的内容，请使用 component 标签：<apex:detail>

<apex:page standardController="Account">
    <apex:pageBlock title="Hello {!$User.FirstName}!">
        You are viewing the {!account.name} account.
    </apex:pageBlock>
    <apex:detail/> 
</apex:page>

<apex：detail> 组件不带 属性

标签上没有任何指定属性，显示完整的 上下文记录的详细信息视图。如果要修改属性 例如，显示哪些记录详细信息，或者是否相关列表 或者标题出现时，可以在标签上使用属性。例如 以下标记显示上下文帐户的 所有者，没有相关列表或彩色标题栏：<apex:detail>

<apex:page standardController="Account">
    <apex:pageBlock title="Hello {!$User.FirstName}!">
        You are viewing the {!account.name} account.
    </apex:pageBlock>
    <apex:detail subject="{!account.ownerId}" relatedList="false" title="false"/> 
</apex:page>

<apex：detail> 组件不带 相关列表或标题元素

如果更新或编辑了组件，则引用该组件的 Visualforce 页面也会 更新。

要浏览组件库，请单击“页面编辑器”中的“组件引用”。在此页面中，您可以向下钻取到任何组件 以查看每个属性可用的属性，包括任何自定义属性 您定义的组件。

使用 Visualforce 页面覆盖现有页面

假设您要更改现有页面的格式，例如标准帐户 详情页面。帐户的所有信息都显示在一个页面上。如果有很多 的信息，你最终可能会做很多滚动。使用 Visualforce 页面，您可以 使客户的每个部分显示在选项卡中，例如联系人、商机等 上。

首先，使用快速修复创建一个新的 Visualforce 页面。

1. 在浏览器中，将文本 /apex/tabbedAccount 添加到 您的 Salesforce 实例。例如，如果您的 Salesforce 实例是 https:// MyDomainName.my.salesforce.com， 新 URL 将为 https:// MyDomainName.my.salesforce.com/apex/tabbedAccount。 您将收到以下错误消息：
2. 单击“创建页面”tabbedAccount“以创建新页面。
3. 单击页面左下角的“页面编辑器”链接。这将显示 新页面的代码，应如下所示 这：<apex:page> <!-- Begin Default Content REMOVE THIS --> <h1>Congratulations</h1> This is your new Page: tabbedAccount <!-- End Default Content REMOVE THIS --> </apex:page>
4. 将现有代码替换为以下内容，然后单击“保存”：<apex:page standardController="Account" showHeader="true" tabStyle="account" > <style> .activeTab {background-color: #236FBD; color:white; background-image:none} .inactiveTab { background-color: lightgrey; color:black; background-image:none} </style> <apex:tabPanel switchType="client" selectedTab="tabdetails" id="AccountTabPanel" tabClass='activeTab' inactiveTabClass='inactiveTab'> <apex:tab label="Details" name="AccDetails" id="tabdetails"> <apex:detail relatedList="false" title="true"/> </apex:tab> <apex:tab label="Contacts" name="Contacts" id="tabContact"> <apex:relatedList subject="{!account}" list="contacts" /> </apex:tab> <apex:tab label="Opportunities" name="Opportunities" id="tabOpp"> <apex:relatedList subject="{!account}" list="opportunities" /> </apex:tab> <apex:tab label="Open Activities" name="OpenActivities" id="tabOpenAct"> <apex:relatedList subject="{!account}" list="OpenActivities" /> </apex:tab> <apex:tab label="Notes and Attachments" name="NotesAndAttachments" id="tabNoteAtt"> <apex:relatedList subject="{!account}" list="CombinedAttachments" /> </apex:tab> </apex:tabPanel> </apex:page>
5. 请注意，“帐户”页面中没有数据。您需要指定 ID URL 中的特定帐户，就像您在前面的页面中所做的那样，例如 https:// MyDomainName.my.salesforce.com/apex/tabbedAccount?id=001D000000IRt53。 添加帐户 ID 后，您的页面应显示如下：

关于页面标记的注意事项：

• <style>实际上是 CSS 标记的一部分，而不是 Visualforce 标记。它定义了两种类型的选项卡的样式：activeTab 和 inactiveTab。
• <apex:tabPanel>用于生成 制表符。请注意它如何使用以下属性：
  • tabClassattribute：指定样式 用于在选项卡处于活动状态时显示选项卡的类。
  • inactiveTabClassattribute：指定 用于在选项卡处于非活动状态时显示选项卡的样式类。
• 在选项卡面板的定义中，是每个子选项卡组件的定义。第一个选项卡使用标记返回该部分 的详细信息视图的 页：<apex:tab><apex:detail><apex:tab label="Details" name="AccDetails" id="tabdetails"> <apex:detail relatedList="false" title="true"/> </apex:tab>而 其余选项卡使用 指定帐户的不同部分 页。以下是联系人的选项卡。它使用现有的联系人列表。<apex:relatedList><apex:tab label="Contacts" name="Contacts" id="tabContact"> <apex:relatedList subject="{!account}" list="contacts" /> </apex:tab>

现在，您已经创建了一个页面来显示带有选项卡的帐户，您可以使用此页面来 覆盖所有帐户的详细信息视图。

1. 从帐户的对象管理设置中，转到按钮、链接和操作。
2. 单击“查看”旁边的“编辑”。
3. 在“Salesforce Classic”部分中，选择“Visualforce” 页面。
4. 从“Visualforce”页面下拉列表中，选择“tabbedAccount”。
5. 点击保存。

单击“帐户”选项卡，然后选择任何帐户。现在将显示帐户的详细信息 带标签。

重定向到标准对象列表 页

对于将用户导航到标准选项卡的按钮或链接，您需要 可以重定向内容以显示标准对象列表。使用以下标记创建 Visualforce 页面：

<apex:page action="{!URLFOR($Action.Account.List, $ObjectType.Account)}"/>

用户将看到一个类似于以下内容的页面：

覆盖帐户详细信息页面Visualforce 页面还可以引用其他标准对象，例如联系人、 通过更改对标准对象的引用。例如：

<apex:page action="{!URLFOR($Action.Contact.List, $ObjectType.Contact)}"/>

在页面中使用输入组件

到目前为止，本快速入门教程中的示例展示了在 Visualforce 页面。捕获 来自用户的输入，请使用标记 具有一个或多个输入组件和 OR 标记来提交表单。<apex:form><apex:commandLink><apex:commandButton>

表单中最常使用的输入组件标记是 。此标记呈现 基于标准或自定义对象字段类型的相应输入小组件。为 例如，如果您使用标签 若要显示日期字段，表单上会显示一个日历小组件。如果您使用标签显示选择列表 字段中，则会显示一个下拉列表。该标记可用于捕获任何 标准或自定义对象字段，并遵循在该字段上设置的任何元数据 定义，例如字段是必填字段还是唯一字段，或者当前用户是否为 有权查看或编辑它。<apex:inputField><apex:inputField><apex:inputField><apex:inputField>

例如，以下页面允许用户编辑和保存帐户的名称：

注意

请记住，要使此页面显示帐户数据，有效的 ID 必须在页面的 URL 中将客户记录指定为查询参数。为 例：

https://Salesforce_instance/apex/myPage?id=001x000xxx3Jsxb

<apex:page standardController="Account">
    <apex:form> 
        <apex:pageBlock title="Hello {!$User.FirstName}!">
            You are viewing the {!account.name} account. <p/>
            Change Account Name: <p/> 
            <apex:inputField value="{!account.name}"/> <p/>
            <apex:commandButton action="{!save}" value="Save New Account Name"/> 
        </apex:pageBlock>
    </apex:form> 
</apex:page>

请注意，在示例中：

• 标签已绑定 通过设置标签的属性添加到帐户名称字段。表达式 包含熟悉的点表示法，用于在 页。<apex:inputField>value{!account.name}
• 标签具有属性。的值 此属性调用操作 的标准帐户控制器，其执行方式与标准帐户编辑页面上的“保存”按钮相同。<apex:commandButton>actionsave

注意

保存页面时，所有输入的属性 组件—, ,等 – 经过验证以确保 它是一个表达式，没有文字文本或空格，是一个 对单个控制器方法或对象属性的有效引用。value<apex:inputField><apex:inputText>错误 将阻止保存页面。

<apex：form> 组件具有单个 输入字段

标记无法显示的唯一字段是定义为自定义控制器类的成员变量的字段 用 Apex 写。若要收集这些变量的数据，请改用 、 、 或 标记。<apex:inputField><apex:inputCheckbox><apex:inputHidden><apex:inputSecret><apex:inputText><apex:inputTextarea>

添加和自定义输入字段标签

在组件内部使用时，Visualforce 输入组件和某些输出组件会自动显示 字段的表单标签。对于映射到标准或 自定义对象字段，显示的标签为对象字段标签 默认情况下。要覆盖默认值，并且对于 不直接映射到对象字段，您可以设置标签 使用属性 的组件。例如：<apex:pageBlockSection>label

<apex:page standardController="Contact">
    <apex:form>
        <apex:pageBlock title="Quick Edit: {!Contact.Name}">
            <apex:pageBlockSection title="Contact Details" columns="1">
                <apex:inputField value="{!Contact.Phone}"/>
                <apex:outputField value="{!Contact.MobilePhone}" 
                    label="Mobile #"/>
                <apex:inputText value="{!Contact.Email}" 
                    label="{!Contact.FirstName + '’s Email'}"/>
            </apex:pageBlockSection>
            <apex:pageBlockButtons >
                <apex:commandButton action="{!save}" value="Save"/>
            </apex:pageBlockButtons>
        </apex:pageBlock>
    </apex:form>
</apex:page>

注意

要使此页面显示联系人数据， 必须将有效联系人记录的 ID 指定为查询参数 在页面的 URL 中。例如

https://Salesforce_instance/apex/myPage?id=003D000000Q513R

该属性可能 是字符串，或者是计算结果为字符串的表达式。如果设置为空字符串，则窗体 该字段的标签将被禁止显示。labellabel

该属性可以 在以下 Visualforce 组件上设置：label

• <apex:inputCheckbox>
• <apex:inputField>
• <apex:inputSecret>
• <apex:inputText>
• <apex:inputTextarea>
• <apex:outputField>
• <apex:outputText>
• <apex:selectCheckboxes>
• <apex:selectList>
• <apex:selectRadio>

自定义标签和错误消息

设置后， 该属性将是 用于组件级错误消息，例如，当字段 是必需的或必须是唯一的。自定义标签不会在自定义中使用 错误消息，并将改用默认对象字段标签。 如果设置属性 设置为空字符串，默认对象字段标签将用于 所有错误消息。labellabel

设置表单中字段的 Tab 键顺序

Visualforce 表单具有 按 Tab 键浏览输入字段的“自然顺序”：从左到右、从上到下。对于某些人来说 形式，这可能不是最有效或最容易获得的安排。您可以使用页面中输入和其他组件的 and 属性来更改 Tab 键顺序到您想要的任何内容。

tabIndextabOrderHint

下面是一个简单的示例，该示例使用该属性来控制 Tab 键顺序。tabOrderHint

<apex:page standardController="Account">
    <apex:form>
    <apex:pageBlock title="Edit Account: {!Account.Name}">
        <apex:pageBlockSection title="Account Details" columns="1">
            <apex:inputField value="{!Account.Name}" tabOrderHint="4"/>
            <apex:inputField value="{!Account.Website}" tabOrderHint="3"/>
            <apex:inputField value="{!Account.Industry}" tabOrderHint="2"/>
            <apex:inputField value="{!Account.AnnualRevenue}" tabOrderHint="1"/>
        </apex:pageBlockSection>
    </apex:pageBlock>
    </apex:form>
</apex:page>

注意

请记住，要使此页面显示帐户数据，有效的 ID 必须在页面的 URL 中将客户记录指定为查询参数。为 例：

https://Salesforce_instance/apex/myPage?id=001x000xxx3Jsxb

请注意，当您显示此页面并按 Tab 键时，活动字段在 与通常预期的顺序相反。

使用 tabIndex 和 tabOrderHint

该属性用作提示 在计算要为呈现的 HTML 元素或元素的值设置的值时。它习惯于 指示与其他字段相比选择字段的相对顺序 页面组件。此值必须是介于 1 和 3276 之间的整数或表达式 其计算结果为相同范围内的整数值。Tab 键顺序以 组件 1 是用户按 TAB 键时选择的第一个组件。tabOrderHinttabindex

该属性用于直接 设置呈现的 HTML 的值 元素。它是一个绝对索引，用于设置字段的顺序 选择，与其他页面组件相比。此值必须是介于 0 之间的整数 和 32767，或计算结果为相同范围内的整数值的表达式。 Tab 键顺序以组件 0 开始，该组件是用户选择的第一个组件 按 TAB 键。tabIndextabindex该属性在 只有组件。该属性可以在 遵循 Visualforce 组件。

tabOrderHint<apex:inputField>tabIndex

• <apex:commandButton>
• <apex:commandLink>
• <apex:inputCheckbox>
• <apex:inputFile>
• <apex:inputSecret>
• <apex:inputText>
• <apex:inputTextarea>
• <apex:outputLabel>
• <apex:outputLink>
• <apex:selectCheckboxes>
• <apex:selectList>
• <apex:selectRadio>

与混合时 使用该属性的组件 要设置 Tab 键顺序，您可以将 乘以 10 以获得该字段的近似等效值。使用它来 手动计算等效值，以在每个 组件，以便为 页。<apex:inputField>tabIndextabOrderHinttabIndex

向页面添加相关字段

从属字段提供了一种筛选 Visualforce 上显示的字段值的方法 页。从属字段由两部分组成：一个控制字段，用于确定 筛选，以及筛选其值的依赖字段。从属字段可以 动态筛选选择列表、多选选择列表、单选等字段中的值 按钮和复选框。从属选择列表只能显示在 Visualforce 页面上 使用 Salesforce API 版本 19.0 或更高版本。在此示例中，我们将向 Visualforce 页面添加一个依赖选择列表“子类别”。首先，创建 此自定义选择列表：

1. 从帐户的对象管理设置中，转到字段区域，然后 ，然后单击新建。
2. 选择“选择列表”，然后单击“下一步”。
3. 为字段输入 标签。Subcategories
4. 为值列表输入以下术语：
   • 苹果农场
   • 电缆
   • 玉米田
   • 互联网
   • 收音机
   • 电视
   • 葡萄酒酿造厂
5. 单击“下一步”两次，然后单击“保存”。

要定义子类别的字段依赖关系，请执行以下操作：

1. 从帐户的对象管理设置中，转到字段区域。
2. 单击字段依赖关系。
3. 单击“新建”。
4. 选择“行业”作为控制字段，选择“子类别”作为从属字段 田。
5. 点击继续。
6. 成本控制字段中的每个值（来自“行业”）都列在第一行中，并且 从属字段（来自子类别）中的每个值都显示在列中 在它下面。设置字段依赖项以匹配此图像：子类别的字段依赖关系矩阵您可以忽略未显示的任何其他行业类型 以上。
7. 点击保存。

现在，创建一个 Visualforce 页面 称为看起来像 这：

dependentPicklists

<apex:page standardController="Account">
    <apex:form >
        <apex:pageBlock mode="edit">
            <apex:pageBlockButtons >
                <apex:commandButton action="{!save}" value="Save"/>
            </apex:pageBlockButtons>
            <apex:pageBlockSection title="Dependent Picklists" columns="2">
            <apex:inputField value="{!account.industry}"/>
            <apex:inputField value="{!account.subcategories__c}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

什么时候 从“行业”选项列表中选择“农业”，子类别选项列表包含 苹果农场、玉米田和酿酒厂。如果选择“通信”，则“子类别” 选择列表包含之前定义的所有通信类型。

从属选择列表注意事项

使用依赖选择列表时，请考虑以下事项 在 Visualforce 页面中：

• 您可以在各种字段类型中混合使用控制字段和从属字段， 例如选择列表、多选择列表、单选按钮和复选框。
• 每页限制为 10 个依赖选择列表对。这是 在所有对象中合计。因此，您可以有五个依赖选择列表 在帐户上，在联系人上五个，但仅此而已。但是，您可以重复 同一对依赖选择列表，例如在迭代标签中，例如 ，而不计算更多 比一次违反你的极限。<apex:repeat>
• 页面必须包含 从属选择列表的控制字段。未能包括 页面上的 control 字段导致运行时错误，当页面 显示。注意如果使用的 API 版本为 26.0 或更低版本，并且用户查看 页面对控制字段（从属 选择列表显示选择列表的所有可能值，而不是 已根据只读值进行筛选。这是 视觉力。
• 不要混合内联 启用编辑的字段，具有来自同一依赖项的常规输入字段 群。例如，不要将标准输入字段混用 使用启用内联编辑的从属关系控制字段 田：<apex:page standardController="Account"> <apex:form> <!-- Don't mix a standard input field... --> <apex:inputField value="{!account.Controlling__c}"/> <apex:outputField value="{!account.Dependent__c}"> <!-- ...with an inline-edit enabled dependent field --> <apex:inlineEditSupport event="ondblClick" /> </apex:outputField> </apex:form> </apex:page>
• 如果以内联方式组合 启用编辑的依赖选择列表，具有 Ajax 样式的部分页面刷新， 刷新所有字段，每个字段具有从属关系或控制关系 其他作为一个组。单独刷新字段不是 建议，并可能导致不一致的撤消/重做行为。 下面是部分刷新 具有启用内联编辑的从属表单 选择列表：<apex:form> <!-- other form elements ... --> <apex:outputPanel id="locationPicker"> <apex:outputField value="{!Location.country}"> <apex:inlineEditSupport event="ondblClick" /> </apex:outputField> <apex:outputField value="{!Location.state}"> <apex:inlineEditSupport event="ondblClick" /> </apex:outputField> <apex:outputField value="{!Location.city}"> <apex:inlineEditSupport event="ondblClick" /> </apex:outputField> </apex:outputPanel> <!-- ... --> <apex:commandButton value="Refresh Picklists" reRender="locationPicker" /> </apex:form>都 的内联启用编辑的选择列表包装在组件中。当操作方法触发时重新呈现。<apex:outputPanel><apex:outputPanel><apex:commandButton>

创建 Visualforce Dashboard 组件

Visualforce 页面可用作仪表板组件。仪表板显示源报表中的数据 作为可视化组件，可以是图表、仪表、表格、指标或 Visualforce 页面。 这些组件提供了关键指标的快照和 组织的绩效指标。 每个仪表板最多可以有 20 个组件。

使用标准控制器的 Visualforce 页面不能 在仪表板中使用。要包含在仪表板中，Visualforce 页面必须没有控制器，使用自定义 控制器，或引用绑定到 StandardSetController 类的页面。如果 Visualforce 页面不满足这些要求，则它不会显示为 仪表板组件 Visualforce Page 下拉列表中的选项。创建一个名为 的 Visualforce 页面。以下标记显示了一个 Visualforce 页面示例，该页面使用标准列表控制器，可在 仪表板。它显示与您的 组织：

VFDashboard

<apex:page standardController="Case" recordSetvar="cases">
    <apex:pageBlock>
        <apex:form id="theForm">
            <apex:panelGrid columns="2">
                <apex:outputLabel value="View:"/>
                <apex:selectList value="{!filterId}" size="1">
                    <apex:actionSupport event="onchange" rerender="list"/>
                    <apex:selectOptions value="{!listviewoptions}"/>
                </apex:selectList>
            </apex:panelGrid>
            <apex:pageBlockSection>
                <apex:dataList var="c" value="{!cases}" id="list">
                {!c.subject}
                </apex:dataList>
            </apex:pageBlockSection>
        </apex:form>
    </apex:pageBlock>
</apex:page>

要创建使用此 Visualforce 页面的仪表板，请执行以下操作：

1. 查看仪表板，然后单击编辑。
2. 单击任意顶部的 Add Component 列。
3. 选择 Visualforce 页面作为组件类型。
4. （可选）输入要显示在仪表板顶部的标题 元件。
5. （可选）输入要在仪表板底部显示的页脚 元件。
6. 从“Visualforce 页面”下拉列表中，选择 。VFDash
7. 点击保存。

在仪表板中运行的示例 Visualforce 页面

对于使用自定义列表控制器的更复杂示例， 请参见高级 Visualforce 仪表板组件。

显示自定义对象的相关列表

重要

在可能的情况下，我们更改了非包容性条款，以符合我们的 平等的公司价值观。我们保留了某些条款，以避免对 客户实施。

使用 Visualforce 显示自定义对象及其相关列表非常简单。

假设您有三个自定义对象：MyChildObject、MyMasterObject、 和 MyLookupObject。MyChildObject 具有主从关系 替换为 MyMasterObject（即主对象）。MyLookupObject 还具有 与 MyChildObject 的 Lookup 关系。如果要创建显示 MyMasterObject 相关列表的 Visualforce 页面，请使用 以下标记：

<apex:page standardController="MyMasterObject__c">
	<apex:relatedList list="MyChildObjects__r" />
</apex:page>

要使此页面显示相关列表数据，有效的自定义对象记录的 ID 带有 自定义关系必须指定为页面 URL 中的查询参数，例如 http:// MyDomainName.my.salesforce.com/myCustomRelatedList?id=a00x00000003ij0。尽管 MyLookupObject 使用不同类型的关系， 语法相同：

<apex:page standardController="MyLookupObject__c">
	<apex:relatedList list="MyChildObjects__r" />
</apex:page>

启用内联编辑

Visualforce 页面 21.0 及更高版本支持内联编辑。内联编辑允许用户 直接在记录的详细信息页面上快速编辑字段值。可编辑单元格 将鼠标悬停在单元格上时显示铅笔图标 （），而不可编辑的单元格 显示锁定图标 （）。

该组件具有属性 激活内联编辑，而组件提供内联编辑 多个容器组件的功能。<apex:detail><apex:inlineEditSupport>若要查看内联编辑的强大功能，请使用以下内容创建一个名为 法典：

inlineDetail

<apex:page standardController="Account">
    <apex:detail subject="{!account.Id}" relatedList="false" /> 
</apex:page>

注意

请记住，要使此页面显示帐户数据， 必须在 URL 中将有效客户记录的 ID 指定为查询参数 用于页面。例如：

https://Salesforce_instance/apex/myPage?id=001x000xxx3Jsxb

尝试双击其中一个字段，例如“帐户” 数字。您会注意到什么也没发生。现在，将该页面替换为以下内容 法典：

<apex:page standardController="Account">
        <apex:detail subject="{!account.Id}" relatedList="false" inlineEdit="true"/> 
</apex:page>

将鼠标悬停在任何字段上，您会注意到 您现在可以直接编辑它们的内容。单击保存 该部分的顶部会保留您更改的所有信息。支持组件 内联编辑必须始终是标记的后代。但是，该组件不必是 的后代即可支持内联 编辑。

<apex:form><apex:detail><apex:form>组件必须 以下组件的后代：

<apex:inlineEditSupport>

• <apex:dataList>
• <apex:dataTable>
• <apex:form>
• <apex:outputField>
• <apex:pageBlock>
• <apex:pageBlockSection>
• <apex:pageBlockTable>
• <apex:repeat>

以下示例演示了如何使用内联创建页面 编辑：

<apex:pageBlockTable>

<apex:page standardController="Account" recordSetVar="records" id="thePage"> 
    <apex:form id="theForm"> 
        <apex:pageBlock id="thePageBlock"> 
            <apex:pageBlockTable value="{!records}" var="record" id="thePageBlockTable"> 
                <apex:column >
                    <apex:outputField value="{!record.Name}" id="AccountNameDOM" /> 
                    <apex:facet name="header">Name</apex:facet>
                </apex:column>
                <apex:column >
                    <apex:outputField value="{!record.Type}" id="AccountTypeDOM" /> 
                    <apex:facet name="header">Type</apex:facet>
                </apex:column>
                <apex:column >
                    <apex:outputField value="{!record.Industry}" 
                        id="AccountIndustryDOM" />  
                        <apex:facet name="header">Industry</apex:facet>
                </apex:column>
                <apex:inlineEditSupport event="ondblClick" 
                        showOnEdit="saveButton,cancelButton" hideOnEdit="editButton" /> 
            </apex:pageBlockTable> 
            <apex:pageBlockButtons > 
                <apex:commandButton value="Edit" action="{!save}" id="editButton" />
                <apex:commandButton value="Save" action="{!save}" id="saveButton" />
                <apex:commandButton value="Cancel" action="{!cancel}" id="cancelButton" />
            </apex:pageBlockButtons> 
        </apex:pageBlock> 
    </apex:form>
</apex:page>

以下是不支持内联编辑的情况。

• 内联编辑在以下国家不可用：
  • 辅助功能模式
  • 设置页面
  • 仪表 板
  • 客户门户
  • HTML 解决方案的说明
• 案例和潜在顾客编辑页面上的以下标准复选框不可内联编辑：
  • 案例分配（使用活动分配进行分配 规则)
  • 案例电子邮件通知（将通知电子邮件发送至 联系)
  • 潜在顾客分配（使用活动分配进行分配 统治)
• 以下标准对象中的字段不可内联编辑。
  • “单据”和“价目表”中的所有字段
  • “任务”中除“主题”和“注释”之外的所有字段
  • 事件中除“主题”、“描述”和“位置”之外的所有字段
  • “个人客户”、“联系人”和“潜在顾客”的全名字段。然而，他们的 例如，组件字段为“名字”和“姓氏”。
• 您可以使用内联编辑来更改记录上的字段值，您 具有只读访问权限，通过字段级安全性或组织的 共享模式;但是，Salesforce 不允许您保存更改，并显示 尝试保存记录时出现权限不足错误消息。
• 标准富文本区域 （RTA） 字段不支持内联编辑，例如 as ，当 Visualforce 页面 从单独的域（Salesforce 域除外）提供服务。默认情况下， Visualforce 页面从单独的域提供，除非您的管理员有 禁用此设置。自定义 RTA 字段不受此限制的影响 并支持内联编辑。Idea.Body<apex:outputField>
• 使用 的依赖选择列表支持内联编辑。<apex:outputField>
• 页面必须包含从属选择列表的控制字段。未能 在页面上包含控制字段会导致运行时错误，当页面 显示。
• 不要将支持内联编辑的字段与来自同一字段的常规输入字段混合使用 依赖项组。例如，不要将标准输入字段混用 使用启用内联编辑的从属关系控制字段 田：<apex:page standardController="Account"> <apex:form> <!-- Don't mix a standard input field... --> <apex:inputField value="{!account.Controlling__c}"/> <apex:outputField value="{!account.Dependent__c}"> <!-- ...with an inline-edit enabled dependent field --> <apex:inlineEditSupport event="ondblClick" /> </apex:outputField> </apex:form> </apex:page>
• 如果将启用内联编辑的依赖选择列表与 Ajax 样式的部分页面结合使用 刷新，刷新所有字段，每个字段具有依赖关系或控制关系 其他作为一个组。不建议单独刷新字段，并且 可能会导致不一致的撤消/重做行为。下面是一个 部分刷新启用了内联编辑的从属表单的推荐方法 选择列表：<apex:form> <!-- other form elements ... --> <apex:outputPanel id="locationPicker"> <apex:outputField value="{!Location.country}"> <apex:inlineEditSupport event="ondblClick" /> </apex:outputField> <apex:outputField value="{!Location.state}"> <apex:inlineEditSupport event="ondblClick" /> </apex:outputField> <apex:outputField value="{!Location.city}"> <apex:inlineEditSupport event="ondblClick" /> </apex:outputField> </apex:outputPanel> <!-- ... --> <apex:commandButton value="Refresh Picklists" reRender="locationPicker" /> </apex:form>所有启用内联编辑的选项列表都包装在组件中。重新呈现时操作方法 火灾。<apex:outputPanel><apex:outputPanel><apex:commandButton>

将页面转换为 PDF 文件

您可以将任何页面呈现为 PDF，方法是将属性添加到组件，并指定 “pdf”作为渲染服务。例如：

renderAs<apex:page>

<apex:page renderAs="pdf">

呈现为 PDF 的 Visualforce 页面将显示在浏览器中或下载 作为 PDF 文件，具体取决于您的浏览器设置。

在上一教程中，您使用 Visualforce 页面更改了公司名称。假设你想生成 以 PDF 格式发布新名称。以下示例生成 这样的页面，以及当前日期和时间。

<apex:page standardController="Account" renderAs="pdf" applyBodyTag="false">
    <head>
        <style> 
            body { font-family: 'Arial Unicode MS'; }
            .companyName { font: bold 30px; color: red; }  
        </style>
    </head>
    <body>
        <center>
        <h1>New Account Name!</h1>
     
        <apex:panelGrid columns="1" width="100%">
            <apex:outputText value="{!account.Name}" styleClass="companyName"/>
            <apex:outputText value="{!NOW()}"></apex:outputText>
        </apex:panelGrid>
        </center>
    </body>
</apex:page>

关于页面的注意事项：

• <style>是 CSS 标记， 不是 Visualforce 标记。它定义了用于整个页面的字体系列， 以及公司名称的特定样式。
• 某些输出文本包含在组件中。一个 面板网格呈现为 HTML 表格。在身体中发现的每个组件 的组件被放入第一行的相应单元格中，直到 已达到列数。由于只有一个单元格， 每个输出文本都显示在单独的行中。<apex:panelGrid><apex:panelGrid>

呈现为 PDF 的 Visualforce 页面

在部署之前，请始终验证呈现页面的格式 它。

在页面中构建数据表

某些 Visualforce 组件（如 或 ）允许您显示信息 通过遍历记录集合，一次从多个记录中获取。举例说明 这个概念，以下页面使用该组件列出与 当前处于上下文中的帐户：<apex:pageBlockTable><apex:dataTable><apex:pageBlockTable>

<apex:page standardController="Account">
   <apex:pageBlock title="Hello {!$User.FirstName}!">
      You are viewing the {!account.name} account.
   </apex:pageBlock>
   <apex:pageBlock title="Contacts">
      <apex:pageBlockTable value="{!account.Contacts}" var="contact">
         <apex:column value="{!contact.Name}"/>
         <apex:column value="{!contact.MailingCity}"/>
         <apex:column value="{!contact.Phone}"/>
      </apex:pageBlockTable>
   </apex:pageBlock>
</apex:page>

注意

请记住，要使此页面显示帐户数据，有效的 ID 必须在页面的 URL 中将客户记录指定为查询参数。为 例：

https://Salesforce_instance/apex/myPage?id=001x000xxx3Jsxb

<apex：pageBlockTable> 组件与其他迭代组件一样，包括两个必需的属性，以及：

<apex:pageBlockTable>valuevar

• value获取 sObject 记录列表或 任何其他 Apex 类型的值。在上面的示例中，检索当前位于 上下文，然后遍历关系以检索关联的列表 接触。{!account.Contacts}
• var指定小版本的名称 变量。此变量在标记正文中用于访问字段 在每个触点上。在此示例中，用于标记以显示联系人的姓名。<apex:pageBlockTable>value=”{!contact.Name}”<apex:column>

该组件需要 1 或更多子组件。这 表中的行数由随属性返回的记录数控制。<apex:pageBlockTable><apex:column>value

注意

组件 自动采用标准 Salesforce 列表的样式。显示列表 使用您自己的样式，请改用。<apex:pageBlockTable><apex:dataTable>

编辑页面中的数据表

在上一教程中，您构建了一个数据表。在数据中使用 表列，您可以创建具有可编辑字段的表。使用您可以保存 您更改的数据。任何消息（如 ）都会自动与标记一起显示。<apex:inputField><apex:commandButton>Saving<apex:pageMessages>以下页面将创建一个页面，用于编辑系列 同时的行业类型：

<apex:page standardController="Account" recordSetVar="accounts" 
   tabstyle="account" sidebar="false">
   <apex:form> 
   <apex:pageBlock >
   <apex:pageMessages />
   <apex:pageBlockButtons>
      <apex:commandButton value="Save" action="{!save}"/>
   </apex:pageBlockButtons>

   <apex:pageBlockTable value="{!accounts}" var="a">
      <apex:column value="{!a.name}"/>
      
      <apex:column headerValue="Industry">
         <apex:inputField value="{!a.Industry}"/>
      </apex:column>

   </apex:pageBlockTable>
   </apex:pageBlock>
   </apex:form>
</apex:page>

注意

如果 URL 中具有 ID 属性，则此页面无法正确显示。例如，产生错误。您需要从 URL 中删除 ID。https://MyDomainName—PackageName.vf.force.com/apex/HelloWorld?id=001D000000IR35T请注意有关页面标记的以下事项：

• 此页面利用标准集控制器来生成 表的数据。使用该属性指定要使用的数据集的名称。 然后，在该值中，使用该集的名称用数据填充表。recordSetVar<apex:pageBlockTable>
• 标签会自动为字段生成正确的显示。在 这种情况，作为下拉列表。<apex:inputField>
• 页面必须包含在标记中才能使用该标记。表单 指定用户可以与之交互的 Visualforce 页面的一部分。<apex:form><apex:commandButton>

编辑数据表的示例

在页面中使用查询字符串参数

如前面的示例所示，默认页面上下文 – 是，提供 page – 由页面 URL 中指定的查询字符串参数控制。您还可以 在 Visualforce 标记中获取和设置查询字符串参数。以下主题提供了示例：

id

• 获取查询字符串参数
• 在链接中设置查询字符串参数
• 获取和设置查询字符串参数 在单个页面上

获取查询字符串参数

您可以使用全局变量在 Visualforce 标记中引用查询字符串参数。使用 ，您可以通过指定 来访问页面的查询字符串参数 属性， 之后，您可以访问每个单独的参数：$CurrentPage$CurrentPageparameters

$CurrentPage.parameters.parameter_name

例如，假设您要添加有关 “帐户”页面的特定联系人。指定客户记录 ID 按默认查询字符串 参数，联系人记录 ID 由查询字符串指定 参数命名：idcid

<apex:page standardController="Account">
    <apex:pageBlock title="Hello {!$User.FirstName}!">
        You are displaying values from the {!account.name} account and a separate contact
        that is specified by a query string parameter.
    </apex:pageBlock>
    <apex:pageBlock title="Contacts">
        <apex:dataTable value="{!account.Contacts}" var="contact" cellPadding="4" border="1">
              <apex:column>
               <apex:facet name="header">Name</apex:facet>
                {!contact.Name}
              </apex:column>
              <apex:column>
               <apex:facet name="header">Phone</apex:facet>
              {!contact.Phone}
              </apex:column>
        </apex:dataTable>
    </apex:pageBlock>
    <apex:detail subject="{!$CurrentPage.parameters.cid}" relatedList="false" title="false"/> 
</apex:page>

要使此示例正确呈现，您必须将 Visualforce 页面与 URL 中的有效客户和联系人 ID 相关联。例如 if 是帐户 ID 和 联系人 ID，则生成的 URL 应为：

001D000000IRt53003D000000Q0bIE

https://Salesforce_instance/apex/MyFirstPage?id=001D000000IRt53&cid=003D000000Q0bIE

使用 Visualforce 显示字段值提供了有关检索记录 ID 的更多信息。

注意

如果在 URL 中使用该参数，则必须引用 到标准控制器中引用的同一实体。id

使用查询 页面中的字符串参数

在链接中设置查询字符串参数

您可以通过构造 链接 URL，或在标签中使用标签。例如 以下两个示例都创建指向外部的相同链接 页：<apex:param><apex:outputLink>

<apex:outputLink value="http://google.com/search?q={!account.name}">
    Search Google
</apex:outputLink>

<apex:outputLink value="http://google.com/search">
    Search Google
    <apex:param name="q" value="{!account.name}"/>
</apex:outputLink>

后一种方法使用标记而不是手动创建 URL，更适合风格 原因。<apex:param>

注意

除了 ，用于 设置 和 的请求参数。<apex:outputLink><apex:param><apex:commandLink><apex:actionFunction>

获取和设置查询字符串参数 在单个页面上

看过获取和设置查询字符串参数的示例后， 此示例演示如何将这两个操作组合在一起 在单个页面上产生更有趣的结果。 根据获取查询字符串参数中的示例，以下页面将列出列表中每个联系人的名称 控制详细信息组件上下文的超链接 在它下面。这可以通过以下方式实现：

• 将数据表包装在标签中<apex:form>
• 将每个联系人姓名转换为适当设置参数的 标签<apex:commandLink>cid<apex:param>

当与标准控制器一起使用时，命令链接始终完全 使用添加的新信息刷新当前页面 到页面 – 在本例中，更新联系人详细信息 元件。cid

<apex:page standardController="Account">
    <apex:pageBlock title="Hello {!$User.FirstName}!">
        You are displaying contacts from the {!account.name} account. 
        Click a contact's name to view his or her details.
    </apex:pageBlock>
    <apex:pageBlock title="Contacts">
        <apex:form>
            <apex:dataTable value="{!account.Contacts}" var="contact" cellPadding="4" 
                               border="1">
              <apex:column>
               <apex:facet name="header">Name</apex:facet>
               <apex:commandLink>
                 {!contact.Name}
                 <apex:param name="cid" value="{!contact.id}"/>
               </apex:commandLink> 
              </apex:column>
              <apex:column>
               <apex:facet name="header">Phone</apex:facet>
               {!contact.Phone}
              </apex:column>
            </apex:dataTable>
        </apex:form>
    </apex:pageBlock>
    <apex:detail subject="{!$CurrentPage.parameters.cid}" relatedList="false" title="false"/>
</apex:page>

保存此标记后，使用查询字符串参数刷新浏览器 但没有参数 在 URL 中，例如，

idcid

https://Salesforce_instance/apex/MyFirstPage?id=001D000000IRt53

最初 不会呈现联系人详细信息页面，但当您单击联系人时 命名页面呈现相应的详细信息视图。

注意

如果在 URL 中使用该参数，则必须引用 到标准控制器中引用的同一实体。id

在页面中使用 Ajax

某些 Visualforce 组件可识别 Ajax，并允许您添加 Ajax 行为 到页面，而无需编写任何 JavaScript。以下主题 举例说明：

• 实现部分页面更新 命令链接和按钮
• 为异步操作提供状态
• 将 Ajax 行为应用于任何事件 元件

实现部分页面更新 命令链接和按钮

使用最广泛的 Ajax 行为之一是部分页面 update，其中仅更新页面的特定部分 遵循某些用户操作，而不是重新加载整个页面。

实现部分页面更新的最简单方法是使用 or 标记上的属性来标识 应刷新的组件。当用户单击按钮时 或链接，仅标识的组件及其所有子组件 焕然一新。reRender<apex:commandLink><apex:commandButton>例如，请考虑获取和设置查询字符串参数中显示的联系人列表示例 在单个页面上。在该示例中，当用户单击联系人的姓名时 在列表中查看该联系人的详细信息，整个页面 由于此操作而刷新。只需进行两次修改 对于该标记，我们可以更改页面的行为，以便仅 列表下方的区域将刷新：

1. 首先，创建或确定页面中应该 被重新渲染。为此，请将标签包装在标签中，并为输出面板指定一个参数。的值是我们可以在其他地方使用的名称 在页面中引用此区域。它在页面中必须是唯一的。<apex:detail><apex:outputPanel>idid
2. 接下来，指示调用点（命令链接） 我们想用它来执行我们 刚刚定义。为此，请向标记添加一个属性，并为其指定分配给输出的相同值 面板的 .reRender<apex:commandLink>id

最终标记如下所示：

<apex:page standardController="Account">
    <apex:pageBlock title="Hello {!$User.FirstName}!">
        You are displaying contacts from the {!account.name} account. 
        Click a contact's name to view his or her details.
    </apex:pageBlock>
    <apex:pageBlock title="Contacts">
        <apex:form>
            <apex:dataTable value="{!account.Contacts}" var="contact" cellPadding="4" 
                               border="1">
                  <apex:column>
                      <apex:commandLink rerender="detail"> 
                          {!contact.Name}
                          <apex:param name="cid" value="{!contact.id}"/>
                      </apex:commandLink>
                  </apex:column>
            </apex:dataTable>
        </apex:form>
    </apex:pageBlock>
    <apex:outputPanel id="detail"> 
        <apex:detail subject="{!$CurrentPage.parameters.cid}" relatedList="false" 
                        title="false"/>
    </apex:outputPanel> 
</apex:page>

保存页面后，单击任何联系人并注意详细信息 组件在不完全刷新页面的情况下显示。

注意

不能使用该属性更新表中的内容。reRender

为异步操作提供状态

Ajax 行为（如部分页面更新）是异步的 页面用户继续在后台发生的事件 工作。为了获得良好的可用性，设计人员通常会在 提醒用户当前正在进行的任何后台活动。

Visualforce 支持使用标记进行状态更新。此标签允许您显示 带有 or 属性的后台事件开头或结尾的文本，或者，更多 高级开发人员，允许您显示图像或其他组件。<apex:actionStatus>startTextstopText

在此示例中，我们将向联系人列表页面添加状态文本 我们一直在发展。用户单击联系人姓名后， 详细信息区域显示文本“正在请求…”而 将呈现细节区域。

要实现消息，请环绕组件，因为 这是异步更新的组件。在两者之间 两个标签，添加一个名为“stop”的标签。<apex:actionStatus><apex:detail><apex:facet>分面由区域中的内容组成 提供有关数据的上下文信息的 Visualforce 组件 这在组件中呈现。例如，支持分面 用于表格的页眉、页脚和标题，而仅支持 facet 用于列的页眉和页脚。该组件允许 您可以使用自己的内容覆盖 Visualforce 组件上的默认分面。分面只允许一个子项 在开始和结束标记中。

<apex:dataTable><apex:column><apex:facet>

注意

并非所有组件 支持分面。这些列在标准组件参考中。

在以下示例中，支持包含组件的名为“stop”的分面 该操作完成后应立即显示 – 在 本例中，详情区：<apex:actionStatus>

<apex:page standardController="Account">
    <apex:pageBlock title="Hello {!$User.FirstName}!">
        You are displaying contacts from the {!account.name} account. 
        Click a contact's name to view his or her details.
    </apex:pageBlock>
    <apex:pageBlock title="Contacts">
        <apex:form>
            <apex:dataTable value="{!account.Contacts}" var="contact" cellPadding="4" 
                               border="1">
                  <apex:column>
                      <apex:commandLink rerender="detail">
                          {!contact.Name}
                          <apex:param name="cid" value="{!contact.id}"/>
                      </apex:commandLink>
                  </apex:column>
            </apex:dataTable>
        </apex:form>
    </apex:pageBlock>
    <apex:outputPanel id="detail">
        <apex:actionStatus startText="Requesting...">
            <apex:facet name="stop"> 
                <apex:detail subject="{!$CurrentPage.parameters.cid}" 
                             relatedList="false" title="false"/>
            </apex:facet>
        </apex:actionStatus> 
    </apex:outputPanel>
</apex:page>

请记住，当您访问此页面时，要将 ID 作为 URL。例如

https://Salesforce_instance/apex/ajaxAsyncStatus?id=001x000xxx3Jsxb

将 Ajax 行为应用于任何事件 元件

使用命令链接和按钮实现部分页面更新相对简单， 但是，假设您只想通过将鼠标悬停在上方来进行相同的页面更新 联系人的姓名？若要使用联系人列表示例执行此操作，请从数据表中删除标记并将联系人姓名括在 标签。在 在此输出面板中，添加一个元素作为联系人姓名的同级元素：

<apex:commandLink><apex:outputPanel><apex:actionSupport>

• 标签定义 我们想要专门行为的区域。<apex:outputPanel>
• 标签定义 以前由命令链接实现的部分页面更新行为。<apex:actionSupport>
  • 该属性指定 应触发更新的 DOM 事件。而仅执行 在“onClick”事件期间，可以执行 在任何有效事件（例如“onclick”）上， “ondblclick”，或者，在本例中， “onmouseover”。event<apex:commandLink><apex:actionSupport>
  • 属性 指定应刷新页面的哪一部分。reRender
  • 标签集 查询的值 string 参数。<apex:param>cid

该属性不是必需的。如果你不这样做 设置它，页面不会在指定事件时刷新，但仍设置 的名称和值。reRender≤apex:param>cid

生成的标记如下所示：

<apex:page standardController="Account">
    <apex:pageBlock title="Hello {!$User.FirstName}!">
        You are displaying contacts from the {!account.name} account. 
        Mouse over a contact's name to view his or her details.
    </apex:pageBlock>
    <apex:pageBlock title="Contacts">
        <apex:form>
            <apex:dataTable value="{!account.Contacts}" var="contact" cellPadding="4" 
                               border="1">
                  <apex:column>
                      <apex:outputPanel>
                          <apex:actionSupport event="onmouseover" rerender="detail"> 
                              <apex:param name="cid" value="{!contact.id}"/>
                          </apex:actionSupport> 
                          {!contact.Name}
                      </apex:outputPanel> 
                  </apex:column>
            </apex:dataTable>
        </apex:form>
    </apex:pageBlock>
    <apex:outputPanel id="detail">
        <apex:actionStatus startText="Requesting...">
            <apex:facet name="stop">
                <apex:detail subject="{!$CurrentPage.parameters.cid}" relatedList="false" 
                                title="false"/>
            </apex:facet>
        </apex:actionStatus>
    </apex:outputPanel>
</apex:page>

保存页面后，将鼠标移到任何联系人上，并注意详细信息区域 在不单击它的情况下适当刷新。

将 Visualforce 页面放在外部域上

之后，您可以使用 iframe 将 Visualforce 内容放在受信任的外部域上 指定允许成帧的域。

在“设置”中，搜索 。在“点击劫持保护”下， 选择为禁用标题或标准 标头。这两个选项都允许在受信任的外部域上建立框架，并且 提供点击劫持保护。Session Settings

然后，在“内联帧的受信任域”下，添加受信任的外部域，其中 允许框架并将 iframe 类型设置为 Visualforce Pages。确保 您的域名符合格式要求。您最多可以添加 512 个外部域。

将外部域添加到列表后，Visualforce 页面将使用 和 HTTP 标头进行呈现，以允许通过这些域进行框架设置。X-Frame-OptionsContent-Security-Policy

此代码演示如何在外部域上构建 Visualforce 页面。

<html>
    <head></head>
    <body>
        <iframe src="https://MyDomainName--PackageName.vf.force.com/apex/iframe"></iframe>
    </body>
</html>

注意

如果不是增强型域 在您的组织中启用，您的 URL 格式是不同的。有关详细信息，请参阅“我的域 URL 格式”中的“我的域 URL 格式”。 Salesforce 帮助。