Skip to main content

Visualforce 入门教程

备注

Lightning Web 组件是使用 Salesforce 构建 UI 的首选方式,请前往从 Visualforce 迁移至 Lightning Web 组件学习路径,了解如何使用 LWC 并遵守当前的 Web 标准。另外,请继续通过此徽章了解 Visualforce 的更多信息。

学习目标

完成本单元后,您将能够:

  • 描述 Visualforce 的含义及其用途。
  • 列出 Visualforce 三种或三种以上的使用场景。

Visualforce 简介

Visualforce 是一个 Web 开发框架,开发人员使用 Visualforce 可为托管在 Lightning 平台上的移动和桌面应用程序构建复杂的自定义用户界面。您可以使用 Visualforce 构建符合 Lightning Experience 样式的应用程序,以及您自己的完全自定义界面。

通过 Visualforce,开发人员可以扩展 Salesforce 的基础功能,替换原有功能或创建全新的应用程序。利用强大的内置标准控制器特性,或在 Apex 中编写您自己的业务逻辑。您可以为自己的组织构建功能,或者在 AppExchange 中创建出售的应用程序。

Visualforce 应用程序开发与构建 Web 应用程序非常类似。开发人员使用组件、HTML,以及可选的样式元素等创建 Visualforce 页面。Visualforce 可以集成任何标准网页技术或 JavaSript 框架,营造更生动、更丰富的用户界面。每个页面只能通过一个 URL 进行访问。当有人访问页面时,服务器执行页面所需的数据处理,将页面呈现为 HTML,并将结果返回给浏览器进行显示。

Visualforce 请求处理概述

Visualforce 页面示例

这是一个运行正常的 Visualforce 页面的简短示例。

<apex:page standardController="Contact" >
	<apex:form >
		<apex:pageBlock title="Edit Contact">
			<apex:pageBlockSection columns="1">
				<apex:inputField value="{!Contact.FirstName}"/>
				<apex:inputField value="{!Contact.LastName}"/>
				<apex:inputField value="{!Contact.Email}"/>
				<apex:inputField value="{!Contact.Birthdate}"/>
			</apex:pageBlockSection>
			<apex:pageBlockButtons >
				<apex:commandButton action="{!save}" value="Save"/>
			</apex:pageBlockButtons>
		</apex:pageBlock>
	</apex:form>
</apex:page>

此页面显示联系人数据输入表单。

编辑联系人表单

短短的十几行标记,但是这个页面做了很多事情。

  • 它连接到 Visualforce 标准控制器,这是 Visualforce 框架的一部分,提供了自动数据访问和修改、标准操作等。
  • 当访问没有记录 ID 时,页面会显示为一个空白输入框。当您单击保存时,将根据填写的表单数据创建一个新的联系人。
  • 当访问有记录 ID 时,页面会查找该联系人记录的数据并以可编辑的形式进行显示。当您单击保存时,对联系人的更改将会保存到数据库中。
  • 每个输入字段都会智能地显示字段值。
    • 电子邮件字段知道一个有效的电子邮件地址是什么样的,如果输入无效的电子邮件地址会显示错误信息。
    • 当您单击日期字段时,日期型字段会显示出日期小部件,帮助您轻松输入正确日期。
  • 保存按钮调用保存操作方法,这是标准控制器提供的标准操作之一。

哪些地方可以用到 Visualforce?

Salesforce 提供了一系列可以在组织内使用 Visualforce 的方法。您可以扩展 Salesforce 的基础功能,替换原有功能或创建全新的应用程序。

以下是您可以将 Visualforce 添加到组织的一些方法。注意,这些屏幕截图只是示例,并不能反映您组织中的自定义页面和应用程序。

从应用程序启动器打开 Visualforce 页面

Visualforce 应用程序和自定义选项卡都可以从应用程序启动器中获得。要打开应用程序启动器,请在导航栏中单击 应用程序启动器图标。要查看所有应用程序和项目,请选择查看所有

应用程序启动器应用程序和选项卡

单击自定义应用程序 (1) 以将其激活。应用程序中的项目显示在导航栏中,包括您添加到应用程序的任意 Visualforce 选项卡。请注意,您需要将 Visualforce 页面添加到选项卡,以便在应用程序启动器中访问。在所有项目 (2) 中可以找到不在应用程序中的 Visualforce 选项卡。

将 Visualforce 页面添加到导航栏

如前面的示例中所述,您可以将 Visualforce 选项卡添加到应用程序,选项卡在应用程序的导航栏中显示为项目。

带有 Visualforce 选项卡的导航栏

在标准页面布局中显示 Visualforce 页面

通过在页面上嵌入 Visualforce 页面来扩展页面布局,以在标准页面上显示完全自定义的内容。该行为与 Salesforce Classic 相同,只是您需要查看记录详情才能看到页面布局。

Lightning Experience 页面布局上的 Visualforce

在 Lightning 应用程序生成器中添加 Visualforce 页面作为组件

在 Lightning 应用程序生成器中创建自定义应用程序页面时,您可以使用 Visualforce 组件将 Visualforce 页面添加到页面。

将 Visualforce 页面添加到 Lightning 应用程序生成器页面

备注

您必须为 Visualforce 页面启用“对 Lightning Experience、Lightning Communities 和移动应用程序可用”,使其在 Lightning 应用程序生成器中可用。

启动 Visualforce 页面作为快速操作

Lighning Experience 中的全局操作

尽管在 Lightning Experience 用户界面中的位置与 Salesforce Classic 有很大的不同,但添加快速操作的过程大体相似。将快速操作添加到对象页面布局上相应的发布者区域。

将快速操作添加到页面布局

您可以使用 Visualforce 页面覆盖对象上可用的操作。当用户单击已被覆盖的按钮或链接时,将显示您的页面而不是标准页面。这个设置与 Salesforce Classic 非常相似。事实上,在定义操作覆盖时,很难判断您是否处于 Lightning Experience 中!

覆盖联系人对象上的编辑操作

您可以通过在对象上定义按钮和链接的形式为对象创建新操作。Lightning Experience 不支持 JavaScript 按钮和链接,但支持 Visualforce(和 URL)项目。定义 Visualforce 按钮和链接的过程与 Salesforce Classic 相同,因此这里不再赘述。

资源

在 Salesforce 帮助中分享 Trailhead 反馈

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

了解更多 继续分享反馈