1. 概述
适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FVS 模板的相关功能。
1.1 应用场景
在 FVS 模板上展示控件联动效果时，该联动效果是通过用户的选择来实现的，用户如果希望在选择一个控件的值之后，其余的控件可以自动显示对应的数据部分，这个该如何实现呢？同时，用户希望在第一次打开模板时，后续联动的控件不显示，效果如下图所示：
1.2 实现思路
联动控件的默认值用 SQL 语句实现对应数据的展示。当第一次打开模板时，标签不显示可以通过隐藏组件实现。
2. 示例
2.1 新建模板
1）在 FineReport 设计器左上角点击「文件>新建可视化看板」。
2）在「创建空白看板」Tab 中，可自定义模板名称和尺寸，选择 模板样式 为「内置样式>深色主题一」。
3）点击「创建看板」。
2.2 准备数据
新建数据集 ds1 ，SQL语句为SELECT * FROM 订单 where 客户ID ='${ID}'。
2.3 添加选择控件
1）点击组件区「控件>下拉框」向画布中添加下拉框控件，并调整到适当的位置，设置「下拉框控件」的绑定参数为 ID 。
选项值来源设置为数据库表，选择数据库 FRDemo 的「客户」表，实际值为「客户ID」，显示值为「公司名称」。如下图所示：
2）点击组件区「文字>标题」向画布中添加标题组件，调整到适当的位置，标题内容设置为 客户名称 。如下图所示：
3）点击「控件>查询按钮」向画布中添加查询按钮，调整到适当的位置。如下图所示：
2.4 添加联动控件
1）点击组件区「控件>文本框」向画布中添加四个文本框控件，并调整组件位置。默认值设置为 联系人姓名：、联系人职务：、公司地址：、电话号码：。
以 联系人姓名 文本框控件为例，如下图所示：
2）点击组件区「控件>文本框」，在 联系人姓名 文本框控件后再添加一个文本框控件，为了美观，在右侧「组件>组件样式」中将边框背景和边框线设置为 无 。
默认值选择 公式 ，公式为：sql("FRDemo", "select 联系人姓名 from 客户 where 客户ID='" + $id +"'", 1, 1)
上述 sql 意为在 FRDemo 连接中执行 sql 语句，显示第一列第一行的查询结果，根据要求不同，此处亦可去除最后一个 1 ，显示查询到的一列，参数面板中表现为以逗号分隔的行形式，如下图所示：
同理，分别在联系人职务、地址、电话号码等控件后增加文本控件，设置组件样式，默认值为 公式 ，对应的公式分别如下：
sql("FRDemo","select 联系人职务 from 客户 where 客户ID='" + $id + "'",1,1)
sql("FRDemo","select 城市||地址 from 客户 where 客户ID='"+$id+"'",1,1)
sql("FRDemo","select 电话 from 客户 where 客户ID='"+$id+"'",1,1)
2.5 添加表格组件
1）添加一个表格组件，点击「编辑组件」进入表格编辑界面。如下图所示：
2）将数据集中的字段拖入单元格，设置对应标题。表格样式如下图所示：
3）双击 A2 单元格处设置模板参数的过滤，可选列为客户 ID，操作符为等于，参数为$id , 如下图所示：
2.6 控件设置不可见
1）同时选中联动控件中相对应的文本框控件，点击画布上方「组合」按钮，选择组合即可将这些组件合并成组，组合名称分别设置为姓名、职务、地址、电话。
以 联系人姓名 控件和其对应的文本框控件为例，如下图所示：
2）将这些组合设置为不可见，即初始化时隐藏。如下图所示：
3）在编辑下拉框之后，联动控件又需要显示出来，可以在下拉框控件处添加一个编辑结束事件，如下图所示：
JS 代码如下：
var a=duchamp.getWidgetByName("姓名");
a.setVisible(true);
var b=duchamp.getWidgetByName("职务");
b.setVisible(true);
var c=duchamp.getWidgetByName("地址");
c.setVisible(true);
var d=duchamp.getWidgetByName("电话");
d.setVisible(true);
//当下拉框选择“不选”的时候，联动控件全部隐藏
var value = duchamp.getWidgetByName("ID").getValue();
if (value == "") {
a.setVisible(false);
b.setVisible(false);
c.setVisible(false);
d.setVisible(false);
}2.7 效果预览
2.7.1 PC 端
保存模板，点击「预览」，PC 端效果如本文 1.1 节所示。
2.7.2 移动端
移动端请自行组合组件并开启 移动端布局 ，预览方式请参考 FVS移动端预览 ，效果如下图所示：
3. 模板下载
点击下载模板：FVS实现控件动态展示对应数据.fvs
