17、Force.com Sites 功能全解析与实践操作

t8u9v0

于 2025-11-22 14:35:25 发布

阅读量19

点赞数

CC 4.0 BY-SA版权

分类专栏： Visualforce开发实战精粹文章标签： Force.com Sites Web到潜在客户表单 Visualforce页面

本文链接：https://blog.youkuaiyun.com/t8u9v0/article/details/155172964

Visualforce开发实战精粹专栏收录该内容

19 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

Force.com Sites 功能全解析与实践操作

在当今数字化时代，网站的搭建与优化对于企业和开发者来说至关重要。Force.com Sites 提供了一系列强大的功能，能够帮助我们创建、定制和管理网站。本文将详细介绍 Force.com Sites 的几个重要功能，包括 Web 到潜在客户表单、创建网站模板、添加页眉菜单和侧边栏等，并给出具体的操作步骤和原理分析。

1. Web 到潜在客户表单

标准的 Salesforce Web 到潜在客户功能允许将表单嵌入公司网站，以捕获信息并将其转化为公司 Salesforce 实例中的潜在客户。不过，该表单提交到的是所有 Salesforce 实例通用的 servlet，除了将用户重定向到与潜在客户无关的感谢页面外，无法进行自定义。

我们将创建一个 Visualforce 页面来捕获潜在客户信息，并将用户重定向到个性化的感谢页面，该页面会显示潜在客户的 ID 以供将来参考。然后通过未经身份验证的 Force.com 站点使该页面公开可用。

操作步骤：

创建感谢 Visualforce 页面 ：点击“Your Name | Setup | Develop | Pages”，进入 Visualforce 设置页面，点击“New”按钮，在“Label”字段中输入“WebToLeadThanks”，接受自动生成的“Name”字段默认值“WebToLeadThanks”，将代码下载中的“WebToLeadThanks.page”文件内容粘贴到 Visualforce 标记区域，然后点击“Save”按钮。
创建 Web 到潜在客户页面控制器扩展 ：点击“Your Name | Setup | Develop | Apex Classes”，进入 Apex 类设置页面，点击“New”按钮，将代码下载中的“WebToLeadExt.cls”Apex 类内容粘贴到 Apex 类区域，点击“Save”按钮。
创建 Web 到潜在客户 Visualforce 页面 ：点击“Your Name | Setup | Develop | Pages”，进入 Visualforce 设置页面，点击“New”按钮，在“Label”字段中输入“WebToLead”，接受自动生成的“Name”字段默认值“WebToLead”，将代码下载中的“WebToLead.page”文件内容粘贴到 Visualforce 标记区域，然后点击“Save”按钮。
配置站点访问权限 ：点击“Your Name | Setup | Develop | Sites”，进入站点设置页面，点击“Sites”部分的“Visualforce Cookbook”链接，在结果页面中，向下滚动到“Site Visualforce Pages”列表并点击“Edit”按钮，启用 Visualforce 页面访问权限，从“Available Visualforce Pages”列表中选择“WebToLead”和“WebToLeadThanks”，点击“Add”图标将其添加到“Enabled Visualforce Pages”列表，然后点击“Save”按钮。
设置公共访问权限 ：点击“Public Access Settings”按钮，在结果页面中点击“Edit”按钮，在“Standard Object Permissions”部分为“Lead”对象选择“Read”和“Create”复选框，然后点击“Save”按钮。

工作原理：

在浏览器中打开以下 URL 即可显示“WebToLead”页面： http://<domain>/WebToLead ，其中 <domain> 是配置站点时选择的 Force.com 域名。填写并提交表单后，访客将被带到个性化的感谢页面。表单使用 Bootstrap 样式类“control - group”以一系列 <div> 元素进行布局。

<div class="control-group">
  <apex:outputLabel styleClass="control-label"
    for="firstname" value="First Name" />
  <div class="controls">
    <div class="input-prepend">
      <span class="add-on"><i class="icon-user"></i></span>
      <apex:inputText id="firstname" value="{!Lead.FirstName}" />
    </div>
  </div>
</div>

使用 <apex:inputText /> 组件来捕获用户输入，而不是 <apex:inputField /> 组件，这样可以避免将必需字段类添加到输入元素中，否则输入元素会出现在图标下方。

2. 创建网站模板

在之前的操作中，每个页面都包含显示其内容所需的完整 Visualforce 标记，这会导致常见标记的重复，例如显示页眉和页脚。如果页眉或页脚内容需要更改，站点上的每个页面都需要用新标记进行更新。

Visualforce 提供了模板解决方案，允许将站点的公共元素添加到模板中，作为渲染任何页面的起点，页面再将其特定内容注入到模板的适当位置。

操作步骤：

创建模板 ：点击“Your Name | Setup | Develop | Pages”，进入 Visualforce 设置页面，点击“New”按钮，在“Label”字段中输入“CookbookTemplate”，接受自动生成的“Name”字段默认值“CookbookTemplate”，将代码下载中的“CookbookTemplate.page”文件内容粘贴到 Visualforce 标记区域，然后点击“Save”按钮。
创建 Visualforce 页面 ：点击“Your Name | Setup | Develop | Pages”，进入 Visualforce 设置页面，点击“New”按钮，在“Label”字段中输入“SiteItemTemplated”，接受自动生成的“Name”字段默认值“SiteItemTemplated”，将代码下载中的“SiteItemTemplated.page”文件内容粘贴到 Visualforce 标记区域，然后点击“Save”按钮。
配置站点访问权限 ：点击“Your Name | Setup | Develop | Sites”，进入站点设置页面，点击“Sites”部分的“Visualforce Cookbook”链接，在结果页面中，向下滚动到“Site Visualforce Pages”列表并点击“Edit”按钮，启用 Visualforce 页面访问权限，从“Available Visualforce Pages”列表中选择“CookbookTemplate”和“SiteItemTemplated”，点击“Add”图标将其添加到“Enabled Visualforce Pages”列表，然后点击“Save”按钮。

工作原理：

在浏览器中打开以下 URL 即可显示“SiteItemTemplated”页面： http://<domain>/SiteItemTemplated 。模板定义了公共内容以及使用该模板的页面可以注入其内容的位置。

<!--  container -->
<div class="container-fluid">
  <div class="hero-unit">
    <h1>Demo Site</h1>
    <h2>Visualforce Developer Cookbook</h2>
  </div>
  <apex:insert name="body" />
</div> <!-- container -->

使用该模板的页面通过 <apex:composition/> 组件定义要注入模板的内容。

<apex:composition template="CookbookTemplate">
  <apex:define name="Title">
    Force.com Sites Recipe 4
  </apex:define>
  ...
</apex:composition>

3. 添加页眉菜单到模板

网站通常需要在页眉中显示导航菜单。当每个页面定义自己的页眉和页脚时，突出显示当前显示页面的菜单选项很简单。但当模板提供页眉和页脚信息时，需要一种机制让页面向模板标识自己，以便模板突出显示相应的菜单选项。

我们将创建一个 Visualforce 模板，为四个其他 Visualforce 页面（主页、关于页面、联系页面和链接页面）提供页眉和页脚内容，然后通过未经身份验证的 Force.com 站点使这些页面公开可用。

操作步骤：

创建模板 ：点击“Your Name | Setup | Develop | Pages”，进入 Visualforce 设置页面，点击“New”按钮，在“Label”字段中输入“CookbookTemplateV2”，接受自动生成的“Name”字段默认值“CookbookTemplateV2”，将代码下载中的“CookbookTemplateV2.page”文件内容粘贴到 Visualforce 标记区域，然后点击“Save”按钮。
创建主页 ：点击“Your Name | Setup | Develop | Pages”，进入 Visualforce 设置页面，点击“New”按钮，在“Label”字段中输入“Home”，接受自动生成的“Name”字段默认值“Home”，将代码下载中的“Home.page”文件内容粘贴到 Visualforce 标记区域，然后点击“Save”按钮。
创建关于页面 ：点击“Your Name | Setup | Develop | Pages”，进入 Visualforce 设置页面，点击“New”按钮，在“Label”字段中输入“About”，接受自动生成的“Name”字段默认值“About”，将代码下载中的“About.page”文件内容粘贴到 Visualforce 标记区域，然后点击“Save”按钮。
创建联系页面 ：点击“Your Name | Setup | Develop | Pages”，进入 Visualforce 设置页面，点击“New”按钮，在“Label”字段中输入“Contact”，接受自动生成的“Name”字段默认值“Contact”，将代码下载中的“Contact.page”文件内容粘贴到 Visualforce 标记区域，然后点击“Save”按钮。
创建链接页面 ：点击“Your Name | Setup | Develop | Pages”，进入 Visualforce 设置页面，点击“New”按钮，在“Label”字段中输入“Links”，接受自动生成的“Name”字段默认值“Links”，将代码下载中的“Links.page”文件内容粘贴到 Visualforce 标记区域，然后点击“Save”按钮。
配置站点访问权限 ：点击“Your Name | Setup | Develop | Sites”，进入站点设置页面，点击“Sites”部分的“Visualforce Cookbook”链接，在结果页面中，向下滚动到“Site Visualforce Pages”列表并点击“Edit”按钮，启用 Visualforce 页面访问权限，从“Available Visualforce Pages”列表中选择“CookbookTemplateV2”、“Home”、“About”、“Contact”和“Links”，点击“Add”图标将其添加到“Enabled Visualforce Pages”列表，然后点击“Save”按钮。

工作原理：

在浏览器中打开以下 URL 即可显示主页： http://<domain>/Home 。点击页眉导航栏中的任何其他页面，导航栏会更新以指示当前页面。

模板定义一个空值作为默认值：

<apex:variable var="page" value="" />

每个页面定义要注入模板的标记，用自己的值覆盖“page”变量。

<apex:define name="page">
  <apex:variable var="page" value="home"/>
</apex:define>

模板插入此标记：

<apex:insert name="page" />

模板根据条件在与页面匹配的菜单项旁边输出“>”字符。

<div class="nav-collapse collapse">
  <ul class="nav">
    <li><a href="/apex/Home">
      <apex:outputText value=">" rendered="{!page=='home'}" />
      Home</a></li>
    <li><a href="/apex/About">
      <apex:outputText value=">" rendered="{!page=='about'}" />
      About</a></li>
    <li><a href="/apex/Contact">
      <apex:outputText value=">" rendered="{!page=='contact'}" />
      Contact</a></li>
    <li><a href="/apex/Links">
      <apex:outputText value=">" rendered="{!page=='links'}" />
      Links</a></li>
  </ul>
</div>

4. 添加侧边栏到模板

网站内容并非总是适合拆分为多个页面。目录可能很长，在单页上显示可能更实用。侧边栏可以通过提供链接让用户快速浏览冗长的内容，从而改善用户体验。

我们将创建一个 Visualforce 模板，为两个其他 Visualforce 页面（目录页面和第一章页面）提供页眉和页脚内容，每个页面都有侧边栏以帮助用户浏览页面内容。然后通过未经身份验证的 Force.com 站点使这些页面公开可用。

操作步骤：

创建模板 ：点击“Your Name | Setup | Develop | Pages”，进入 Visualforce 设置页面，点击“New”按钮，在“Label”字段中输入“CookbookTemplateV3”，接受自动生成的“Name”字段默认值“CookbookTemplateV3”，将代码下载中的“CookbookTemplateV3.page”文件内容粘贴到 Visualforce 标记区域，然后点击“Save”按钮。
创建目录页面 ：点击“Your Name | Setup | Develop | Pages”，进入 Visualforce 设置页面，点击“New”按钮，在“Label”字段中输入“TableOfContents”，接受自动生成的“Name”字段默认值“TableOfContents”，将代码下载中的“TableOfContents.page”文件内容粘贴到 Visualforce 标记区域，然后点击“Save”按钮。
创建第一章页面 ：点击“Your Name | Setup | Develop | Pages”，进入 Visualforce 设置页面，点击“New”按钮，在“Label”字段中输入“Chapter1”，接受自动生成的“Name”字段默认值“Chapter1”，将代码下载中的“Chapter1.page”文件内容粘贴到 Visualforce 标记区域，然后点击“Save”按钮。
配置站点访问权限 ：点击“Your Name | Setup | Develop | Sites”，进入站点设置页面，点击“Sites”部分的“Visualforce Cookbook”链接，在结果页面中，向下滚动到“Site Visualforce Pages”列表并点击“Edit”按钮，启用 Visualforce 页面访问权限，从“Available Visualforce Pages”列表中选择“CookbookTemplateV3”、“TableOfContents”和“Chapter1”，点击“Add”图标将其添加到“Enabled Visualforce Pages”列表，然后点击“Save”按钮。

工作原理：

在浏览器中打开以下 URL 即可显示目录页面： http://<domain>/TableOfContents 。向下滚动或点击侧边栏中的导航链接可以快速导航到特定部分。即使页眉已滚动出视图，导航侧边栏仍保持可见，此功能由 Bootstrap Affix JavaScript 提供。

Bootstrap 框架将页面划分为 12 列网格，模板为侧边栏提供 3 列容器，为详细内容提供 9 列容器。

<div class="row-fluid">
  <div class="span3">
    <apex:insert name="sidebar" />
  </div>
  <div class="span9">
    <apex:insert name="body" />
  </div>
</div> <!-- row -->

每个使用该模板的页面提供侧边栏导航元素列表以及与每个导航元素关联的内容。

<apex:define name="sidebar">
  <ul class="nav nav-list" data-spy="affix" data-offset-top="270">
    <li><a href="#chapter1"><i class="icon-arrow-right"></i> 
      <span class="lead">Chapter 1</span></a></li>
    ...
  </ul>
</apex:define> 
<apex:define name="body">
  <fieldset id="chapter1">
    <legend><a href="/apex/Chapter1">
      Chapter 1 - General Utilities</a>
    </legend>
    <div class="fieldset-content">
      <ul>
        <li>Overriding Standard Buttons</li>
        ...
      </ul>
    </div>
  </fieldset>
</apex:define>

需要确保每个导航列表项都有相关内容，否则用户点击链接时可能无法正常查看内容。

通过以上步骤和原理分析，我们可以充分利用 Force.com Sites 的功能，创建出功能丰富、用户体验良好的网站。无论是捕获潜在客户信息、优化页面结构还是提升导航体验，这些功能都能为我们的网站开发带来极大的便利。

Force.com Sites 功能全解析与实践操作

功能对比分析

操作流程可视化

下面通过 mermaid 流程图来展示创建 Web 到潜在客户表单的整体操作流程：

graph LR
    A[开始] --> B[创建感谢 Visualforce 页面]
    B --> C[创建 Web 到潜在客户页面控制器扩展]
    C --> D[创建 Web 到潜在客户 Visualforce 页面]
    D --> E[配置站点访问权限]
    E --> F[设置公共访问权限]
    F --> G[结束]

这个流程图清晰地展示了从开始到完成 Web 到潜在客户表单创建的主要步骤，有助于开发者更好地理解和执行操作。

常见问题及解决方法

在使用 Force.com Sites 这些功能的过程中，可能会遇到一些常见问题，以下是一些问题及对应的解决方法：
1. 页面无法访问
- 问题描述 ：在浏览器中输入页面 URL 后，无法正常打开页面。
- 可能原因 ：站点访问权限未正确配置，或者页面代码存在错误。
- 解决方法 ：检查站点设置中的 Visualforce 页面访问权限，确保相关页面已启用。同时，检查页面代码是否有语法错误，可通过 Salesforce 的开发工具进行调试。
2. 导航菜单未正确突出显示
- 问题描述 ：点击页眉导航栏中的页面，导航栏未正确更新以指示当前页面。
- 可能原因 ：模板和页面之间的变量传递出现问题，或者页面标记未正确注入模板。
- 解决方法 ：检查模板中定义的变量和页面中覆盖变量的标记是否正确，确保模板能正确识别当前页面。
3. 侧边栏导航链接无效
- 问题描述 ：点击侧边栏中的导航链接，无法跳转到相应的内容部分。
- 可能原因 ：导航列表项和内容部分的关联设置不正确，或者页面 ID 配置有误。
- 解决方法 ：检查页面中侧边栏导航元素和内容部分的 ID 是否一致，确保每个导航列表项都有对应的内容。

总结与展望

通过对 Force.com Sites 的 Web 到潜在客户表单、创建网站模板、添加页眉菜单和侧边栏等功能的详细介绍和操作实践，我们可以看到这些功能为网站开发提供了强大的支持。它们不仅能够提高开发效率，减少代码重复，还能提升用户体验，使网站更加专业和易用。

在未来的网站开发中，我们可以进一步探索 Force.com Sites 的其他功能，结合更多的前端框架和技术，不断优化网站的性能和用户界面。例如，可以尝试将更多的交互元素添加到页面中，或者利用 Salesforce 的数据处理能力实现更复杂的业务逻辑。同时，随着移动设备的普及，我们也需要关注网站在移动端的适配性，确保用户在不同设备上都能获得良好的体验。

总之，Force.com Sites 为开发者提供了一个丰富的工具集，只要我们充分利用这些功能，并不断创新和优化，就能创建出更加出色的网站。希望本文能为广大开发者在使用 Force.com Sites 进行网站开发时提供有价值的参考和帮助。