标准控制器

Visualforce 控制器是一组指令,用于指定用户在用户执行以下操作时发生的情况 与关联的 Visualforce 标记中指定的组件进行交互,例如当用户 单击按钮或链接。控制器还提供对应显示的数据的访问 ,并且可以修改组件行为。

闪电网络平台提供了许多标准控制器,其中包含相同的 用于标准 Salesforce 页面的功能和逻辑。例如,如果您使用 标准帐户控制器,单击 Visualforce 页面产生的行为与在 标准帐户编辑页面。

每个 Salesforce 对象都存在一个标准控制器,可以使用 闪电平台 API。以下主题包括有关使用标准控制器的其他信息:

  • 关联一个 带有 Visualforce 页面的标准控制器
  • 访问数据 带标准控制器
  • 使用标准 控制器操作
  • 验证 规则和标准控制器
  • 设置页面样式,使用 标准控制器
  • 检查对象可访问性
  • 自定义控制器和控制器扩展

将标准控制器与 Visualforce 页面关联

要将标准控制器与 Visualforce 页面相关联,请使用标签上的属性,并为其分配任何 Salesforce 的名称 可以使用 Lightning 平台 API 查询的对象。standardController<apex:page>

例如,将页面与名为 MyCustomObject,请使用以下标记:

<apex:page standardController="MyCustomObject__c">
</apex:page>

注意

当您使用 上的属性时 标记,则不能同时使用该属性。standardController<apex:page>controller

使用标准控制器访问数据

每个标准控制器都包含一个 getter 方法,该方法返回由页面 URL 中的查询字符串参数指定的记录。这 方法允许关联的页面标记使用语法引用上下文记录上的字段,其中 是与 控制器。例如,使用帐户标准控制器的页面可用于返回当前在上下文中的帐户的字段值。id{!object}object{!account.name}name

注意

要使 getter 方法成功,URL 中查询字符串参数指定的记录必须是 与标准控制器类型相同。例如,使用帐户标准的页面 控制者只能返回帐户记录。如果查询字符串参数指定了联系人记录 ID,则不返回任何数据 通过表达式。idid{!account}与 Lightning 平台 API 中的查询一样,您可以使用合并字段语法进行检索 相关记录数据:

  • 您最多可以遍历五个级别的子级与父级关系。例如,如果 使用 Contact 标准控制器,您可以使用 (三级子级到父级 relationship) 返回客户记录所有者的姓名,即 与联系人关联。{!contact.Account.Owner.FirstName}
  • 您可以遍历一个级别的父子关系。例如,如果使用 帐户标准控制器,可用于返回与 当前处于上下文中的帐户。{!account.Contacts}

使用标准控制器操作

操作方法在页面执行逻辑或导航时 事件发生,例如当用户单击按钮或将鼠标悬停在 页。可以通过在以下参数之一的参数中使用表示法从页面标记中调用操作方法 标签:{! }action

  • <apex:commandButton> 创建一个按钮,该按钮调用 行动
  • <apex:commandLink> 创建一个调用操作的链接
  • <apex:actionPoller> 定期调用操作
  • <apex:actionSupport> 创建一个事件(例如 “onclick”、“onmouseover”等) 命名组件,调用操作
  • <apex:actionFunction> 定义了一个新的 JavaScript 调用操作的函数
  • <apex:page> 调用操作 加载页面时

支持的操作方法如下表所示 由所有标准控制器提供。您可以将这些操作与 任何包含属性的 Visualforce 组件。action

行动描述
save插入新记录或更新现有记录(如果该记录当前位于上下文中)。在此之后 操作完成,动作 将用户返回到原始页面(如果已知),或将用户导航到详细信息 页面。save
quicksave插入新记录或更新现有记录(如果该记录当前位于上下文中)。与操作不同,此页面不会重定向 用户到另一个页面。save
edit将用户导航到记录的编辑页面,即 目前在上下文中。此操作完成后,该操作会将用户返回到 用户最初调用操作的页面。edit
delete删除上下文中的记录。此操作完成后,该操作将刷新页面或发送 关联对象的用户要按 Tab 键。delete
cancel中止编辑操作。此操作完成后, 操作返回 用户到用户最初调用编辑的页面。cancel
list返回标准列表页的 PageReference 对象,基于 在该对象最近使用的列表筛选器上。例如 如果标准控制器是 ,并且用户查看的最后一个筛选列表是 New Last Week, 将显示上周创建的联系人。contact

例如,以下页面允许您更新帐户。 单击“保存”时,将在标准上触发操作 控制器,帐户将更新。

save

<apex:page standardController="Account">
  <apex:form>
    <apex:pageBlock title="My Content" mode="edit">
      <apex:pageBlockButtons>
        <apex:commandButton action="{!save}" value="Save"/>
      </apex:pageBlockButtons>
      <apex:pageBlockSection title="My Content Section" columns="2">
        <apex:inputField value="{!account.name}"/>
        <apex:inputField value="{!account.site}"/>
        <apex:inputField value="{!account.type}"/>
        <apex:inputField value="{!account.accountNumber}"/>
      </apex:pageBlockSection>
    </apex:pageBlock>
  </apex:form>
</apex:page>

注意

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

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

注意

仅当用户具有适当的 、 、 或标准控制器中的操作时,才会呈现与 、 、 或操作关联的命令按钮和链接 权限。同样,如果没有特定记录与页面关联,则命令按钮和 不会呈现与 and 操作关联的链接。savequicksaveeditdeleteeditdelete

验证规则和标准控制器

如果用户在使用标准控制器的 Visualforce 页面上输入数据,并且该数据 导致验证规则错误,可以显示该错误 在 Visualforce 页面上。如果验证规则错误位置为 与组件关联的字段,则错误将显示在那里。 如果验证规则错误位置设置为顶部 ,请使用 OR 组件 以显示错误。<apex:inputField><apex:pageMessages><apex:messages><apex:page>

设置使用标准控制器的页面的样式

与标准控制器关联的任何页面都会自动继承 用于标准 Salesforce 页面的样式 与指定对象相关联。也就是说,指定 对象显示为选中状态,并使用选项卡的关联颜色 设置所有页面元素的样式。

您可以覆盖使用标准控制器的页面的样式 替换为属性 在标签上。 例如,以下页面使用 Account 标准控制器, 但呈现一个突出显示 Opportunity 选项卡的页面,并使用 Opportunity 选项卡的黄色:tabStyle<apex:page>

<apex:page standardController="Account" tabStyle="Opportunity">
</apex:page>

若要使用与 MyCustomObject 关联的样式,请执行以下操作:

<apex:page standardController="Account" tabStyle="MyCustomObject__c">
</apex:page>

要使用与自定义 Visualforce 选项卡关联的样式,请将 选项卡名称(非标签)的属性,后跟双下划线 和单词 tab。例如,要使用 Visualforce 的样式 选项卡,名称为 Source 和标签 Sources,请使用:

<apex:page standardController="Account" tabStyle="Source__tab">
</apex:page>

或者,您可以覆盖标准控制器页面样式 使用您自己的自定义样式表和内联样式。

检查对象可访问性

如果用户没有足够的权限来查看某个对象,则任何使用控制器渲染该对象的 Visualforce 页面都将无法访问。 为避免此错误,您应确保仅当用户有权访问关联的对象时,才会呈现 Visualforce 组件 与控制器。您可以像这样检查对象的可访问性:

{!$ObjectType.objectname.accessible}

此表达式返回 true 或 false 值。例如,要检查您是否有权访问标准 Lead 对象, 使用以下代码:

{!$ObjectType.Lead.accessible}

对于自定义对象,代码类似:

{!$ObjectType.MyCustomObject__c.accessible}

在哪里 自定义对象的名称。

MyCustomObject__c确保页面的一部分仅在用户 有权访问对象,请使用组件上的属性。例如,要在以下情况下显示页面块 用户有权访问 Lead 对象,您将执行以下操作:

render

<apex:page standardController="Lead">
	<apex:pageBlock rendered="{!$ObjectType.Lead.accessible}">
		<p>This text will display if you can see the Lead object.</p>
	</apex:pageBlock>
</apex:page>

如果用户无法访问对象,最好提供备用消息。为 例:

<apex:page standardController="Lead">
	<apex:pageBlock rendered="{!$ObjectType.Lead.accessible}">
		<p>This text will display if you can see the Lead object.</p>
	</apex:pageBlock>
	<apex:pageBlock rendered="{! NOT($ObjectType.Lead.accessible) }">
		<p>Sorry, but you cannot see the data because you do not have access to the Lead object.</p>
	</apex:pageBlock>
</apex:page>

呈现 PDF 格式的 Visualforce 页面 文件

您可以使用 PDF 生成 Visualforce 页面的可下载、可打印的 PDF 文件 渲染服务。通过更改标签将页面转换为 PDF。

<apex:page>

<apex:page renderAs="pdf">

呈现的 Visualforce 页面 PDF文件要么显示在浏览器中,要么被下载,这取决于 浏览器的设置。具体行为取决于浏览器、版本、 和用户设置,并且不受 Visualforce 的控制。以下页面包含一些帐户详细信息,并以 PDF 格式呈现 文件。

<apex:page standardController="Account" renderAs="pdf">

<apex:stylesheet value="{!URLFOR($Resource.Styles,'pdf.css')}"/>

<h1>Welcome to Universal Samples!</h1>

<p>Thank you, <b><apex:outputText value=" {!Account.Name}"/></b>, for 
   becoming a new account with Universal Samples.</p>

<p>Your account details are:</p>

<table>
<tr><th>Account Name</th>
    <td><apex:outputText value="{!Account.Name}"/></td>
    </tr>
<tr><th>Account Rep</th>
    <td><apex:outputText value="{!Account.Owner.Name}"/></td>
    </tr>
<tr><th>Customer Since</th>
    <td><apex:outputText value="{0,date,long}">
        <apex:param value="{!Account.CreatedDate}"/>
        </apex:outputText></td>
    </tr>
</table>
    
</apex:page>

Visualforce 页面 呈现为 PDF 文件

将 Visualforce 页面渲染为 PDF 格式 顶点

您可以使用 Apex 中的方法将 Visualforce 页面呈现为 PDF 数据。然后使用 Apex 代码将该 PDF 数据转换为电子邮件附件、文档、 喋喋不休的帖子,等等。

PageReference.getContentAsPDF()下面的示例是一个简单的三元素窗体,用于选择帐户和报表 格式,然后将生成的报告发送到指定的电子邮件 地址。

<apex:page title="Account Summary" tabStyle="Account"
    controller="PdfEmailerController">

    <apex:pageMessages />

    <apex:form >
        <apex:pageBlock title="Account Summary">
    
        <p>Select a recently modified account to summarize.</p>
        <p/>
        
        <apex:pageBlockSection title="Report Format">
        
            <!-- Select account menu -->
            <apex:pageBlockSectionItem>
                <apex:outputLabel for="selectedAccount" value="Account"/> 
                <apex:selectList id="selectedAccount" value="{! selectedAccount }" 
                                 size="1">
                    <apex:selectOption /> <!-- blank by default -->
                    <apex:selectOptions value="{! recentAccounts }" />
                </apex:selectList>
            </apex:pageBlockSectionItem>

            <!-- Select report format menu -->
            <apex:pageBlockSectionItem >
                <apex:outputLabel for="selectedReport" value="Summary Format"/> 
                <apex:selectList id="selectedReport" value="{! selectedReport }" 
                                 size="1">
                    <apex:selectOptions value="{! reportFormats }" />
                </apex:selectList>
            </apex:pageBlockSectionItem>

            <!-- Email recipient input field -->
            <apex:pageBlockSectionItem >
                <apex:outputLabel for="recipientEmail" value="Send To"/> 
                <apex:inputText value="{! recipientEmail }" size="40"/>
            </apex:pageBlockSectionItem>

        </apex:pageBlockSection>
            
        <apex:pageBlockButtons location="bottom">
            <apex:commandButton action="{! sendReport }" value="Send Account Summary" />
        </apex:pageBlockButtons>
    
    </apex:pageBlock>
    </apex:form>

</apex:page>

此页面是一个简单的用户界面。当您从 Apex 生成 PDF 文件时,所有 该操作位于 Apex 代码中。在此示例中,该代码位于指定为页面的 控制器。

PdfEmailerController

public with sharing class PdfEmailerController {
    
    // Form fields
    public Id selectedAccount    { get; set; }  // Account selected on Visualforce page
    public String selectedReport { get; set; }  // Report selected
    public String recipientEmail { get; set; }  // Send to this email
    
    // Action method for the [Send Account Summary] button
    public PageReference sendReport() {

        // NOTE: Abbreviated error checking to keep the code sample short
        //       You, of course, would never do this little error checking
        if(String.isBlank(this.selectedAccount) || String.isBlank(this.recipientEmail)) {
            ApexPages.addMessage(new 
                ApexPages.Message(ApexPages.Severity.ERROR, 
               'Errors on the form. Please correct and resubmit.'));
            return null; // early out
        }
        
        // Get account name for email message strings
        Account account = [SELECT Name 
                           FROM Account 
                           WHERE Id = :this.selectedAccount 
                           LIMIT 1];
        if(null == account) {
            // Got a bogus ID from the form submission
            ApexPages.addMessage(new 
                ApexPages.Message(ApexPages.Severity.ERROR, 
               'Invalid account. Please correct and resubmit.'));
            return null; // early out
        }
        
        // Create email
        Messaging.SingleEmailMessage message = new Messaging.SingleEmailMessage();
        message.setToAddresses(new String[]{ this.recipientEmail });
        message.setSubject('Account summary for ' + account.Name);
        message.setHtmlBody('Here\'s a summary for the ' + account.Name + ' account.');
        
        // Create PDF
        PageReference reportPage = 
            (PageReference)this.reportPagesIndex.get(this.selectedReport);
        reportPage.getParameters().put('id', this.selectedAccount);
        Blob reportPdf;
        try {
            reportPdf = reportPage.getContentAsPDF();
        }
        catch (Exception e) {
            reportPdf = Blob.valueOf(e.getMessage());
        }
        
        // Attach PDF to email and send
        Messaging.EmailFileAttachment attachment = new Messaging.EmailFileAttachment();
        attachment.setContentType('application/pdf');
        attachment.setFileName('AccountSummary-' + account.Name + '.pdf');
        attachment.setInline(false);
        attachment.setBody(reportPdf);
        message.setFileAttachments(new Messaging.EmailFileAttachment[]{ attachment });
        Messaging.sendEmail(new Messaging.SingleEmailMessage[]{ message });
        
        ApexPages.addMessage(new 
            ApexPages.Message(ApexPages.Severity.INFO,
           'Email sent with PDF attachment to ' + this.recipientEmail));

        return null; // Stay on same page, even on success
    }
    
    
    /***** Form Helpers *****/
    
    // Ten recently-touched accounts, for the Account selection menu
    public List<SelectOption> recentAccounts {
        get {
            if(null == recentAccounts){
                recentAccounts = new List<SelectOption>();
                for(Account acct : [SELECT Id,Name,LastModifiedDate 
                                    FROM Account 
                                    ORDER BY LastModifiedDate DESC 
                                    LIMIT 10]) {
                    recentAccounts.add(new SelectOption(acct.Id, acct.Name));
                }
            }
            return recentAccounts;
        }
        set;
    }
    
    // List of available reports, for the Summary Format selection menu
    public List<SelectOption> reportFormats {
        get {
            if(null == reportFormats) {
                reportFormats = new List<SelectOption>();
                for(Map <String,Object> report : reports) {
                    reportFormats.add(new SelectOption(
                        (String)report.get('name'), (String)report.get('label')));
                }
            }
            return reportFormats;
        }
        set;
    }

    
    /***** Private Helpers *****/
    
    // List of report templates to make available
    // These are just Visualforce pages you might print to PDF
    private Map<String,PageReference> reportPagesIndex;
    private List<Map<String,Object>> reports {
        get {
            if(null == reports) {
                reports = new List<Map<String,Object>>();
                // Add one report to the list of reports
                Map<String,Object> simpleReport = new Map<String,Object>();
                simpleReport.put('name',  'simple');
                simpleReport.put('label', 'Simple');
                simpleReport.put('page',   Page.ReportAccountSimple);
                reports.add(simpleReport);
                
                // Add your own, more complete list of PDF templates here

                // Index the page names for the reports
                this.reportPagesIndex = new Map<String,PageReference>();
                for(Map<String,Object> report : reports) {
                    this.reportPagesIndex.put(
                        (String)report.get('name'), (PageReference)report.get('page'));
                }
            }
            return reports;
        }
        set;
    }
}

这个 Apex 控制器在概念上可以分为四个部分。

  • 开头的三个公共属性捕获 表单上的三个输入元素。
  • 操作方法触发 单击“发送帐户摘要”按钮时。sendReport()
  • 两个公共帮助程序属性提供要在两个选择列表中使用的值 input 元素。
  • 末尾的私人帮助程序封装了可能的 PDF 报告列表 格式。您可以通过创建 Visualforce 页面来添加自己的报告,然后 在本节中为其添加一个条目。

当 action 方法触发时, 代码执行以下操作。

sendReport()

  • 它执行基本的错误检查,以确保表单字段具有 有用的值。注意对于必须 在与真人接触后幸存下来。在生产代码中执行更多 完成表单验证。
  • 接下来,它使用所选帐户的值来查找该帐户的名称 帐户。帐户名称用于添加到电子邮件的文本中。 此查找也是进一步验证表单值并确保 选择了真实账户。
  • 它使用该类来组合电子邮件,并设置“收件人”、“主题”和“正文”电子邮件 消息值。Messaging.SingleEmailMessage
  • 该代码为 选择报表格式,然后在其上设置页面请求参数。这 参数名为“id”,其值设置为所选帐户的 ID。这代表了一个特定的 请求在指定帐户的上下文中访问此页面。调用时, 引用 Visualforce 页面有权访问指定的帐户,并且页面将使用该帐户呈现 帐户的详细信息。PageReferencePageReferencegetContentAsPdf()
  • 最后,将 PDF 数据添加到附件中,并将附件添加到 之前创建的电子邮件。然后发送消息。

使用 时, 方法调用的返回类型为 ,其中 代表“二进制大对象”。在 Apex 中,数据类型表示非类型化二进制数据。只有当变量被添加到内容类型为 “application/pdf”,表示二进制数据成为 PDF 文件。PageReference.getContentAsPdf()BlobBlobreportPdfMessaging.EmailFileAttachment

此外,对 的调用是 包裹在块中。如果调用失败, 将希望的 PDF 数据替换为异常消息的版本 发短信。getContentAsPdf()try/catchcatchBlob

将 Visualforce 页面呈现为 PDF 数据在语义上被视为对各种外部服务的标注 原因。原因之一是渲染服务可能以与 外部服务可能会失败。例如,该页面引用了以下外部资源: 不可用。另一个例子是,当页面包含太多数据时,通常在 图像的形式 – 或渲染时间超过限制。因此,在将 Visualforce 页面渲染为 PDF 数据时,请始终将渲染调用包装在一个块中 顶点。getContentAsPdf()try/catch为了完整起见,下面是报告模板页面,该页面由 顶点 法典。

<apex:page showHeader="false" standardStylesheets="false"
    standardController="Account">
    
    <!-- 
    This page must be called with an Account ID in the request, e.g.:
    https://<salesforceInstance>/apex/ReportAccountSimple?id=001D000000JRBet
    -->

    <h1>Account Summary for {! Account.Name }</h1>
    
    <table>
        <tr><th>Phone</th>  <td><apex:outputText value="{! Account.Phone }"/></td></tr>
        <tr><th>Fax</th>    <td><apex:outputText value="{! Account.Fax }"/></td></tr>
        <tr><th>Website</th><td><apex:outputText value="{! Account.Website }"/></td></tr>
    </table>

    <p><apex:outputText value="{! Account.Description }"/></p>
        
</apex:page>

使用 Visualforce PDF 渲染时可用的字体

Visualforce PDF 渲染 支持一组有限的字体。要确保 PDF 输出按预期呈现,请使用 支持的字体名称。对于每种字体,列出的第一个名称是 推荐。

font-family

字体font-family
Arial Unicode MSArial Unicode MS
黑体无衬线无衬线对话
衬线次
邮差等宽邮差等宽DialogInput(对话输入)

注意

  • 这些规则适用于服务器端 PDF 呈现。在 Web 浏览器中查看页面 可以有不同的结果。
  • 使用此处未列出的值设置样式的文本使用“时间”。例如,如果您使用 单词“Helvetica”,它呈现为 Times,因为这不是 Helvetica 字体。我们建议使用“sans-serif”。
  • Arial Unicode MS 是唯一可用的多字节字体。这是唯一一种 为不使用 拉丁字符集。
  • Arial Unicode MS 不支持粗体或斜体。font-weight
  • 当页面呈现为 PDF 文件时,不支持 Web 字体。你可以使用 Visualforce 页面中的 Web 字体(当它们正常呈现时)。

测试字体呈现

您可以使用以下页面使用 Visualforce PDF 渲染测试字体渲染 发动机。

<apex:page showHeader="false" standardStylesheets="false" 
    controller="SaveToPDF" renderAs="{! renderAs }">

<apex:form rendered="{! renderAs != 'PDF' }" style="text-align: right; margin: 10px;">
    <div><apex:commandLink action="{! print }" value="Save to PDF"/></div>
    <hr/>
</apex:form>

<h1>PDF Fonts Test Page</h1>

<p>This text, which has no styles applied, is styled in the default font for the 
   Visualforce PDF rendering engine.</p>

<p>The fonts available when rendering a page as a PDF are as follows. The first 
listed <code>font-family</code> value for each typeface is the recommended choice.</p>

<table border="1" cellpadding="6">
<tr><th>Font Name</th><th>Style <code>font-family</code> Value to Use (Synonyms)</th></tr>
<tr><td><span style="font-family: Arial Unicode MS; font-size: 14pt; ">Arial 
    Unicode MS</span></td><td><ul>
   <li><span style="font-family: Arial Unicode MS; font-size: 14pt;">Arial Unicode MS</span></li>
    </ul></td></tr>
<tr><td><span style="font-family: Helvetica; font-size: 14pt;">Helvetica</span></td>
    <td><ul>
   <li><span style="font-family: sans-serif; font-size: 14pt;">sans-serif</span></li>
   <li><span style="font-family: SansSerif; font-size: 14pt;">SansSerif</span></li>
   <li><span style="font-family: Dialog; font-size: 14pt;">Dialog</span></li>
    </ul></td></tr>
<tr><td><span style="font-family: Times; font-size: 14pt;">Times</span></td><td><ul>
   <li><span style="font-family: serif; font-size: 14pt;">serif</span></li>
   <li><span style="font-family: Times; font-size: 14pt;">Times</span></li>
</ul></td></tr>
<tr><td><span style="font-family: Courier; font-size: 14pt;">Courier</span></td>
    <td><ul>
    <li><span style="font-family: monospace; font-size: 14pt;">monospace</span></li>
    <li><span style="font-family: Courier; font-size: 14pt;">Courier</span></li>
    <li><span style="font-family: Monospaced; font-size: 14pt;">Monospaced</span></li>
    <li><span style="font-family: DialogInput; font-size: 14pt;">DialogInput</span></li>
</ul></td></tr>
</table>

<p><strong>Notes:</strong>
<ul>
<li>These rules apply to server-side PDF rendering. You might see different results 
    when viewing this page in a web browser.</li>
<li>Text styled with any value besides those listed above receives the default font 
    style, Times. This means that, ironically, while Helvetica's synonyms render as 
    Helvetica, using "Helvetica" for the font-family style renders as Times. 
    We recommend using "sans-serif".</li>
<li>Arial Unicode MS is the only multibyte font available, providing support for the 
    extended character sets of languages that don't use the Latin character set.</li>
</ul>
</p>
 
</apex:page>

上一页使用以下控制器,该控制器提供了一个简单的“保存到 PDF” 功能。

public with sharing class SaveToPDF {

    // Determines whether page is rendered as a PDF or just displayed as HTML
    public String renderAs { get; set; }


    // Action method to "print" to PDF
    public PageReference print() {
        renderAs = 'PDF';
        return null;
    }

}

呈现为 PDF 时的组件行为

了解 Visualforce 如何 组件在转换为 PDF 时的行为对于创建呈现的页面至关重要 井。Visualforce PDF 渲染服务 呈现页面显式提供的静态 HTML 和基本 CSS。通常,不要使用 具有以下特点的组件:

  • 依靠 JavaScript 执行操作
  • 依赖 Salesforce 风格 床单
  • 使用样式表或图形等在页面本身或 静态资源

检查您的 Visualforce 页面 属于这些类别之一,右键单击页面上的任意位置并查看 HTML 源代码。如果 您会看到一个引用 JavaScript 的标记 (.js) 或引用 样式表 (.css),验证生成的 PDF 文件是否显示为 预期。

<script><link>

以 PDF 格式呈现时安全的组件

  • <apex:composition>(只要页面包含 PDF 安全组件)
  • <apex:dataList>
  • <apex:define>
  • <apex:facet>
  • <apex:include>(只要页面包含 PDF 安全组件)
  • <apex:insert>
  • <apex:image>
  • <apex:outputLabel>
  • <apex:outputLink>
  • <apex:outputPanel>
  • <apex:outputText>
  • <apex:page>
  • <apex:panelGrid>
  • <apex:panelGroup>
  • <apex:param>
  • <apex:repeat>
  • <apex:stylesheet>(只要 URL 不是 直接引用 Salesforce 风格 床单)
  • <apex:variable>

以 PDF 格式呈现时要谨慎使用的组件

  • <apex:attribute>
  • <apex:column>
  • <apex:component>
  • <apex:componentBody>
  • <apex:dataTable>

以 PDF 格式呈现时使用不安全的组件

  • <apex:actionFunction>
  • <apex:actionPoller>
  • <apex:actionRegion>
  • <apex:actionStatus>
  • <apex:actionSupport>
  • <apex:commandButton>
  • <apex:commandLink>
  • <apex:detail>
  • <apex:enhancedList>
  • <apex:flash>
  • <apex:form>
  • <apex:iframe>
  • <apex:includeScript>
  • <apex:inputCheckbox>
  • <apex:inputField>
  • <apex:inputFile>
  • <apex:inputHidden>
  • <apex:inputSecret>
  • <apex:inputText>
  • <apex:inputTextarea>
  • <apex:listViews>
  • <apex:message>
  • <apex:messages>
  • <apex:outputField>
  • <apex:pageBlock>
  • <apex:pageBlockButtons>
  • <apex:pageBlockSection>
  • <apex:pageBlockSectionItem>
  • <apex:pageBlockTable>
  • <apex:pageMessage>
  • <apex:pageMessages>
  • <apex:panelBar>
  • <apex:panelBarItem>
  • <apex:relatedList>
  • <apex:scontrol>
  • <apex:sectionHeader>
  • <apex:selectCheckboxes>
  • <apex:selectList>
  • <apex:selectOption>
  • <apex:selectOptions>
  • <apex:selectRadio>
  • <apex:tab>
  • <apex:tabPanel>
  • <apex:toolbar>
  • <apex:toolbarGroup>

由 Visualforce 添加或修改的 HTML 标签

默认情况下,Visualforce 自动将所需的 HTML 标记添加到页面,以确保结果是有效的 HTML(和 XML) 公文。您可以放松甚至覆盖此行为。

对于使用此自动行为的页面,Visualforce 会在两个上下文中添加 HTML 标记:更简单的请求上下文(最初加载页面时)和 呈现;和上下文, 当一个是 提交回来,使用标记发出 Ajax 请求,依此类推。GETPOSTBACK<apex:form><apex:actionXXX>

在上下文中,Visualforce 呈现的 HTML 有些宽松。它添加标签来包装页面,标签来包装页面的标题,以及添加到 页面使用 或 和 标记来包装页面的内容。GET<html><head><apex:stylesheet><apex:includeScript><body>

由其他 Visualforce 标记生成的 HTML 将是完整且有效的 HTML,并且您不能使用无效的静态 XML 保存 Visualforce 页面。 但是,HTML 由访问控制器方法、sObject 字段和其他的表达式添加 非 Visualforce 源未经验证 由 Visualforce 在返回之前。它 因此,可以通过请求返回无效的 XML 文档。GET

在上下文中,Visualforce 更加严格。因为 请求的内容可能需要插入到现有的 DOM 中,响应 HTML 是 后处理以确保其有效。这种“整理”修复了缺失和未关闭的标签,删除了 无效的标记或属性,否则会清除无效的 HTML,以便干净地插入 添加到它返回到的任何页面的 DOM 中。此行为旨在确保标记 更新现有 DOM(例如 )可以可靠地工作。POSTBACK<apex:actionHandler>

HTML5 文档类型的轻松整理

要放宽导致问题的 HTML5 应用程序的默认 HTML 整理,请将 到 “html-5.0” 和 API 版本设置为 28.0 或更高版本。

docType

从 API 版本 28.0 开始,Visualforce 页面的整理行为因上下文而异,因此不会剥离 HTML5 标记和属性 離開。Visualforce 始终验证 XML 保存时每个页面的正确性,并要求页面是格式正确的 XML,但 后处理整理不再删除请求的未知标签或属性。这应该使使用 HTML5 和 JavaScript 变得更加容易 广泛使用 HTML 属性的框架。docType=”html–5.0″POSTBACKPOSTBACK

值得记住的是,虽然现代浏览器非常擅长自己整理, 该行为不如呈现有效标记一致。减少 HTML 整理模式代表较小的安全网,以换取 显著提高灵活性。我们建议您仅在 HTML5 上使用这种轻松整理模式 需要它的页面,并带有 HTML 验证和调试工具。html–5.0

注意

在 API 版本 28.0 或更高版本中,如何确定页面的范围是不同的。将子页面添加到根目录时 页面使用 ,如果 中有任何页面 hierarchy 设置为 并且页面设置为 API 版本 28.0 或更高版本,则整个页面层次结构为 在模式下渲染。docType<apex:include>docType=”html–5.0″html–5.0

手动覆盖自动 <html> 和 <body> 标记 代

使用标记的 and 属性来禁止自动生成 和标记,以支持添加到页面的静态标记 你自己。

applyHtmlTagapplyBodyTag<apex:page><html><body>下面是一个说明如何操作的示例 这:

<apex:page showHeader="false" sidebar="false" standardStylesheets="false"
    applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">

<html>
    <body>
        <header>
            <h1>Congratulations!</h1>
        </header>
        <article>
            <p>This page looks almost like HTML5!</p>
        </article>
    </body>
</html>

</apex:page>

这些属性彼此独立;您可以以 、 或 unset 的任意组合使用它们。当这两个属性都设置为 时,将保留默认的自动生成 和 标记。当任一设置为 时,您全权负责将相应的标签添加到 标记。在此模式下,Visualforce 不会阻止您创建无意义的标签组合或属性,甚至 现代浏览器适合。truefalsetrue<html><body>false

注意

如果出现以下情况,则始终生成一个部分 必需,而不考虑 和 的值。为 例如,如果使用 OR 标记、设置页面等,则会生成标记。<head>applyHtmlTagapplyBodyTag<head><apex:includeScript><apex:stylesheet>title有一个例外 统治。如果设置为 并且 除 之外的页面,则生成 no。例如, 以下代码会自动添加标记,但添加节: 行为不应对实际页面造成问题。

applyHtmlTagfalse<apex:includeScript><head><body><head>

<apex:page showHeader="false" applyHtmlTag="false">
<html>
    <apex:includeScript value="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>
</html>
</apex:page>

该属性在设置为 API 的 Visualforce 页面的标记中可用 版本 27.0 或更高版本。该属性在标签上可用 对于设置为 API 的 Visualforce 页面 版本 28.0 或更高版本。它们都有以下附加限制:

applyHtmlTag<apex:page>applyBodyTag<apex:page>

  • 该属性必须设置为页面,例如 .showHeaderfalse<apex:page showHeader=”false”>
  • 该属性必须设置为 “text/html”(默认值)。contentType
  • 使用顶层或最外层标记的值; 并且使用该标记添加的页面上的属性将被忽略。<apex:page>applyHtmlTagapplyBodyTag<apex:include>

创建一个空的 HTML5“容器”页面

当您想要绕过大部分 Visualforce 并添加自己的容器页面时,请使用空容器页面 标记。容器页面对 HTML5 和移动设备特别有用 发展 以及不需要标准 Visualforce 输出的其他 Web 应用。

您使用远程 对象、JavaScript 远程处理或其他 Lightning 平台 API,用于发出服务请求,然后使用 JavaScript 呈现结果。以下代码提供了一个示例容器页以启动 跟。

<apex:page docType="html-5.0" applyHtmlTag="false" applyBodyTag="false"
           showHeader="false" sidebar="false" standardStylesheets="false"
           title="Unused Title">
<html>
    
    <head>
        <title>HTML5 Container Page</title>
    </head>
    
    <body>
        <h1>An Almost Empty Page</h1>
  
        <p>This is a very simple page.</p>
    </body>
    
</html>
</apex:page>

该组件及其属性是 容器页面定义的核心。

<apex:page>

  • docType=”html-5.0″将页面设置为使用 现代 HTML5 文档类型。
  • applyHtmlTag=”false”并告诉 Visualforce 您的标记供应 和标记,这样它就不会生成自己的标记。applyBodyTag=”false”<html><body>注意如果将 或 设置为 false,则组件的属性为 忽视。applyHtmlTagapplyBodyTagtitle<apex:page>
  • 、 和 属性禁止显示标准标题、侧边栏、 以及将 Salesforce 用户界面和视觉设计添加到 Visualforce 的样式表 页面。它还会抑制 JavaScript 资源,例如有助于重定向的脚本 会话超时。showHeader=”false”sidebar=”false”standardStylesheets=”false”

容器页面中不需要该标记,但 包含它是个好主意。如果必须向元素添加值,则必须自行添加标记。在这种情况下,Visualforce 会将其任何必需的值添加到您的 .否则,Visualforce 会自行渲染以添加任何必要的值。<head><head><head><head><head>

您可以使用 Visualforce 组件, 例如 、 和 ,以引用页面上的静态资源。将 和 的输出添加到元素中。如果您没有添加一个,Visualforce 会添加自己的。输出将呈现在您放置的任何位置 页面。<apex:includeScript><apex:stylesheet><apex:image><apex:includeScript><apex:stylesheet><head><apex:image>

注意

“空”的 Visualforce 页面呈现了最少数量的 HTML 标记,但事实并非如此 完全是空的,或者没有你无法控制的资源。必不可少的 JavaScript 代码 仍添加了 Visualforce,例如 instrumentation。Visualforce 还会自动添加 添加标记所需的资源。例如,对 Remote 的引用 对象或 JavaScript 远程处理资源(如果在代码中使用它们)。

使用自定义文档类型

您可以使用标记上的属性为 Visualforce 页面指定不同的“文档类型”(文档类型或 DTD)。这将更改文档类型 声明。如果您使用 HTML5,并且还可能允许您解决浏览器兼容性问题。

docType<apex:page>

默认情况下,Visualforce 页面的文档类型为 HTML 4.01 Transitional。具体说来 页面以以下 DocType 声明开头:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

您可以使用标记上的属性为 Visualforce 页面指定不同的文档类型。docType<apex:page>

该属性采用 一个表示文档类型的字符串。字符串的格式 是:docType

<doctype>-<version>[-<variant>]

哪里

  • doctype是 或htmlxhtml
  • version是十进制版本 对doctype
  • variant,如果包括,则为:
    • strict、 或 对于所有文档类型和文档类型,或者transitionalframesethtmlxhmtl-1.0
    • <空白>或文档类型basicxhmtl-1.1

如果指定了无效的文档类型,则使用默认文档类型。有关的更多信息 有效的 HTML 文档类型,请参阅 W3C 网站上的列表。

注意

在 API 28.0 及更高版本中,如何确定页面的范围取决于整个页面层次结构,而不仅仅是主页。 使用标记将页面添加到主页时,如果层次结构中的任何页面设置为 ,则整个页面 层次结构在该模式下呈现。docType<apex:include>docType=”html-5.0″

自定义文档类型示例

要创建具有 XHTML 1.0 Strict 文档类型的 Visualforce 页面,请使用标记上的属性,并指定 值:docType<apex:page>xhtml-1.0-strict

<apex:page docType="xhtml-1.0-strict" title="Strictly XHTML" 
    showHeader="false" sidebar="false">
    <h1>This is Strict XHTML!</h1>
    <p>
        Remember to close your tags correctly:<br/>
        <apex:image url="/img/icon-person.gif" alt="Person icon"/>
    </p>
</apex:page>

注意

Visualforce 不会更改标记 由组件生成以匹配 doctype,也由标准 Salesforce 元素(如 标题和侧边栏。Salesforce 元素有效 对于大多数文档类型,并且与任何文档类型一起正常运行,但是如果您选择严格 doctype 并希望通过 HTML 验证测试,您可能需要禁止或 替换标准 Salesforce 元素。

使用自定义 ContentType

您可以使用标签上的属性为 Visualforce 页面指定不同的格式。这会将响应的 HTTP 标头设置为 页面的属性。

ContentType<apex:page>Content-TypeContentType该属性采用多用途 Internet 邮件扩展 (MIME) 媒体类型作为值,例如 、 、 或。

ContentTypeapplication/vnd.ms-exceltext/csvimage/gif

注意

浏览器可以行为 如果您设置了无效的 .有关有效 MIME 媒体类型的详细信息,请参阅 http://www.iana.org/assignments/media-types/。ContentType

Microsoft Excel 内容类型示例

要在 Microsoft Excel 电子表格中显示 Visualforce 页面数据,请使用标记上的属性,并指定 的值。contentType<apex:page>application/vnd.ms-excel

例如,以下页面构建了一个简单的联系人列表。这是一个简化的 在页面中构建数据表中所示示例的版本。

<apex:page standardController="Account">

  <!-- This page must be accessed with an Account Id in the URL. For example: 
       https://<salesforceInstance>/apex/myPage?id=001D000000JRBet -->

    <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>

若要在 Excel 中显示此页,请将属性添加到标记中,如下所示:contentType<apex:page>

<apex:page standardController="Account" contentType="application/vnd.ms-excel">
    <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>

如果页面在 Excel 中无法正确显示,请尝试其他 MIME 类型,如 .text/csv

在 Visualforce 组件上设置自定义 HTML 属性

您可以添加任意属性 到许多 Visualforce 组件 被“传递”到呈现的 HTML。例如,当将 Visualforce 与 JavaScript 一起使用时,这很有用 框架,例如 jQuery Mobile、AngularJS 和 Knockout,它们使用或其他属性作为钩子来激活框架 功能。

data-*传递属性还可用于提高 HTML5 功能(如“幻影”文本、客户端验证和帮助文本属性)的可用性。

placeholderpatterntitle

重要

这 HTML5 功能的行为由用户的浏览器决定,而不是由 Visualforce 决定,并且各不相同 从浏览器到浏览器。如果要使用这些功能,请尽早测试 并且通常在您计划支持的每个浏览器和设备上。要向 for 添加传递属性,请执行以下操作 例如,一个组件, 在属性前面加上“html-”,并将属性值设置为 正常。

<apex:outputPanel>

<apex:page showHeader="false" standardStylesheets="false" doctype="html-5.0">

    <apex:outputPanel layout="block" html-data-role="panel" html-data-id="menu">
        <apex:insert name="menu"/>    
    </apex:outputPanel>

    <apex:outputPanel layout="block" html-data-role="panel" html-data-id="main">
        <apex:insert name="main"/>    
    </apex:outputPanel>

</apex:page>

这将生成以下 HTML 输出。

<!DOCTYPE HTML>
<html>
<head> ... </head>
<div id="..." data-id="menu" data-role="panel">
    <!-- contents of menu -->
</div>

<div id="..." data-id="main" data-role="panel">
    <!-- contents of main -->
</div>
</html>

每 以“html-”开头的属性将传递到生成的 HTML,并使用 “html-”已删除。

注意

与内置属性冲突的直通属性 组件生成编译错误。以下 Visualforce 组件支持直通属性。

  • <apex:column>
  • <apex:commandButton>
  • <apex:commandLink>
  • <apex:component>
  • <apex:dataTable>
  • <apex:form>
  • <apex:iframe>
  • <apex:image>
  • <apex:includeScript>
  • <apex:input>
  • <apex:inputCheckbox>
  • <apex:inputField>
  • <apex:inputHidden>
  • <apex:inputSecret>
  • <apex:inputText>
  • <apex:inputTextarea>
  • <apex:messages>
  • <apex:outputField>
  • <apex:outputLabel>
  • <apex:outputLink>
  • <apex:outputPanel>
  • <apex:outputText>
  • <apex:page>
  • <apex:pageBlock>
  • <apex:pageBlockButtons>
  • <apex:pageBlockSection>
  • <apex:pageBlockSectionItem>
  • <apex:pageBlockTable>
  • <apex:panelBar>
  • <apex:panelBarItem>
  • <apex:panelGrid>
  • <apex:sectionHeader>
  • <apex:selectCheckboxes>
  • <apex:selectList>
  • <apex:selectOption>
  • <apex:selectOptions>
  • <apex:selectRadio>
  • <apex:stylesheet>
  • <apex:tab>
  • <apex:tabPanel>

有关各个组件的其他信息,包括 将传递属性添加到其位置的细节 呈现的 HTML,请参阅标准组件参考。创建无法使用支持传递的组件生成的 HTML 标记 属性,结合 Visualforce 标记替换为静态 HTML。例如,要创建 jQuery Mobile ,请将标记与 HTML 标记组合在一起 需要。

listview<apex:repeat>

<ul data-role="listview" data-inset="true" data-filter="true">
    <apex:repeat value="{! someListOfItems}" var="item">
        <li><a href="#">{! item.Name}</a></li>
    </apex:repeat>
</ul>

动态 Visualforce 不支持直通属性。

自定义 Visualforce 页面的外观和输出

Visualforce 页面和组件 输出发送到浏览器进行呈现的 HTML。Visualforce 的 HTML 生成是 复杂,自动提供页面结构、内容和样式。Visualforce 还提供了多种方法来 更改 Visualforce 的默认 HTML, 替换您自己的资源,或关联其他资源,例如 CSS 样式表或 JavaScript 文件,带有页面。

设置 Visualforce 页面的样式

设置 Visualforce 的样式很容易 页面,要么模仿标准 Salesforce 页面的外观,要么使用您自己的页面 样式表或内容类型。

许多 Visualforce 组件都具有 or 属性。定义这些属性中的任何一个都允许您将 CSS 代码与 元件。自定义 CSS 代码使您能够更改组件的默认视觉样式, 包括其宽度、高度、颜色和字体。stylestyleClass

使用 Salesforce 样式

许多 Visualforce 组件 已经具有 Salesforce 中相同组件的外观,例如相关列表 在详细信息页面或部分标题中。这些组件的部分样式,包括 组件的配色方案基于显示组件的选项卡。您可以 通过将页面与 标准控制器,或者通过在 or 标记上设置属性。

tabStyle<apex:page><apex:pageBlock>

  • 当您将标准控制器与 Visualforce 页面一起使用时,您的 新页面采用 Salesforce 中关联对象的标准选项卡的样式。它也 允许您访问与关联对象关联的方法和记录。
  • 当您使用自定义控制器时,标签的属性允许您模仿 关联的 Salesforce 页面。 如果您只希望页面的某些部分类似于 Salesforce 页面,则可以使用 标记上的属性。有关示例,请参阅定义 Getter 方法。tabStyle<apex:page>tabStyle<apex:pageBlock>

扩展 Salesforce 样式 样式表

使用标签添加 页面的其他样式表。使用大多数 Visualforce 组件上可用的 or 属性将它们连接到 样式表中的样式定义。此技术允许您使用 有。

<apex:stylesheet>stylestyleClass下面的标记显示了一个非常基本的页面。该标记引用另存为静态的 CSS 样式表 名为 TestStyles 的资源,并列在“静态资源”页面上。它由标记属性中的全局变量引用。属性 的标记使用示例样式 样式表中定义的类。

<apex:stylesheet>$Resource<apex:stylesheet>valuestyleClass<apex:outputText>

<apex:page>
    <apex:stylesheet value="{!$Resource.TestStyles}"/>
    <apex:outputText value="Styled Text in a sample style class" styleClass="sample"/>
</apex:page>

这是用于此示例的样式表。

.sample {
    font-weight: bold;
}

使用 Lightning 设计系统

使用元素 将 Lightning Design System 合并到 Visualforce 页面中,并将它们与 Lightning Experience 的样式。此组件是上传 Lightning Design System 作为静态资源,并在 Visualforce 页面中使用它。

<apex:slds>

您不必将 Lightning Design System 作为静态资源上传。那 意味着您可以保持页面的语法简单,并保持在 250 MB 的静态资源之下 限制。要在 Visualforce 页面中使用 Lightning Design System 样式表,请在页面标记中的任意位置添加。<apex:slds />要在 Visualforce 页面中使用 Lightning Design System 样式表,请执行以下操作:

  1. 在页面中的任意位置添加 标记。<apex:slds />
  2. 将 or 属性设置为 。<apex:page>applyBodyTagapplyHtmlTagfalse
  3. 将类包含在任何 SLDS 样式上,或者 asset 父元素。slds-scope

警告

不要在元素中包装任何 Visualforce 标签。slds-scope

<apex:page standardController="Account" applyBodyTag="false">
    <apex:slds /> 
 
    <!-- any Visualforce component should be outside SLDS scoping element -->
    <apex:outputField value="{!Account.OwnerId}" /> 
 
    <div class="slds-scope">
    <!-- SLDS markup here -->
    </div>
</apex:page>

通常,闪电设计系统已经确定了范围。但是,如果将 or 设置为 false,则必须包含作用域类 slds-scope。在作用域类中,标记可以引用 Lightning Design System 样式和资源。applyBodyTagapplyHtmlTag

引用 Lightning Design System 中的资源,例如 SVG 图标和 图像,请使用公式函数和全局变量。URLFOR()$Asset使用以下命令 标记,例如,引用 SVG 帐户图标。

<svg aria-hidden="true" class="slds-icon">
    <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#account')}"></use>
</svg>

若要使用 SVG 图标,请在标记中使用 和 添加所需的 XML 命名空间。

xmlns=”http://www.w3.org/2000/svg”xmlns:xlink=”http://www.w3.org/1999/xlink”html

注意

如果您使用的是 Salesforce 侧边栏、标题、 或内置样式表,则无法向 .仅当 、 和 设置为 时才支持 VG 图标。htmlshowHeaderstandardStylesheetssidebarfalse

以下标记显示了一个简单的帐户详细信息页面。此页面使用 Lightning 设计系统卡元素和帐户标准控制器。此页面还包括 帐户 PNG 图标。

此页面中没有任何数据,除非您使用记录 ID 加载它。闪电 Design System 不支持将数据导入 Visualforce 页面的组件,例如 as 和 .使用 Lightning 从页面访问 Salesforce 数据 设计系统,使用远程 对象、JavaScript 远程处理或 REST API。<apex:pageBlock><apex:detail>

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" docType="html-5.0" standardController="Account" applyBodyTag="False" applyHtmlTag="False">
<head>
  <title>{! Account.Name }</title>
  <apex:slds /> 
</head>

<body class="slds-scope">
    <!-- MASTHEAD -->
    <p class="slds-text-heading--label slds-m-bottom--small">
      Using the Lightning Design System in Visualforce
    </p>
    <!-- / MASTHEAD -->
        
    <!-- PAGE HEADER -->
    <p class="slds-text-title_caps slds-line-height--reset">Accounts</p>
        <h1 class="slds-page-header__title slds-truncate" title="My Accounts">{! Account.Name }</h1>
        <span class="slds-icon_container slds-icon-standard-account" title="Account Standard Icon">
          <svg class="slds-icon slds-page-header__icon" aria-hidden="true">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#account')}" />
          </svg>
        </span>
          <!-- / HEADING AREA -->
      <div class="slds-col slds-no-flex slds-grid slds-align-top">
        <button class="slds-button slds-button--neutral">New Account</button>
      </div>
    <!-- / PAGE HEADER -->

    <!-- ACCOUNT DETAIL CARD -->
    <div class="slds-panel slds-grid slds-grid--vertical slds-nowrap">
      <div class="slds-form--stacked slds-grow slds-scrollable--y">

        <div class="slds-panel__section">
          <h3 class="slds-text-heading--small slds-m-bottom--medium">Account Detail</h3>
          <div class="slds-form-element slds-hint-parent slds-has-divider--bottom">
            <span class="slds-form-element__label">Name</span>
            <div class="slds-form-element__control">
              <span class="slds-form-element__static">{! Account.Name }</span>
            </div>
          </div>
          <div class="slds-form-element slds-hint-parent slds-has-divider--bottom">
            <span class="slds-form-element__label">Phone</span>
            <div class="slds-form-element__control">
              <span class="slds-form-element__static">{! Account.Phone }</span>
            </div>
          </div>
        </div>
        <div class="slds-panel__section slds-has-divider--bottom">
          <div class="slds-media">
            <div class="slds-media__body">
              <div class="slds-button-group slds-m-top--small" role="group">
                <button class="slds-button slds-button--neutral slds-grow">Edit</button>
                <button class="slds-button slds-button--neutral slds-grow">Save</button>
                 <button class="slds-button slds-button--neutral slds-grow">New Account</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- / ACCOUNT DETAIL CARD -->
</body>
</apex:page>

有关 Lightning Design System 样式的更多示例,请参阅 Salesforce Lightning Design System 参考站点,并了解 有关 Trailhead 上的闪电设计系统的更多信息。

使用 Lightning Experience 设置现有 Visualforce 页面的样式 样式表

在以下情况下,您可以控制页面是否使用 Lightning Experience 的外观设置样式 在 Lightning Experience 或 Salesforce 移动应用程序中查看该属性。

lightningStylesheets

注意

不支持该属性 在 Experience Cloud 站点中。lightningStylesheets

在 Lightning 中查看时,设置 Visualforce 页面的样式以匹配 Lightning Experience UI 体验或 Salesforce 移动应用程序,在标记中设置。在 Salesforce Classic 中查看页面时,它不会得到 Lightning Experience 样式。lightningStylesheets=”true”<apex:page>

<apex:page lightningStylesheets="true">

如果 ,则 CSS 作用域类会自动应用于 Visualforce 页面的元素。范围界定 类,以便您的内容与 Lightning Experience UI 匹配。如果将 或设置为 false,则必须手动添加范围类。lightningStylesheets=”true”slds-vf-scope<body>applyBodyTagapplyHtmlTagslds-vf-scope

这是一个标准的 Visualforce 页面 没有属性。页面 采用经典 UI 样式。lightningStylesheets

这是同一个 Visualforce 页面,带有 属性设置为 。lightningStylesheetstrue

您可以设置最常用的 Visualforce 样式 具有属性的组件。 但是,某些组件在风格上与 Lightning Experience 略有不同。例如,,某些元素使用浏览器的默认 而是样式。仍然支持不需要样式的常用 Visualforce 组件,例如 、 和 。lightningStylesheets<apex:inputFile><apex:inputField><apex:form><apex:outputText><apex:param>

包含不属于 Visualforce 组件库,将标记与代码和属性一起使用。<apex:slds/>lightningStylesheets

注意

  • 该属性不影响 自定义样式。必须更新自定义代码以匹配页面的 SLDS 样式。lightningStylesheets
  • 如果设置为 false,则 的属性将在 Lightning Experience 中覆盖和抑制, Salesforce Classic 和移动应用程序。standardStylesheets<apex:page>lightningStylesheets
  • 组件存在已知问题 从 Visualforce 页面创建 PDF 文件时。因此,不支持或调用<apex:slds>lightningStyleSheets<apex:page renderAs=”pdf”>PageReference.getContentAsPDF().

使用时,大多数 Visualforce 按钮显示为中性变体。按钮的中性样式出现以下原因: 没有选择器挂钩来可靠地确定哪些按钮必须打上品牌。将 style 属性添加到 以创建基于 您的组织品牌:lightningStylesheets=”true”.slds-vf-button_brand<apex:commandButton>

<apex:commandButton styleClass="slds-vf-button_brand" value="Refresh the Page">

注意

构建新功能时,请使用 Lightning Design System 按钮蓝图使用和实现该按钮。<apex:slds>

以下 Visualforce 组件支持该属性或不需要样式。lightningStylesheets

  • analytics:reportChart
  • apex:actionFunction
  • apex:actionPoller
  • apex:actionRegion
  • apex:actionStatus
  • apex:actionSupport
  • apex:areaSeries
  • apex:attribute
  • apex:axis
  • apex:barSeries
  • apex:canvasApp
  • apex:chart
  • apex:chartLabel
  • apex:chartTips
  • apex:column
  • apex:commandButton
  • apex:commandLink
  • apex:component
  • apex:componentBody
  • apex:composition
  • apex:dataList
  • apex:dataTable
  • apex:define
  • apex:detail
  • apex:dynamicComponent
  • apex:enhancedList
  • apex:facet
  • apex:flash
  • apex:form
  • apex:gaugeSeries
  • apex:iframe
  • apex:image
  • apex:include
  • apex:includeLightning
  • apex:includeScript
  • apex:inlineEditSupport
  • apex:input
  • apex:inputCheckbox
  • apex:inputField
  • apex:inputFile
  • apex:inputHidden
  • apex:inputSecret
  • apex:inputText
  • apex:inputTextArea
  • apex:insert
  • apex:legend
  • apex:lineSeries
  • apex:listViews
  • apex:map
  • apex:mapMarker
  • apex:message
  • apex:messages
  • apex:outputField
  • apex:outputLabel
  • apex:outputLink
  • apex:outputPanel
  • apex:outputText
  • apex:page
  • apex:pageBlock
  • apex:pageBlockButtons
  • apex:pageBlockSection
  • apex:pageBlockSectionItem
  • apex:pageBlockTable
  • apex:pageMessage
  • apex:pageMessages
  • apex:panelBar
  • apex:panelBarItem
  • apex:panelGrid
  • apex:panelGroup
  • apex:param
  • apex:pieSeries
  • apex:radarSeries
  • apex:relatedList
  • apex:remoteObjectField
  • apex:remoteObjectModel
  • apex:remoteObjects
  • apex:repeat
  • apex:scatterSeries
  • apex:scontrol
  • apex:sectionHeader
  • apex:selectCheckboxes
  • apex:selectList
  • apex:selectOption
  • apex:selectOptions
  • apex:selectRadio
  • apex:stylesheet
  • apex:tab
  • apex:tabPanel
  • apex:toolbar
  • apex:toolbarGroup
  • apex:variable
  • chatter:feed
  • chatter:feedWithFollowers
  • chatter:follow
  • chatter:newsFeed
  • flow:interview
  • site:googleAnalyticsTracking
  • site:previewAsAdmin
  • topics:widget

使用自定义样式

使用标记或静态 HTML 以包含您自己的样式表或样式。

<apex:stylesheet>对于 HTML 标记,您可以定义内联 CSS 代码,就像在常规 HTML 中一样 页。

<apex:page>
    <style type="text/css">
        p { font-weight: bold; }
    </style>

    <p>This is some strong text!</p>
</apex:page>

此示例引用定义为静态资源的样式表。首先,创建 样式表并将其作为名为 自定义CSS。

h1 { color: #f00; }
p { background-color: #eec; }
newLink { color: #f60; font-weight: bold; }

接下来,创建一个引用此静态的页面 资源。

<apex:page showHeader="false">
    <apex:stylesheet value="{!$Resource.customCSS}" />
    <h1>Testing Custom Stylesheets</h1>
    <p>This text could go on forever...<br/><br/>
       But it won't!</p>

    <apex:outputLink value="https://salesforce.com" styleClass="newLink">
        Click here to switch to www.salesforce.com
    </apex:outputLink>
</apex:page>

提示如果您未使用 Salesforce 样式,您可以通过阻止标准 Salesforce 样式表来缩小页面大小 装载。若要防止加载,请将组件上的属性设置为 假。如果您不加载 Salesforce 样式表、需要它们的组件不显示 正确。

standardStylesheets<apex:page>

<apex:page standardStylesheets="false">
    <!-- page content here -->
</apex:page>

Visualforce 组件 生成 HTML 具有传递和属性。这些属性 允许您使用自己的样式和样式类来控制 生成的 HTML。 允许您设置样式 直接在组件上,而 LETS 为在其他地方定义的样式附加类。例如,以下代码集 和 的类 应用 风格。

stylestyleClassstylestyleClass<apex:outputText>

<apex:page>

    <style type="text/css">
        .asideText { font-style: italic; }
    </style>

    <apex:outputText style="font-weight: bold;" 
        value="This text is styled directly."/>

    <apex:outputText styleClass="asideText" 
        value="This text is styled via a stylesheet class."/>

</apex:page>

若要使用 DOM ID 应用样式,请使用样式定义的 CSS 属性选择器。 请参阅定义组件的 DOM ID 的样式。如果您打算在样式表中使用图像,请使用 CSS 文件压缩图像,然后 将文件作为单个静态资源上传。例如,假设您的 CSS 文件有一个 像 以后。

body { background-image: url("images/dots.gif") }

合 整个目录和父 CSS 文件复制到单个 zip 文件中。在此示例中,zip 文件资源名称为 myStyles。

images

<apex:stylesheet value="{!URLFOR($Resource.myStyles, 'styles.css')}"/>

警告

如果样式表的值中包含空字符串,则无法将该页面呈现为 PDF。例如,样式 规则可防止包含该规则的任何页面呈现为 PDF。urlbody { background-image: url(“”); }

禁止显示 Salesforce 用户界面和 风格

默认情况下,Visualforce 页面采用相同的视觉样式和用户界面“镶边” 与 Salesforce 的其余部分一样。通过此默认样式行为,您可以创建如下所示的页面 它们直接内置于 Salesforce 中。如果您不希望页面具有 Salesforce 外观和 感觉,您可以抑制 Salesforce 页面和视觉设计的各个方面。您可以使用 组件上的以下属性。

<apex:page>

  • sidebar– 设置为 以禁止显示标准侧边栏。删除侧边栏会为您的页面提供 更宽的画布。例如,您可以在表中显示更多列。false此属性不 影响 Salesforce 的其余外观。您可以继续使用 、 等组件,以及通过 Salesforce 用户界面呈现的组件 造型。<apex:pageBlock><apex:detail><apex:inputField>
  • showHeader– 设置为 将禁止显示标准 Salesforce 页面设计。标题、选项卡和 侧边栏及其关联的样式表和 JavaScript 资源被删除, 就像在会话超时时帮助重定向的脚本一样。您已经准备好了空白页 填写您自己的用户界面。false但是,取消标准页面设计不会 禁止显示提供 Salesforce 可视化设计的所有样式表和脚本,或者 其他脚本包括该页面。添加到页面的 Visualforce 组件 继续采用 Salesforce 视觉设计。
  • standardStylesheets– 设置为 ,同时设置为 ,以隐含 包含支持 Salesforce 视觉设计的样式表。当您抑制 在标准样式表中,您的页面是无样式的,但您自己的样式表除外。falseshowHeaderfalse注意如果您不加载 Salesforce 样式表、需要它们的组件不显示 正确。如果未同时设置为 ,则将此属性设置为 不起作用。falseshowHeaderfalse

定义组件的 DOM ID 的样式

如果要应用样式,请使用样式定义的 CSS 属性选择器 属性选择器依赖于属性的定义,而不是 HTML 标记,以应用 CSS 样式。您可以在任何 Visualforce 组件上设置该值以设置其 DOM ID。但是,在呈现的 HTML 中是 通常以父母的 组件,作为 Visualforce 自动 ID 生成过程的一部分。例如,以下代码的实际 HTML 为:

ididididj_id0:myId

<apex:page>
    <apex:outputText id="myId" value="This is less fancy."/>
</apex:page>

你 CSS 应该通过使用属性来考虑这一点 选择器:

<apex:page>
    <style type="text/css">
        [id*=myId] { font-weight: bold; }
    </style>
    <apex:outputText id="myId" value="This is way fancy !"/>
</apex:page>

这 选择器匹配 ID 中任何位置包含“myId”的任何 DOM ID,因此您在 Visualforce 组件上设置的 如果您打算将其用于样式目的,则在页面上是唯一的。

使用 Salesforce 样式表中的样式

Salesforce 在整个应用程序中使用不同的样式表(.css 文件)来确保 每个选项卡都符合 Salesforce 的外观和感觉。这些样式表是自动的 包含在 Visualforce 页面上,除非您指定 标记的属性。

falseshowHeader<apex:page>

警告

Salesforce 样式表没有版本控制,外观和类名 的组件更改,恕不另行通知。Salesforce 强烈建议您使用 Visualforce 模仿 Salesforce 样式的外观而不是直接模仿的组件 引用并依赖Salesforce的样式表。

当您禁用包含 Salesforce 样式表时,只有您的自定义样式表 影响页面的样式。为了建立部分或全部的样式 与 Salesforce 外观相匹配,您可能希望查看和使用所选内容 默认样式表。以下样式表包含您可以引用的样式类。它们位于 Salesforce 实例的 /dCSS/ 目录中。

  • dStandard.css – 包含大多数样式定义 用于标准对象和选项卡。
  • allCustom.css – 包含自定义的样式定义 制表符。

重要

Salesforce 不提供更改通知或文档 的内置样式。使用风险自负。

识别用户看到的 Salesforce 样式

创建 Visualforce 页面时,了解 Salesforce 外观通常很有用 并感受用户的期望,以便呈现与其风格相匹配的页面。例如 一些用户可以选择自定义其外观。您需要设计您的 Visualforce 页面将这些差异考虑在内。

那里 是两个全局变量,可帮助您确定用户看到的样式:和 。这两个变量之间的区别在于,$User.UITheme 返回用户应该看到的外观和感觉, 而 $User.UIThemeDisplayed 实际返回用户的外观 看到。例如,用户可以拥有查看闪电网络的首选项和权限 体验外观,但如果他们使用的浏览器不支持该外观和 感觉,例如,旧版本的 Internet Explorer,$User.UIThemeDisplayed 返回不同的值。$User.UITheme$User.UIThemeDisplayed这两个变量都返回以下值之一:

  • Theme1– 过时的 Salesforce 主题
  • Theme2– Salesforce Classic 2005 用户 界面主题
  • Theme3– Salesforce Classic 2010 用户 界面主题
  • Theme4d——现代“闪电体验” Salesforce 主题
  • Theme4t– Salesforce 移动应用程序主题
  • Theme4u– Lightning 控制台主题
  • PortalDefault—Salesforce 客户门户 主题
  • Webstore—AppExchange 主题

假设开发人员对一些 CSS 样式进行了硬编码,使其类似于 Salesforce。为了 在新样式的 Visualforce 页面上保留相同的外观,开发人员需要 在多个样式表之间进行选择以处理用户的首选项。以下 示例显示了一种可能的完成方式 这:

<apex:page standardController="Account">
    <apex:variable var="newUI" value="newSkinOn" 
        rendered="{!$User.UIThemeDisplayed = 'Theme3'}">
        <apex:stylesheet value="{!URLFOR($Resource.myStyles, 'newStyles.css')}" />
    </apex:variable>
    <apex:variable var="oldUI" value="oldSkinOn" 
        rendered="{!$User.UIThemeDisplayed != 'Theme3'}">
        <apex:stylesheet value="{!URLFOR($Resource.myStyles, 'oldStyles.css')}" />
    </apex:variable>
    <!-- Continue page design -->
</apex:page>

请注意,在此示例中:

  • 使用属性,您可以“切换” 显示哪些部分。rendered
  • 由于标签没有 属性,您需要将其包装在 组件。<apex:stylesheet>rendered

即使为用户启用了新的外观,他们也可能没有正确运行 浏览器或辅助功能设置来查看它。下面是一个代码示例,它利用变量来显示 alternate 信息发送给 用户:

$User.UITheme

<apex:page showHeader="true" tabstyle="Case">
    <apex:pageMessage severity="error" rendered="{!$User.UITheme = 'Theme3' && 
                                                    $User.UIThemeDisplayed != 'Theme3'}">
    We've noticed that the new look and feel is enabled for your organization. 
    However, you can't take advantage of its brilliance. Please check with 
    your administrator for possible reasons for this impediment.
    </apex:pageMessage>
    <apex:ListViews type="Case" rendered="{!$User.UITheme = 'Theme3' && 
                                           $User.UIThemeDisplayed = 'Theme3'}"/>
</apex:page>

请注意,虽然等于 ,但不等于,因此页面不会呈现 充分发挥其潜力。

$User.UIThemeTheme3$User.UIThemeDisplayed

确定用户在 JavaScript 中看到的 Salesforce 样式

如果您在页面和应用程序中使用大量 JavaScript,请识别 Salesforce 主题 用户在 JavaScript 代码中看到的内容很重要。识别当前用户体验上下文 允许您在 JavaScript 代码中正确管理导航。

JavaScript 函数返回一个 包含以下值之一的字符串,用于标识当前用户界面主题。UITheme.getUITheme()

  • Theme1– 过时的 Salesforce 主题
  • Theme2– Salesforce Classic 2005 用户界面 主题
  • Theme3—Salesforce Classic 2010 用户界面 主题
  • Theme4d—现代“闪电体验”Salesforce 主题
  • Theme4t– Salesforce 移动应用程序主题
  • Theme4u– Lightning 控制台主题
  • PortalDefault—Salesforce 客户门户主题
  • Webstore—AppExchange 主题

返回的字符串值与 Visualforce 和全局变量返回的值相同。$User.UITheme$User.UIThemeDisplayed

以下标记检查当前用户体验上下文是否为 Lightning Experience 主题。

function isLightningDesktop() {
  return UITheme.getUITheme === "Theme4d";
}

HTML 注释和 IE 条件注释

Visualforce 删除了大多数 HTML 和 在呈现之前从页面进行 XML 注释,而不处理其内容。互联网 但是,资源管理器条件注释不会被删除,允许你包括 特定于 IE 的资源和元标记。

Visualforce 不会评估标准 HTML 注释 () 中包含的任何内容,无论注释是单行还是 多行。对于非 Internet Explorer 注释,Visualforce 编译器将 带有星号的 HTML 注释的内容。此替换使 HTML 注释 不适合在较旧的浏览器中注释掉 JavaScript 代码。<!– –>

Internet Explorer 条件注释最多 通常用于解决浏览器兼容性问题,通常使用旧版本的 即。尽管条件注释在页面上的任何地方都有效,但它们是 经常放置在页面的标签内, 它们可用于包含特定于版本的样式表或 JavaScript 兼容性“填充码”。<head>要在页面的标签中放置条件注释, 禁用标准 Salesforce header、sidebar 和 stylesheet,并添加您自己的 和 tags:

<head><head><body>

<apex:page docType="html-5.0" showHeader="false" standardStylesheets="false">
    <head>
      <!-- Base styles -->
      <apex:stylesheet value="{!URLFOR($Resource.BrowserCompatibility, 'css/style.css')}"/>
        
      <!--[if lt IE 7]>
          <script type="text/javascript" 
              src="{!URLFOR($Resource.BrowserCompatibility, 'js/obsolete-ie-shim.js')}>
          </script>
          <link rel="stylesheet" type="text/css" 
              href="{!URLFOR($Resource.BrowserCompatibility, 'css/ie-old-styles.css')}" />
      <![endif]--> 
    
      <!--[if IE 7]>
          <link rel="stylesheet" type="text/css" 
              href="{!URLFOR($Resource.BrowserCompatibility, 'css/ie7-styles.css')}" />
      <![endif]-->
    </head>

    <body>
        <h1>Browser Compatibility</h1>
        <p>It's not just a job. It's an adventure.</p>
    </body>
</apex:page>

Visualforce 不支持或 评估 Visualforce 标签,用于 示例, , 在 标准 HTML 注释。但是,它将在 IE 中计算以下表达式 条件评论:

<apex:includeScript/>

  • 全局变量,例如 和$Resource$User
  • 函数URLFOR()

请参阅 Microsoft 的 Internet 文档 Explorer 条件注释,以获取有关如何使用它们的更多详细信息。

快速开始使用 Visualforce

为了展示 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/HelloWorldMyDomainName.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://MyDomainNamePackageName.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 帮助。

Visualforce 开发工具

在开始开发 Visualforce 页面和组件之前,请熟悉不同的位置 要创建它们,请执行以下操作:

  • 构建 Visualforce 开发模式的最佳方式仅适用于具有“自定义”的用户 应用程序“权限。开发模式为您提供:
    • 每个 Visualforce 页面上包含页面视图的特殊开发页脚 状态、任何关联的控制器、指向组件参考文档的链接和页面 标记编辑器,提供突出显示、查找替换功能和自动建议 组件标记和属性名称。
    • 只需输入唯一的 URL 即可定义新的 Visualforce 页面。
    • 错误消息包含比标准用户更详细的堆栈跟踪 收到。
    要启用 Visualforce 开发模式,请执行以下操作:
    1. 从您的个人设置中,输入快速 “查找”框,然后选择“高级用户详细信息”。Advanced User Details没有结果?输入 “快速查找”框,然后选择“个人信息”。Personal Information
    2. 单击编辑
    3. 选中“开发模式”复选框。
    4. (可选)选中“在开发模式下显示视图状态”复选框以 启用开发页脚上的“视图状态”选项卡。此选项卡可用于监视 Visualforce 页面的性能。
    5. 点击保存
  • 您还可以通过 Salesforce 用户界面从设置中开发 Visualforce 页面 输入“快速查找”框,然后 选择 Visualforce 页面。对于 Visualforce 组件,请从“设置”中输入“快速查找”框,然后选择“Visualforce 组件”。Visualforce PagesComponents
  • 适用于 Visual Studio Code 的 Salesforce 扩展,其中包括 用于在轻量级、可扩展的 VS Code 编辑器中的 Salesforce 平台上进行开发的工具, 提供与开发组织(临时组织、沙箱和 DE 组织)合作的功能, Apex、Aura 组件和 Visualforce。

使用开发模式页脚

启用开发模式后,您可以通过导航到 页面的 URL。例如,如果某个页面被命名为 ,并且您的 Salesforce 实例是 MyDomainName.my.salesforce.com,请在浏览器的地址栏中输入 https:// MyDomainName.my.salesforce.com/apex/HelloWorld开发模式还为您提供了特殊的开发 页脚用于编辑 Visualforce 页面和自定义控制器,以及监控 Visualforce 性能。HelloWorld启用开发模式后,将显示所有 Visualforce 页面 使用浏览器底部的开发模式页脚:

  • 单击带有页面名称的选项卡以打开页面编辑器以查看和编辑 关联的 Visualforce 标记,而无需返回“设置”区域。变化 保存页面后立即显示。
  • 如果页面使用自定义控制器,则控制器类的名称可用作 一个选项卡。单击选项卡以编辑关联的 Apex 类。
  • 如果页面使用任何控制器扩展,则每个扩展的名称都可用 作为选项卡。单击该选项卡可以编辑关联的 Apex 类。
  • 如果在安装程序中启用,则“视图状态”选项卡将显示信息 关于影响 Visualforce 页面视图状态的项目。
  • 单击保存”(位于编辑窗格的正上方)以保存更改,然后 刷新页面内容。
  • 单击“组件引用”(Component Reference) 查看所有文档 支持的 Visualforce 组件。
  • 单击“在哪里使用?”以查看 引用页面的 Salesforce,例如自定义选项卡、控制器或其他 页面。
  • 单击“折叠”按钮 (“折叠”图标) 以折叠开发模式页脚 面板。单击“展开”按钮 (“展开”图标) 将其切换回打开状态。
  • 单击“禁用开发模式”按钮 (禁用开发模式图标) 以关闭 完全是开发模式。开发模式将保持关闭状态,直到您从 您的个人设置中的您的个人信息页面。

关于“视图状态”选项卡

网页的视图状态由以下所有数据组成 在服务器请求(如发送或接收数据)期间维护控制器的状态。 由于视图状态会影响页面的整体大小,因此页面的性能可以 依赖于有效管理视图状态。开发模式页脚中的“视图状态”选项卡 提供有关 Visualforce 页面与 Salesforce 交互时的视图状态的信息。

注意

了解页面请求过程的开发人员应使用“视图状态”选项卡。 在使用 标签。要启用“视图状态”选项卡,请执行以下操作:

  1. 从您的个人设置中,输入 “快速查找”框,然后选择“高级用户详细信息”。Advanced User Details没有结果?进入 “快速查找”框,然后选择“个人信息”。Personal Information
  2. 单击编辑
  3. 选中“开发模式”复选框(如果未选中)。
  4. 选中“在开发模式下显示视图状态”复选框。
  5. 点击保存

注意

由于视图状态链接到表单数据,因此“视图状态”选项卡仅在 页面包含标签。此外, “视图状态”选项卡仅在使用自定义控制器或控制器扩展的页面上显示。<apex:form>

“视图状态”选项卡由文件夹节点组成。如果单击任何文件夹,则饼图中带有 此时将显示“内容”选项卡。此图表显示文件夹的子 Visualforce 自定义控制器 Apex 对象或字段。您可以通过以下方式查看哪些元素对父项的整体大小有影响 将鼠标悬停在图形的各个部分上。这与各个文本节点的信息相同。 该图表要求在浏览器上启用 Flash 版本 6 或更高版本。Salesforce 允许 Visualforce 页面的最大视图状态大小为

170KB.“视图状态”选项卡显示页面上的哪些元素是 占用了这个空间。较小的视图状态大小通常意味着更快的加载时间。最小化 页面的视图状态,您可以优化 Apex 控制器代码并删除任何多余的 使用的 Visualforce 组件。例如:

  • 如果您注意到很大一部分视图状态 来自控制器或控制器扩展中使用的对象,请考虑优化 SOQL 调用以仅返回与 Visualforce 页面相关的数据。
  • 如果视图状态受大型组件的影响 树,尝试减少页面所依赖的组件数量。

“视图状态”选项卡包含以下列(按字母顺序):

描述
占家长的百分比自定义控制器、Apex 对象或字段占总大小的百分比 为父母做出贡献。
名字自定义控制器、Apex 对象或字段的名称。
大小自定义控制器、Apex 对象或字段的视图状态大小。
类型自定义控制器、Apex 对象或字段的类型。
价值字段的值。

“名称”列包含定义 Visualforce 页面各个部分的节点。它们是(按字母顺序排列):

节点描述
组件树这代表了页面的整体结构。其大小受 页面上的组件数。一般来说,更少的组件意味着更小 组件树,这可能会导致更快的加载时间。您可以查看您的视图量 状态大小由组件树组成,方法是单击“视图” 状态文件夹。
内部这表示您的 Visualforce 页面使用的内部 Salesforce 数据。这不可能 由开发人员控制。您可以看到视图状态大小的构成 内部元素,方法是单击“状态”文件夹。
表达 式这表示 Visualforce 页面中定义的公式表达式使用的数据。
此文件夹包含所有 Visualforce 自定义控制器 Apex 对象或字段。通过展开子 Controller 和 Controller Extension 文件夹,您可以 可以查看页面上的每个对象、其字段以及这些字段的值。 通常,这些取决于您的 Apex 控制器逻辑。
视图状态此文件夹包含所有节点。通过单击它,您可以找到整体 有关 Visualforce 的信息 页面的视图状态。“容量”选项卡告诉您分配的视图状态大小是多少 正在使用。如果超过该数量,该图表还会告诉您有多少 KB 你已经过去了。

关于 Visualforce 编辑器

通过开发模式页脚或从“设置”编辑 Visualforce 页面时,编辑器 具有以下功能:语法高亮显示编辑器会自动对关键字和所有关键字应用语法高亮显示 函数和运算符。搜索 (搜索图标)通过搜索,可以在当前页面、类或 触发。若要使用搜索,请在“搜索”文本框中输入字符串,然后单击“查找下一个”。

  • 要将找到的搜索字符串替换为另一个字符串,请输入新的 字符串,然后单击“替换”以仅替换该实例,或单击“全部替换”以替换该实例,然后单击“全部替换”以替换该实例,然后单击“替换” 页面中出现的搜索字符串的所有其他实例, 类或触发器。
  • 若要使搜索操作区分大小写,请选择“匹配大小写”选项。
  • 若要使用正则表达式作为搜索字符串,请选择“正则表达式”选项。常规 表达式遵循 JavaScript 的正则表达式规则。搜索 使用正则表达式可以找到换行超过 一行。如果将 replace 操作与 找到的字符串一起使用 一个正则表达式,替换操作也可以绑定 正则表达式组变量(、 等) 找到搜索字符串。例如,要将标签替换为标签,并保留所有 属性对原来完好无损,搜索并替换它 跟。$1$2<h1><h2><h1><h1(\s+)(.*)><h2$1$2>

转到行 (“转到行”图标)
此按钮允许您突出显示指定的行号。如果该行是 当前不可见,编辑器将滚动到该行。
撤消 (“撤消”图标) 和重做 (“重做”图标)
使用撤消可撤消编辑操作,使用重做可重新创建编辑操作 那被撤消了。
字体大小
从下拉列表中选择字体大小以控制 编辑器中显示的字符。
行和列位置
光标的行和列位置显示在状态栏中 编辑器的底部。这可以与转到行 (“转到行”图标) 一起使用,以快速浏览编辑器。
行数和字符数
行数和字符总数显示在状态栏中 编辑器的底部。
编辑器支持以下键盘快捷键:
Tab
在光标处添加一个选项卡
SHIFT+Tab
删除选项卡
CTRL+f
打开搜索对话框或搜索当前 搜索
CTRL+r
打开搜索对话框或替换当前 使用指定的替换字符串进行搜索
CTRL+g
打开“转到行”对话框
CTRL+s
执行快速保存。
CTRL+z
撤消上次编辑操作
CTRL+y
重新创建上次撤消的编辑操作

访问 Visualforce 页面的指标

要查询组织中 Visualforce 页面上的指标,请使用 Salesforce SOAP 中的对象 应用程序接口。

VisualforceAccessMetrics

要从对象中查询信息,请使用开发人员控制台中的查询编辑器。如果使用 Visual Studio Code,则可以 还可以使用 SOQL Builder 进行查询,SOQL Builder 是 Salesforce Extension Pack 的一部分。VisualforceAccessMetrics

下面是一个 SOQL 调用示例:

SELECT ApexPageId, DailyPageViewCount, Id, ProfileId, MetricsDate, LogDate FROM VisualforceAccessMetrics
参数描述
日志日期此参数提供记录页面访问的日期。此参数 适用于版本 216 及更高版本。
配置文件 Id与访问页面的用户关联的配置文件的 ID。这 参数可用于版本 216 及更高版本。
ApexPageId跟踪的 Visualforce 页面的 ID
每日页面浏览每个对象跟踪 字段中的每日页面查看次数。VisualforceAccessMetricsDailyPageViewCount
指标日期中指定了收集衡量指标的日期。MetricsDate

注意

页面查看量在页面查看后的第二天进行统计,每个对象在 90 次后删除 日。VisualforceAccessMetrics

使用 , 你 可以跟踪组织中每个 Visualforce 页面在 24 小时内收到的浏览次数 时期。要了解页面在多天内获得了多少浏览量,您可以查询 同一 ApexPageId 的多个对象。VisualforceAccessMetricsVisualforceAccessMetrics

Visualforce 简介

Visualforce 由一种基于标签的标记语言组成,可为开发人员提供 构建应用程序和自定义 Salesforce 用户界面的方式。借助 Visualforce,您可以:

  • 生成向导和其他多步骤过程。
  • 通过应用程序创建自定义流控制。
  • 定义导航模式和特定于数据的规则,以实现最佳、高效的应用程序 互动。

有兴趣创建新的 Visualforce 组件吗?我们建议构建闪电网络 组件。它们是适用于 Salesforce 的更现代、更强大的自定义 HTML 元素 应用和网站。如果您仍然对为什么要使用 Lightning Web 组件感到好奇 而不是 Visualforce,而是 find 现在更多了。

Visualforce 可用于桌面浏览器和 Salesforce 移动应用程序。对于桌面 浏览器,它在 Lightning Experience 和 Salesforce Classic 中都可用。Lightning 不支持 Visualforce 页面和自定义 iframe 在 iPad Safari 上体验。Visualforce 在 Contact Manager、Group、 专业版、企业版、无限制版、性能版和开发人员版。

什么是 Visualforce?

Visualforce 是一个框架,允许开发人员 构建可在 Lightning 平台上本地托管的自定义用户界面。这 Visualforce 框架包括一种类似于 HTML 的基于标记的标记语言。它还有一个 一组服务器端“标准控制器”,用于执行基本数据库操作, 如查询和保存,执行简单。

我们建议使用 Lightning Web 组件而不是 Visualforce 来构建自定义功能。 Lightning Web 组件是轻量级的,可为您的应用程序提供卓越的性能,并且 网站。详细了解为什么要使用 Lightning Web 组件而不是 Visualforce。

在 Visualforce 标记语言中,每个 Visualforce 标签对应于一个粗略的或 细粒度用户界面组件,例如页面分区、相关列表或字段。这 Visualforce 组件的行为可以通过 标准 Salesforce 页面。或者,开发人员可以将自己的逻辑与 用 Apex 编写的 controller 类。

Visualforce 组件及其示例 对应标签

什么是 Visualforce 页面?

开发人员可以使用 Visualforce 创建 Visualforce 页面定义。页面定义 由两个主要元素组成:

  • Visualforce 标记
  • Visualforce 控制器

Visualforce 标记

Visualforce 标记由 Visualforce 标签、HTML、JavaScript 或任何其他支持 Web 的标记组成 代码嵌入在单个标签中。 标记定义页面上包含的用户界面组件以及方式 他们出现了。<apex:page>

Visualforce 控制器

Visualforce 控制器是一组指令,用于说明所发生的情况 当用户与关联的 Visualforce 标记中指定的组件进行交互时。一种类型 交互是指用户单击按钮或链接时。控制器还提供对 页面中显示的数据,可以修改组件行为。开发人员可以使用 Lightning 平台提供的标准控制器,也可以添加 自定义控制器逻辑,其类是用 Apex 编写的:

  • 一个标准 控制器由用于 标准 Salesforce 页面。例如,如果您使用 标准帐户控制器,单击 Visualforce 页面的行为与在标准帐户编辑页面上单击“保存”的行为相同。如果您在页面上使用标准控制器,并且用户无权访问 对象,则页面显示权限不足错误消息。解决此错误 通过检查用户对对象的可访问性,以及 适当地显示组件。
  • 通过标准列表控制器,您可以创建 Visualforce 页面,这些页面可以 显示或处理一组记录。现有 Salesforce 页面的示例 一组记录包括列表页、相关列表和批量操作页。
  • 自定义控制器是用 Apex 编写的类,它 实现页面的所有逻辑,而无需利用标准控制器。如果您使用 自定义控制器,您可以定义新的导航元素或行为,但必须 此外,还要重新实现标准控制器中已提供的任何功能。与其他 Apex 类一样,自定义控制器完全在系统模式下执行,在 忽略当前用户的对象级和字段级权限。您可以 指定用户是否可以根据用户的 轮廓。
  • 控制器扩展是用 Apex 编写的类,它 添加或覆盖标准或自定义控制器中的行为。扩展允许您 以使用另一个控制器的功能,同时添加您自己的自定义逻辑。标准控制器在用户模式下执行,其中权限为字段级 强制执行当前用户的安全性和共享规则。扩展标准 控制器允许您构建尊重用户权限的 Visualforce 页面。 尽管扩展类在系统模式下执行,但标准控制器执行 在用户模式下。与自定义控制器一样,您可以指定用户是否可以执行 基于用户配置文件的控制器扩展中的方法。

注意

自定义控制器和控制器扩展类在 系统模式,因此它们会忽略用户权限和字段级安全性。但是,您可以 选择是否遵循用户在组织范围内的默认值、角色层次结构和共享 规则,方法是使用 类定义。有关信息,请参阅《使用 、 和关键字》中的“使用 Apex 开发人员 指南。with sharingwith sharingwithout sharinginherited sharing

Visualforce 页面可以在哪里使用?

开发人员可以使用 Visualforce 页面执行以下操作:

  • 替代标准按钮,例如帐户的“新建”按钮, 或联系人的“编辑”按钮
  • 覆盖选项卡概述页面,例如“帐户”选项卡主页
  • 定义自定义选项卡
  • 在详细信息页面布局中嵌入组件
  • 创建仪表板组件或自定义帮助页面
  • 自定义、扩展或集成 Salesforce 控制台中的侧边栏(自定义控制台 组件)
  • 在 Salesforce 移动应用程序中添加导航菜单项和操作

为什么我应该使用 Lightning Web 组件而不是 视觉力?

对于新的开发,Salesforce 建议使用 Lightning Experience 低代码工具和 Visualforce 上的闪电网络组件,可实现最现代、高性能和响应速度最快的功能 功能性。Lightning Platform 为高级管理员和 开发人员构建自定义功能,它支持更新、复杂的业务流程 不适用于 Visualforce。

如果您有现有的 Visualforce 组件,请将其转换为 Lightning Web 组件 提供优化和改进应用的机会。花时间评估整体设计 以及每个组件及其等效组件的可用性。与您的设计师合作,选择最好的 使您的组件与 Lightning Experience 用户的现代外观保持一致的方法 接口。有关灵感和一些示例代码,请参阅 Lightning 中提供的组件蓝图 设计系统。

在开始开发 Lightning Web 组件时,请确定何时重用 Visualforce 页面 以及何时将其重建为 Lightning Web 组件。考虑 在需要时进行重建:

  • 更具吸引力和响应性的用户体验。
  • 支持最新的 Web 内容可访问性指南 (WCAG)。
  • 一种易于针对多种设备外形规格进行优化的体验。
  • 提高应用性能。

Lightning Web 组件

Lightning Web 组件是使用 HTML 和现代 JavaScript 构建的自定义 HTML 元素。他们 使用核心 Web 组件标准,仅提供在浏览器中良好运行所需的内容 由 Salesforce 提供支持。因为它们是建立在浏览器中本地运行的代码之上的,所以 Lightning Web 组件是轻量级的,并提供卓越的性能。

Visualforce 标准组件和基本 Lightning Web 组件端

使用此表可查找特定 Lightning Web 组件的等效基本 Lightning Web 组件 标准 Visualforce 组件。

Visualforce 组件Lightning Web 组件
apex:pageBlocklightning-card
apex:pageBlockButtons设置操作槽lightning-card
apex:pageBlockSectionlightning-accordionlightning-accordion-section
apex:pageBlockSectionItemlightning-layoutlightning-layout-item
apex:toolbarGrouplightning-layoutlightning-layout-item
apex:panelGridlightning-layoutlightning-layout-item
apex:panelGrouplightning-layoutlightning-layout-item
apex:tabPanellightning-tabset
apex:tablightning-tab
apex:repeattemplate for:each or iterator
apex:pageBlockTablelightning-datatable
apex:dataTablelightning-datatable
apex:inlineEditSupportlightning-datatable使用内联编辑 可编辑的列
apex:imagelightning-platform-resource-loader
apex:stylesheetlightning-platform-resource-loader
apex:includeScriptlightning-platform-resource-loader
apex:maplightning-map
apex:formlightning-record-form lightning-record-view-form lightning-record-edit-form
apex:inputlightning-inputlightning-slider
apex:inputCheckboxlightning-inputtype=“复选框”lightning-input类型=“复选框按钮”
apex:inputFilelightning-input类型=“文件”lightning-file-upload
apex:inputHiddenlightning-inputclass=“slds-hide”
apex:inputSecretlightning-inputtype=“密码”
apex:inputTextlightning-inputtype=“文本”
apex:inputTextArealightning-textarea
apex:inputFieldlightning-input-field
apex:selectCheckboxeslightning-checkbox-group
apex:selectListlightning-comboboxlightning-dual-listbox
apex:selectRadiolightning-radio-group
apex:outputLabel将标签属性设置为lightning-input
apex:outputFieldlightning-output-field
apex:outputLinklightning-formatted-url
apex:outputTextlightning-formatted-datetime lightning-formatted-number lightning-formatted-rich-text lightning-formatted-text lightning-formatted-time
apex:commandButtonlightning-button lightning-button-stateful lightning-button-icon lightning-button-icon-stateful
apex:commandLinklightning-button带裸露的变体
apex:pageMessagelightning-platform-show-toast-event
apex:messagesapex:message自定义有效性lightning-input
apex:pageMessages自动lightning-record-form用于或lightning-messageslightning-record-view-form lightning-record-edit-form

Visualforce 开发需要哪些权限?

Visualforce 开发需要 各种权限,具体取决于特定活动。

所需的用户权限
启用 Visualforce 开发模式:“自定义应用程序”
要创建、编辑或删除 Visualforce 页面:“自定义应用程序”
要创建和编辑自定义 Visualforce 组件,请执行以下操作:“自定义应用程序”
编辑自定义 Visualforce 控制器或 Apex“作者顶点”
设置 Visualforce 页面 安全:“管理配置文件和权限集”
要为 Visualforce 页面设置版本设置:“自定义应用程序”
要创建、编辑或删除静态资源,请执行以下操作:“自定义应用程序”
创建 Visualforce 制表符:“自定义应用程序”

Visualforce 是如何构建的?

所有 Visualforce 页面都完全在 Lightning 平台上运行,当开发人员创建 页面,以及最终用户请求页面时,如以下体系结构图所示。

Visualforce 系统架构 – 开发 模式

当开发人员完成 Visualforce 页面的编写并将其保存到平台时,平台应用程序服务器 尝试将标记编译为一组抽象指令 Visualforce 渲染器可以理解。如果编译产生错误,则保存将中止,并且 错误将返回给开发人员。否则,说明 保存到元数据存储库并发送到 Visualforce 渲染器。渲染器将指令转换为 HTML,然后 刷新开发人员的视图,从而提供即时反馈 向开发人员提供对标记所做的任何更改。

下面的架构图显示了非开发人员 用户请求 Visualforce 页面。因为页面已经编译成指令,所以 Application Server 只是从元数据存储库中检索页面 并将其发送到 Visualforce 渲染器以转换为 HTML。

Visualforce 系统架构 – 标准用户模式

注意

您的 Visualforce 页面可能在其中一台 force.com 服务器上运行,而不是在 salesforce.com 上运行 服务器。

Visualforce 页面与 S-Controls 相比如何?

重要

Visualforce 页面取代了 S 控件。尚未这样做的组织 以前使用的 S 控件无法创建它们。现有的 s 控制是 不受影响,仍可编辑。Visualforce 页面被认为是下一代 s-controls 和 应尽可能使用代替 S 控制,以提高性能和 编写它们的难易程度。下表概述了 Visualforce 页面和 S 控件。

Visualforce 页面S-控制
所需的技术技能HTML、XMLHTML、JavaScript、Ajax 工具包
语言风格标记标记程序代码
页面覆盖模型使用标签组装标准和自定义组件为整个页面编写 HTML 和 JavaScript
标准 Salesforce 组件库是的
访问内置平台行为是,通过标准控制器
数据绑定是的开发人员可以将输入组件(例如文本框)与特定的 字段(例如帐户名称)。如果用户在该输入组件中保存了一个值,则该值也是 保存在数据库中。不开发人员无法将输入组件与特定字段绑定。相反,他们 必须编写使用 API 的 JavaScript 代码,以使用用户指定的数据库更新 字段值。
样式表继承是的不可以,必须手动引入 Salesforce 样式表
尊重字段元数据,例如唯一性是,默认情况下如果用户尝试保存违反唯一性的记录,或者 必填字段属性,则会自动显示错误消息,用户可以 再试一次。是,如果使用 API 调用在 JavaScript 中编码describe如果用户尝试保存违反唯一性或要求的记录 字段属性,则仅当 S-Control 开发人员编写代码时才会显示错误消息 检查了这些属性。
与 Apex 的交互直接,通过绑定到自定义控制器间接,通过使用 Apex 方法 通过 APIwebService
性能响应速度更快,因为标记是在 Lightning 平台上生成的响应速度较慢,因为每次调用 API 都需要往返于 服务器 — 调整性能的重担由开发人员承担
页面容器本地在 iFrame 中

如何对 Visualforce 进行版本控制?

从 09 年夏季版本开始,Visualforce 页面和组件 已进行版本控制。当页面或组件具有版本号时,其功能 较旧的 Visualforce 元素不会随着新实现的引入而更改。Visualforce 版本从 15.0 开始。如果您尝试将 Visualforce 页面的版本设置为 15.0 之前的版本,会自动更改为 15.0。

为了帮助向后兼容,每个 Visualforce 页面和自定义 组件与指定版本的 API 的版本设置一起保存,以及 Visualforce 的特定版本。如果 Visualforce 页面或组件引用 已安装的托管包,每个托管包的版本设置 页面或组件也会被保存。这确保了作为 Visualforce、API 和 托管软件包中的组件在后续版本、Visualforce 页面和 组件仍绑定到具有特定已知行为的版本。

自定义组件 在 Visualforce 页面中引用,始终在自己的版本号下执行。因此,如果 自定义组件设置为版本 15.0,它始终表现出 Visualforce 版本的行为 15.0,无论是在版本 15.0 还是 16.0 页面中运行。

发行说明列出了 Visualforce 版本。组件参考还列出了标准组件的 Visualforce 版本 引入,以及组件或属性是否在版本中被弃用。设置 Visualforce 的 Salesforce API 和 Visualforce 版本 页面或自定义组件:

  1. 编辑 Visualforce 页面或组件,然后单击版本设置。注意您只能修改 “版本设置”中页面或自定义组件的版本设置 选项卡,在“设置”中编辑页面或组件时。
  2. 选择 Salesforce API 的版本。这也是 与页面或组件一起使用的 Visualforce 版本。
  3. 点击保存