1. 概述
適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FVS 範本的相關功能。
1.1 應用場景
在 FVS 範本上展示元件聯動效果時，該聯動效果是透過使用者的選擇來實現的，使用者如果希望在選擇一個元件的值之後，其餘的元件可以自動顯示對應的資料部分，這個該如何實現呢？同時，使用者希望在第一次開啟範本時，後續聯動的元件不顯示，效果如下圖所示：
1.2 實現思路
聯動元件的預設值用 SQL 語句實現對應資料的展示。當第一次開啟範本時，標籤不顯示可以透過隱藏組件實現。
2. 範例
2.1 建立範本
1）在 FineReport 設計器左上角點選「檔案>建立視覺化看板」。
2）在「建立空白看板」Tab 中，可自訂範本名稱和尺寸，選擇 FVS範本樣式 為「內建樣式>深色主題一」。
3）點選「建立看板」。
2.2 準備資料
建立資料集 ds1 ，SQL語句為SELECT * FROM 訂單 where 客戶ID ='${ID}'。
2.3 新增選擇元件
1）點選組件區「元件>下拉框」向畫布中新增下拉框元件，並調整到適當的位置，設定「下拉框元件」的綁定參數為 ID 。
選項值來源設定為資料庫表，選擇資料庫 FRDemoTW 的「客戶」表，實際值為「客戶ID」，顯示值為「公司名稱」。如下圖所示：
2）點選組件區「文字>標題」向畫布中新增標題組件，調整到適當的位置，標題內容設定為 客戶名稱 。如下圖所示：
3）點選「元件>查詢按鈕」向畫布中新增查詢按鈕，調整到適當的位置。如下圖所示：
2.4 新增聯動元件
1）點選組件區「元件>正文框」向畫布中新增四個正文框元件，並調整組件位置。預設值設定為交握人姓名：、交握人職務：、公司地址：、電話號碼：。
以 交握人職務 正文框元件為例，如下圖所示：
2）點選組件區「元件>正文框」，在 交握人姓名 正文框元件後重新整理增一個正文框元件，為了美觀，在右側「組件>組件樣式」中將邊框背景和邊框線設定為 無 。
預設值選擇公式，公式為：sql("FRDemoTW", "select 交握人姓名 from 客戶 where 客戶ID='" + $id +"'", 1, 1)
上述 sql 意為在 FRDemo 連結中執行 sql 語句，顯示第一欄第一行的查詢結果，根據要求不同，此處亦可去除最後一個 1 ，顯示查詢到的一欄，參數面板中表現為以逗號分隔的行形式，如下圖所示：
同理，分別在交握人職務、地址、電話號碼等元件後增加正文元件，設定組件樣式，預設值為公式，對應的公式分別如下：
sql("FRDemoTW","select 交握人職務 from 客戶 where 客戶ID='" + $id + "'",1,1)
sql("FRDemoTW","select 城市||地址 from 客戶 where 客戶ID='"+$id+"'",1,1)
sql("FRDemoTW","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
