H5設定

1.1 版本

1.2 功能描述

設定項	應用場景	功能簡介
底部首頁切換	使用者在 HTML5 端存取報表系統時，希望透過按鈕的方式實現首頁和目錄的切換。	使用者可透過「底部首頁切換」按鈕，實現首頁和目錄的切換。
H5整合登入	使用者在 HTML5 端存取報表系統/單張範本時，希望實現單點登入。	使用者可開啟「H5整合登入」設定，透過填寫自訂的登入認證類和身分識別參數名，即可實現 HTML5 端單點登入。
頂部導航欄	HTML5 端存取報表工程時，不同使用者有不同需求，有些使用者希望使用裝置自帶的傳回按鈕，有些使用者希望報表系統自帶傳回按鈕。	使用者可透過「頂部導航欄」，自訂設定 HTML5 端是否顯示傳回導航。
H5快速傳回	查看鑽取後的範本，實現一鍵點選後快速傳回目錄	詳情參見：［H5］HTML5快速傳回目錄按鈕
使用 JSBridge	有時 HTML5 端和帆軟 App 端需要通訊	使用者可開啟「使用 JSBridge」按鈕，使得 HTML5 端和原生 App 通訊。
設定資源地址	HTML5 插件資源都放在報表伺服器上，使用者存取 HTML5 端範本請求資源時，速度受報表伺服器寬帶限制。	使用者可在平台設定資源地址，那麼存取 HTML5 端範本請求資源時，速度不再受報表伺服器寬帶限制。
引入 JS	使用者有時需要在 HTML5 端實現一些效果，比如改變元素元件和格子的樣式、元件的顯示或隱藏等。	使用者可引入外部 JS 檔案和 CSS 檔案，在 HTML5 端實現一些特效或效果。
引入 CSS

注：僅「底部首頁切換」、「H5整合登入」支援 FVS 視覺化看板，其餘均不支援 FVS 視覺化看板 。

2.1 插件安裝

如需在數據決策系統設定相關 HTML5 設定項，必須安裝「HTML5 行動端展現」插件。

點選下載插件： HTML5行動端展現插件 

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

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

2.2 介面簡介

插件安裝完成後，以管理者身分登入數據決策系統，點選「管理系統>行動平台>其它」，新增「H5 設定」，如下圖所示：

開啟「底部首頁切換」按鈕，使用者在 HTML5 端存取報表系統時，可透過按鈕的方式實現首頁和目錄的切換。

3.1 開啟底部首頁切換按鈕

以管理者身分進入數據決策系統，點選「管理系統>行動平台>其它」， 開啟「底部首頁切換」按鈕，點選「儲存」。如下圖所示：

3.2 效果預覽

HTML5 端輸入http://IP:埠號/webroot/decision，存取報表系統，使用者可透過底部實現首頁與目錄間的切換，效果如下圖所示：

注1：HTML5 端存取報表系統的步驟可參考 HTML5 端存取報表系統

注2：如未設定首頁，無法實現首頁與目錄之間的切換。具體步驟請參見 管理首頁

當開啟「H5整合登入」後，使用者透過 HTML5 端存取報表工程或單張範本，若其中含有身分識別參數名，則自動攔截進行自訂登入驗證。

注：插件更新後，需重啟設計器，該功能方生效。

4.1 上傳登入認證類

本文提供透過「帳號」進行後台單點認證的「自訂登入驗證類」。

點選下載並解壓自訂登入驗證類Demo.class：Demo.rar

將Demo.class上傳至報表工程%FR_HOME%\webapps\webroot\WEB-INF\classes目錄下，如下圖所示：

4.2 開啟 H5 整合登入

以管理者身分進入數據決策系統，點選「管理系統>行動平台>其它」， 開啟「H5整合登入」按鈕，設定「身分識別參數名」和「自訂的登入認證類」。如下圖所示：

具體設定內容和注意事項如下：

4.3 效果預覽

4.3.1 登入驗證

HTML5 端存取報表工程/範本，若存取請求中含有「身分識別參數名」，驗證透過即可免登入存取，驗證不透過則傳回報錯介面，如下圖所示：

驗證邏輯如下表所示：

注：該驗證僅對 HTML5 端存取決策報表系統/單張範本生效，App 端、微信整合、釘釘整合、PC 端等不受影響。

4.3.2 登入逾時

若根據認證類驗證透過，存取範本後，觸發登入逾時，提示「當前對話已逾時，請重新登入」，關閉後將停留在頁面，不跳轉至內建登入頁。如下圖所示：

由於在不同裝置、不同環境下，不確定終端是否有物理傳回鍵，因此新增「頂部導航欄」按鈕，支援使用者在 HTML5 端開啟「頂部傳回導航」，可自訂設定導航背景、導航標題、傳回按鈕、生效終端等。

5.1 開啟頂部導航欄按鈕

以管理者身分進入數據決策系統，點選「管理系統>行動平台>其它」， 開啟「頂部導航欄」按鈕，可設定項如下圖所示：

具體設定內容如下表所示：

5.2 效果預覽

HTML5 端輸入http://IP:埠號/webroot/decision，存取報表系統，「頂部傳回導航欄」效果如下圖所示：

注：HTML5 端存取報表系統的步驟可參考 HTML5 端存取報表系統 。

「傳回按鈕」生效範圍如下表所示：

HTML5 查看多級鑽取範本後，只能透過點選多次傳回主目錄，操作較為繁瑣。

透過「 HTML5 快速傳回目錄按鈕」，無論查看幾層鑽取後的範本，一鍵點選後快速傳回目錄。

管理者進入「管理系統>行動平台>其他」中，開啟按鈕「H5快速傳回」，並「儲存」即可生效。詳情參見：［H5］HTML5快速傳回目錄按鈕

H5 透過 JSBridge 與原生 App 通訊。

管理者登入數據決策系統，點選「管理系統>行動平台>H5設定」，勾選「使用 JSBridge」，如下圖所示：

設定資源地址具體介紹請參見：設定資源地址

「HTML5 行動端展現插件」版本為 V10.4.49 時，支援「引入JS」和「引入CSS」功能。

HTML5 端支援引入外部的 JS 和 CSS 檔案。本章以引入外部的 JS 檔案為例，說明該功能的用法。

注1：引入 CSS 檔案和引入 JS 檔案操作步驟相同。

注2：該功能僅支援在 HTML5 端使用，不支援 App 端。

9.1 引入 JS 檔案

1）將 test.js 檔案放到報表工程目錄%FR_HOME%\webapps\webroot下，如下圖所示：

2）在「引入 JS 」右側正文框中輸入 test.js ，點選「儲存」，如下圖所示：

9.2 範本準備

1）在 FineReport 設計器中，建立普通報表。

2）在 A1 儲存格中輸入test，選中「A1儲存格」，點選「超級連結>新增連結>JavaScript 腳本」，輸入 JavaScript 程式碼，如下圖所示：

JavaScript 程式碼如下：

warn();

9.3 效果預覽

儲存範本，點選行動端預覽，HTML5 預覽效果如下圖所示：

注：HTML5 端預覽範本方法請參見：HTML5 端預覽