[通用]行動端彈窗

1.1 版本

1.2 應用場景

• 在使用 Finereport 製作報表程式中，對於內容較少的超連結子範本，使用者希望可以直接在當前頁彈窗中查看，看完後關閉彈窗繼續查看主範本 。
  

• 對於範本的部分內容，需要在當前頁彈窗中進行註釋提示，如指標的定義及計算方法、圖表的含義註釋等 。

1.3 實現思路

FineReport 支援在範本中設定「行動端彈窗」事件，實現在當前頁彈窗展示超連結子範本、正文註釋、彈窗填報等 。

例如，使用者可以在查看員工資訊表時，點選「點我填報」，可在彈窗中填報員工資訊登記表，如下圖所示：

注：行動端彈窗可在普通報表和決策報表中使用，彈窗效果在 APP 和 HTML5 端都支援。

1.4 功能入口

使用者可在「超級連結」和「事件」中設定「行動端彈窗」，如下圖所示：

2.1 功能入口

使用者可在以下「超級連結」和「事件」中設定「行動端彈窗」。

注1：普通報表、決策報表中的「圖表」不支援設定行動端彈窗。

注2：FVS 的表格組件同樣具有「行動端彈窗」功能，其餘組件若想實現行動端彈窗的效果，請參見文檔：FVS跳轉網頁連結/彈出框事件 。

注：圖表暫不支援行動端彈窗。

1）以「儲存格>超級連結」為例

• 被選儲存格，點選右側屬性面板中的「超級連結」按鈕

• 點選「新增連結」旁的「+」按鈕，即可選擇「行動端彈窗」，如下圖所示：

2）以「儲存格元件>事件」為例

• 選中某個儲存格，點選右側屬性面板中的「元件設定」按鈕，選擇某個元件，例如選擇「正文元件」

• 點選「事件」，點選「+」，選擇某個事件，例如選擇「初始化後」

• 在彈出的設定框中選擇「行動端彈窗」，如下圖所示：

2.2 形式為「範本」

「形式」選擇「範本」時，行動端彈窗設定介面如下圖所示：

「形式」選擇「範本」時，各屬性項說明如下表所示：

2.3 形式為「正文」

「形式」選擇「正文」時，行動端彈窗設定介面如下圖所示：

「形式」選擇「正文」時，各屬性項說明如下表所示：

本節範例為在普通報表中設定範本行動端彈窗，且範本為填報類型。

注：決策報表中設定填報類型行動端彈窗，可參見文檔 行動端彈窗在決策報表填報中的應用 。

3.1 準備範本

1）點選下載準備範本：普通報表設定範本行動端彈窗.zip

2）將解壓後的範本儲存至%FR_HOME%\webapps\webroot\WEB-INF\reportlets資料夾。

3.2 設定行動端彈窗

1）在 Finereport 設計器中開啟員工資訊表（準備）.cpt 範本，選中 A4 儲存格。

2）點選右側屬性面板的「超級連結」按鈕，點選「新增連結」旁的「+」按鈕，選擇「行動端彈窗」。如下圖所示：

3）在彈出的設定框中形式選擇「範本」，點選「選擇」，選擇員工資訊登記表.cpt範本

4）點選參數面板右上角的「+」按鈕，設定參數名為「op」，值選擇「字串」，輸入「write」，如下圖所示：

注：行動端彈窗設定填報類型 cpt 範本時，需要在連結末尾新增填報參數後綴 &op=write 或新增範本參數 op=write 。

5）設定行動端彈窗邊框、背景、彈窗大小，如下圖所示：

3.3 效果預覽

App 及 HTML5 端效果預覽如下圖所示：

4.1 準備範本

在 Finereport 設計器中開啟%FR_HOME%\webapps\webroot\WEB-INF\reportlets\GettingStartedTW.cpt範本。

4.2 設定行動端彈窗

1）選中 A4 儲存格，點選右側屬性面板中的「超級連結」。

2）點選 新增連結 旁的「+」按鈕，選擇「行動端彈窗」，如下圖所示：

3）選擇「正文」，點選公式按鈕，輸入公式：$地區+"各銷售員銷售明細"。

4）手機端規則勾選「高度自適應」，如下圖所示：

4.3 效果預覽

App 及 HTML5 端效果預覽如下圖所示：

範例一：點選下載已完成範本：普通報表設定範本行動端彈窗.zip

範例二：點選下載已完成範本：普通報表設定正文行動端彈窗.cpt

6.1 網路請求失敗

問題描述：

當行動端彈窗內傳遞範本參數較多或部分參數值太長時，出現報錯：網路請求失敗

解決方案 ：

在範本地址尾部連結參數&_method=POST，轉為 POST 傳參即可，如下圖所示：

注：參數中 POST 需全部大寫，且只有在末尾連結參數才會正常生效。