Salesforce学习之路-developer篇（四）Visualforce结合Reports展示图表

Salesforce作为一款CRM系统，个人觉得最重要的环境便是在于数据的展示和联动，而Salesforce也本身提供了相当强大的功能，Report在展示图表的方面十分强大，前段时间更是宣布以157亿美元收购tableau之后更是如虎添翼。虽然，其本身标准组件很强大，但是在实际项目上依旧捉襟见肘。

话不多说，这里提一提本人在展示图表的心历路程。

1. 什么是报告？

以最简单的形式，报告是满足您定义的条件的记录（如机会或帐户）的列表。但是报告不仅仅是简单的列表。要获取所需的数据，可以对记录进行过滤，分组和数学运算。您甚至可以在图表中以图形方式显示它们！

每个报告都存储在一个文件夹中。报告文件夹确定如何访问报告，以及谁可以访问它们以查看，编辑或管理。文件夹可以是公共的，隐藏的或共享的。您可以根据角色，权限，公共组，区域和许可证类型来控制谁有权访问文件夹的内容。您可以将文件夹提供给整个组织使用，也可以将其设置为私有，以便只有所有者才能访问。

2. 创建新的报告

创建Reprot Tyep

Report Type就像一个模版，确定创建Reports时可以使用哪些字段和记录。

点击Setup--> Report Types
点击New Custom Report Type

Salesforce学习之路-developer篇（四）Visualforce结合Reports展示图表-LMLPHP 　

- Primary Object: 这里指Report数据的对象，这里选择的是Account。注意，这里不能选utilization对象，因为utilization被Account关联，所以主对象是Account。如果分不清，可以查看记录的Related。例如：对象A记录的Realted列表中含有对象B，那么对象A便为Primary object。
- Store in Category: 是指该Report Type存放的目录，在创建新Report时会用到。
- 点击Next，创建自定义数据集合。

　　 Salesforce学习之路-developer篇（四）Visualforce结合Reports展示图表-LMLPHP

- Each "A" record must have at least one related "B" record: 对象A的记录必须有对象B的关联信息，即选择对象A的Related列表中对象B不为空的记录。
- "A" records may or may not have related "B" records: 选择对象A的所有数据，无论对象A的Related列表中是否包含对象B。

添加过滤条件

过滤类型：

过滤逻辑：

例如，某表格设置了三个过滤条件，其序号分别为1，2，3，设置过滤逻辑为：1 AND (2 OR 3) ==> 表格中只展示满足条件1和（条件2或者条件3的某一个）的记录。

创建Reprot

点击九宫格（App Launcher)，在All Items下找到Reports并点击
点击New Report
选择Report Type

Salesforce学习之路-developer篇（四）Visualforce结合Reports展示图表-LMLPHP

这里选择上面创建的Account & utilization数据集，然后点击Continue，进入Report的创建界面

Salesforce学习之路-developer篇（四）Visualforce结合Reports展示图表-LMLPHP 　　

- Columns: 点击左侧的Fields，可以看到所有可选择的字段，但是在我们的实际需求中，可能Report中只需要展示部分字段，那么将需要展示的字段添加到Columns字段下，添加的方法很简单，1)在左侧选中字段后拖拽到Columns下面；2）在Columns的搜寻框中搜寻相应字段，并选择。
- Groups: 如果需要针对某个字段进行分组，例如创建直方图时需要选择横坐标进行分组，可将对应字段拖拽至Group Rows下，或者在Group Rows的搜寻框中添加。
添加过滤条件

　 Salesforce学习之路-developer篇（四）Visualforce结合Reports展示图表-LMLPHP 　

　　如上面所说，Filters下面为表格的过滤条件，这里设置了5个过滤条件。

- Show Me和Create Date为标准过滤，分别设置为：All accounts 和All Time
- 条件1，条件2，条件3为自定义过滤，并为自定义条件加上过滤逻辑（默认为所有条件AND)

添加表格

　　点击Add Chart按钮，为Report添加表格

　　 Salesforce学习之路-developer篇（四）Visualforce结合Reports展示图表-LMLPHP

右边选择Chart展示的类型，Salesforce自带有8中类型：Bar, Column, Stacked Bar, Stacked Column, Line, Donut, Funnel, Scatter plot，可根据需求自行设置不同格式图标。
X-Axis: 横坐标，对应Outline中Groups下的字段。
Y-Axis: 纵坐标，对应Columns下的number或Currency类型的字段（可计数字段，并且在字段前会加上#符号）。
Plot on Second Axis: 第二坐标。

Salesforce学习之路-developer篇（四）Visualforce结合Reports展示图表-LMLPHP

3. 创建Visualforce Page

Visualforce详细内容：https://www.cnblogs.com/cloudman-open/p/11635346.html

Markup-视图

<apex:page showHeader="false" controller="MeetingUsagePageController">
    <apex:outputPanel >
      <div style="display:inline-block;width:100%;height:50%;overflow:hidden;padding-left:20%">
        <analytics:reportChart reportId="00OK0000000mQaBMAU" rendered="true"  showRefreshButton="true" size="huge" id="host_chart" cacheResults="true" filter="[
            {column:'Web_Account__c.Id', operator:'equals',value:'{!webAccountId}' },
            {column:'Site_Audio__c.Month__c', operator:'equals',value:'{!displayMonth}'},
            {column:'Site_Audio__c.Site_Name__c', operator:'equals',value:'{!displaySite}'}]">
        </analytics:reportChart>
      </div>
    </apex:outputPanel>
</apex:page>

Controller：绑定的类名称。
analytics:reportChart：该组件可将Salesforce报告图表添加到Visualforce页面。该组件在API版本29.0或更高版本中可用。
- reportId：Report的ID，找到对应表格并打开，浏览器中URL为https://***.force.com/lightning/r/Report/00OK0000000mQaBMAU/view， Report后面的便是reportId。
- showRefreshButton: 是否展示刷新按钮，true表展示刷新按钮，false表不展示刷新按钮。
- Size：表格展示的尺寸，分为：tiny, small, medium, large, huge。
- cacheResults：显示图表时是否使用缓存的数据。当该属性设置为true时，数据将缓存24小时，但是您可以使用cacheAge属性修改时间长度。如果该属性设置为false，则每次刷新页面时都会运行报告。
- filter：除报表中已有的字段过滤器外，还按字段过滤报表图表以获取特定数据。请注意，一个报告最多可以包含20个字段过滤器。过滤器具有以下JSON字符串形式的属性：
  - 列：您要过滤的字段的API名称。
  - 运算符：您要用来过滤字段的条件的API名称。例如，要按“不等于”进行过滤，请使用API名称“ notEqual”。
  - 值：过滤条件。

Controller-控制类

public with sharing class MeetingUsagePageController {
    Id accountId = ApexPages.CurrentPage().getparameters().get('id');
    Web_Account__c account = [select Display_Months__c, Display_Site__c
                              from Web_Account__c
                              where Id = :accountId limit 1];

    public String webAccountId {
        get {
            if(webAccountId == null) {
                webAccountId = accountId;
            }
            return webAccountId;
        }set;
    }

    // filter chart with display month
    public String displayMonth {
        get {
            if(displayMonth == null) {
                displayMonth = account.Display_Months__c;
            }
            return displayMonth;
        }set;
    }

    // filter data with site name
    public String displaySite {
        get {
            if(displaySite == null) {
                displaySite = account.Display_Site__c;
            }
            return displaySite;
        }set;
    }
}

结果如下

Salesforce学习之路-developer篇（四）Visualforce结合Reports展示图表-LMLPHP

View Report：点击直接跳转至对应的Report页面。

Refresh: 点击右下角的刷新按钮会刷新Visualforce Page中的图表。

吴家二少