Skip to main content

使用表单输入数据

学习目标

完成本单元后，您将能够：

  • 阐述 Visualforce 表单的基本要求。
  • 区分使用与不使用平台视觉风格的 Visualforce 表单元素。
  • 列出四个或四个以上的标准输入表单标签。
  • 创建 Visualforce 表单以编辑和保存记录。
备注

备注

用中文（简体）学习？在中文（简体）Trailhead Playground 中开始挑战，用括号中提供的译文完成挑战。仅复制并粘贴英文值，因为挑战验证基于英文数据。如果在中文（简体）组织中没有成功通过挑战，我们建议您 (1) 将区域设置切换为美国，(2) 按此处说明将语言切换为英文，(3) 再次单击“检查挑战”按钮。

查看 Trailhead 本地化语言徽章详细了解如何利用 Trailhead 译文。

Visualforce 表单简介

创建和编辑数据是应用程序的基础。Visualforce 提供您轻松创建页面所需的一切，通过这些页面可以创建新记录、检索记录、编辑值并将更改内容保存至数据库。

我们将标准控制器与 <apex:form> 组件和一些易于理解的表单元素相结合，以创建一个较复杂的记录编辑页面。

创建基础表单

使用 <apex:form> 和 <apex:inputField> 创建页面以编辑数据。将 <apex:commandButton> 与标准控制器中内置的保存操作相结合，以创建新记录，或保存对现有记录的更改。

允许编辑和更新记录的页面需要执行以下所有操作。

  • 查找要编辑的记录并从数据库中检索记录。
  • 将相关记录数据以可编辑的形式放置在页面上。
  • 接收带有更改数据的表单提交。
  • 验证新值。
  • 将有效更改保存至数据库。
  • 向提交更改的用户提供适当的消息，提示新数据是成功保存还是存在错误。

当您使用标准控制器和 <apex:form> 组件时，Visualforce 会自动为您完成大部分工作。

我们先从基础开始说起。

  1. 要创建新的 Visualforce 页面，请打开 Developer Console，然后单击 File（文件） | New（新建） | Visualforce Page（Visualforce 页面）。输入 AccountEdit 作为页面名称。
  2. 在编辑器中，将标记替换为以下内容。
    <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>
  3. 单击 Preview（预览）可打开页面预览，您可以在进行更改时查看该预览。此时会打开一个新窗口，显示一个在正文中包含空白字段的表单。
  4. 在预览窗口中，将客户 ID 添加到 URL，然后按 ENTER。URL 看起来应该是这样的：https://MyDomainName.lightning.force.com/apex/AccountEdit?core.apexpages.request.devconsole=1&id=001D000000JRBes

您现在应该在表单字段中看到该帐户的名称。 

编辑客户名称的基础表单

验证您是否使用了标准控制器和有效的记录 ID。

表单字段并不多，在六行标记中，您就有了一个用于更新客户名称功能齐全的表单。试一试！

这些都是了解表单的基础知识。

  • 页面使用了 <apex:page> 组件中定义的客户标准控制器。
  • <apex:form> 是一个 Visualforce 组件，它将其中的所有内容打包成可以作为页面操作的一部分发送回服务器的内容。如果您需要将数据发送回 Salesforce，大多数情况下您会在 <apex:form> 中进行。
  • <apex:inputField> 为与之关联的记录数据字段创建单页表单字段。您可以通过引用 value 属性中相关字段的表达式来实现。{!Account.Name } 就是这个表达式，应该很容易想到这是客户的名称字段。
  • 最后，<apex:commandButton> 将一个按钮添加到页面的用户界面。单击此按钮时会触发一个操作。这种情况下，操作是标准控制器中的 save() 操作方法。与 <apex:inputField> 一样，通过引用要提供给 <apex:commandButton> 操作属性的表达式中调用的操作方法，将 <apex:commandButton> 与操作关联起来。

添加字段标签和平台样式

将表单元素放置在 <apex:pageBlock> 和 <apex:pageBlockSection> 标签中以对其进行组织和分组，并让表单采用平台视觉样式。

让我们修订下表单，让它看起来更熟悉。

在 <apex:form> 组件内部，将两个表单元素封装在 <apex:pageBlock> 和 <apex:pageBlockSection> 标签中，因此您的标记看起来是这样的。

<apex:page standardController="Account">
	<apex:form>
		<apex:pageBlock title="Edit Account">
			<apex:pageBlockSection>
				<apex:inputField value="{! Account.Name }"/>
			</apex:pageBlockSection>
			<apex:pageBlockButtons>
				<apex:commandButton action="{! save }" value="Save" />
			</apex:pageBlockButtons>
		</apex:pageBlock>
	</apex:form>
</apex:page>

该版本表单的样式完全不同！与输出组件类似，当您在 <apex:pageBlock> 和 <apex:pageBlockSection> 标签中使用输入组件时，它们会采用平台视觉样式。

  1. 在客户名称字段下方再添加三个字段，此时标记看起来是这样的。
    <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:inputField> 组件根据标准或自定义对象字段的类型呈现相应的输入小部件。例如，当您使用 <apex:inputField> 标记来显示日期字段时，表单上会显示一个日历小部件。如果您使用 <apex:inputField> 标签来显示选项列表字段，正如这里对行业字段的操作一样，会显示一个下拉列表。

<apex:inputField> 可用于捕获任何标准或自定义对象字段的用户输入，并尊重字段定义中设置的任意元数据，例如该字段是必需的还是唯一的，或者当前用户是否拥有查看或编辑权限。

显示表单错误和消息

使用 <apex:pageMessages> 显示任何表单处理错误或消息。

当出现问题时，您的页面应提供有用的反馈，例如缺少必填字段或字段值未通过验证。标准控制器会为您处理这一切。您只需要告诉标准控制器信息放置在页面的哪个位置。

  1. 在 <apex:pageBlock> 标签下，添加以下行。
    <apex:pageMessages/>
  2. 试着删除客户名称，并使用空白名称保存记录。页面显示验证错误。

编辑客户，有页面错误提示

如您所见，<apex:inputField> 显示其自身字段的错误，但对于较长的表单，在页面顶部任意位置列出所有页面的错误是一种不错的选择。

处理表单时，标准控制器已经收集了所有页面的消息。通过 <apex:pageMessages> 组件，选择在您认为合适的位置显示这些信息。

提供相关记录的链接，方便用户编辑相关信息。

目前表单一次只允许编辑一条记录。确切来说，因为客户对象使用了标准控制器，因此表单仅允许更改客户记录。

对于用户来说，这并不总是最有效的工作流程。虽然您无法使用标准控制器在一个请求中保存多个对象类型的更改，但通过对这些记录执行编辑或删除等操作提供链接，您可以轻松地导航到相关记录。

  1. 在现有的 </apex:pageBlock> 结束标签下，添加以下标记。
    <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>
    客户联系人列表显示在客户编辑表单下方。编辑拥有相关联系人记录的客户
  2. 试着单击联系人的编辑链接。看看链接链向哪里？当您保存更改或单击该页面上的取消会怎么样？

<apex:pageBlockTable> 组件创建了一个包含客户联系人列表的表格。这里出现了带有 <apex:outputLink> 组件的列。使用了引用全局变量的 $Action 表达式，并将其与 URLFOR() 函数内的联系人 ID 组合在一起。结果是指向联系人的编辑或删除页面的链接，具体取决于引用的操作。对于使用这类表单用户来说，这可能是一个非常有用的快捷方式。

了解详细信息…

显然，关于为您的 Web 应用程序构建实用、可用的表单，还有很多东西需要学习。

对于初学者来说，Visualforce 提供了十多种输入组件，而不仅仅是 <apex:inputField>。<apex:inputField> 可以很好地与标准控制器配合使用，可用于直接编辑记录数据。对于使用自己的自定义控制器代码的页面，或者当表单输入不能直接映射到记录上的字段时，您可能需要了解其他方面的内容。大多数组件的名称都以 apex:input 开头，您可以在组件引用中找到这些组件。对于选择列表和单选按钮控件，查找名称以 apex:select 开头的组件。

对于打算在移动设备上使用的用户界面，您可能会想查看 <apex:input> 组件，该组件专用于 HTML5 页面，允许您使用各种功能，让生成的输入用户元素对移动设备更友好。

您在此处编写的代码使用了页面标准控制器提供的多种操作。调用所有或其中部分标准操作。有一个核心集可用于所有带有标准控制器的对象，但很多内置的标准对象都有您可以使用的附加操作。

说起操作，您可以添加操作来编辑和删除现有的相关联系人。如何添加创建新相关联系人的功能？它不像使用 create 操作来创建链接那么简单，倒跟 edit 和 delete 操作类似。这是因为这些操作作用于现有记录，而这些记录已经与关联客户建立了关系。但是当您创建新记录时，您需要自己建立关系。这需要您编写一些自己的自定义控制器代码。

资源

在 Salesforce 帮助中分享 Trailhead 反馈

我们很想听听您使用 Trailhead 的经验——您现在可以随时从 Salesforce 帮助网站访问新的反馈表单。

了解更多 继续分享反馈