參數面板位置調整

1.1 版本

1.2 功能簡介

在製作含有參數的報表時，往往由於實際需要篩選的欄位過多，在參數面板中一行顯示不下，而且參數面板像下圖一樣以細長的一行展示出來給報表使用者帶來的視覺效果也很差，在只需限制某幾個篩選條件時也不便快速找出所需的參數。

於是我們往往會將一行參數拆成多行展示，這樣能顯示全所有的參數，並且有效參數面板區域稍變短、變高了些，視覺效果得到改善，也便於找到所需參數。

可實現這樣的效果帶來的是資料展示區的長寬比進一步擴展：長度不變，高度減小，不僅損失了頁面上可展示資料的條數，還形成了一大片浪費的區域。國畫才講究“留白”，需要給看畫者以感性的遐想空間，但是報表追求效率，需要在有限的空間裏展示更多的資訊。但現在參數面板和資料展示區共同分割整個頁面的高度，所以要兼顧兩者的視覺效果似乎對立了起來。

換個角度，讓兩者共享同樣的高度而分割長度是不是可以解決這個矛盾？有了參數面板位置調整插件，上面的想法便可實現。

2.1 插件安裝

點選下載插件：參數面板位置調整

設計器插件安裝方法參照 設計器插件管理

伺服器安裝插件方法參照 伺服器插件管理

注1：對於不安裝插件的同類處理辦法，可參考社群技術文檔：JS實現網頁框進階過濾篩選

注2：該插件安裝後，會造成官方APIshowCardByIndex失效。

注3：在谷歌瀏覽器使用工具欄修改面板位置後，需要清除瀏覽器的jsessionid，否則下次預覽時將沿用工具欄修改的位置而非預設位置。

注4：不支援行動端。

2.2 操作方法

2.2.1 設定「參數面板屬性」

安裝「參數面板位置調整」插件。

開啟需要調整參數面板位置的 cpt 檔案，點選“範本”——“參數面板屬性”，在彈出的頁面中勾選“參數面板插件功能啟動”，在預設中選擇需要預設展示的位置（這裏我們選“靠左”），位置自訂選項是在預覽時即時可調整的位置，可以都勾上，點選確定。

2.2.2 預設效果預覽

點選預覽，參數面板就在整個顯示頁面的左邊。

2.2.3 前端即時調整設定

若想在預覽時能夠即時調整參數面板位置，還需在“範本”——“範本 Web 屬性”中，將“分頁預覽設定/填報預覽設定/資料分析設定“（三者均可，選擇對應的預覽方式）的“以下設定”：”修改為“為該範本單獨設定”，選中“面板自訂位置”，點選向上的箭頭，新增至工具欄。

2.2.4 前端即時調整預覽

此時再用調整的方式預覽，可看見頁面的工具欄上多了參數面板自訂位置的圖示，點選選擇想要展示的位置即可調整。

注1：在谷歌瀏覽器使用工具欄修改面板位置後，需要清除瀏覽器的jsessionid，否則下次預覽時將沿用工具欄修改的位置而非預設位置

注2：參數面板靠左、靠右佈局，為橫向翻轉產生，不支援縱向捲軸顯示功能。

2.2.5 決策報表設定

在參數面板區域para項，新增加“初始化後”事件，JavaScript腳本內容如下：

var ppa = FR.BasePane.ParamPaneAdjust11();ppa.adjustFrm('right');

函式 adjustFrm() 傳入值 [top, bottom, left, right]，分別對應上下左右四個位置。範例如圖：

可以明顯看出，設定參數面板靠左/靠右後，這種參數較多的情況下，頁面整體的佈局要合理很多。

鑑於現代人閱讀時從上到下、從左到右的順序，可以在必選參數的範本中將參數面板預設為靠左/居上，而需查看整體資料、不常用參數篩選時可將參數面板預設為靠右、居下。

參數面板靠左、靠右佈局，為橫向翻轉產生，不支援縱向捲軸顯示功能。