H5設定

1.1 版本

1.2 功能描述

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 端預覽