1. 概述
1.1 版本
報表伺服器 | HTML5 行動端展現插件 |
---|---|
11.0 | V11.0 |
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 |
2. 插件簡介
2.1 插件安裝
如需在數據決策系統設定相關 HTML5 設定項,必須安裝「HTML5 行動端展現」插件。
點選下載插件: HTML5行動端展現插件
設計器插件安裝方法參照 設計器插件管理
伺服器安裝插件方法參照 伺服器插件管理
2.2 介面簡介
插件安裝完成後,以管理者身分登入數據決策系統,點選「管理系統>行動平台>其它」,新增「H5 設定」,如下圖所示:
3. 底部首頁切換
開啟「底部首頁切換」按鈕,使用者在 HTML5 端存取報表系統時,可透過按鈕的方式實現首頁和目錄的切換。
3.1 開啟底部首頁切換按鈕
以管理者身分進入數據決策系統,點選「管理系統>行動平台>其它」, 開啟「底部首頁切換」按鈕,點選「儲存」。如下圖所示:
3.2 效果預覽
HTML5 端輸入http://IP:埠號/webroot/decision,存取報表系統,使用者可透過底部實現首頁與目錄間的切換,效果如下圖所示:
注1:HTML5 端存取報表系統的步驟可參考 HTML5 端存取報表系統
注2:如未設定首頁,無法實現首頁與目錄之間的切換。具體步驟請參見 管理首頁
4. H5整合登入
當開啟「H5整合登入」後,使用者透過 HTML5 端存取報表工程或單張範本,若其中含有身分識別參數名,則自動攔截進行自訂登入驗證。
注:插件更新後,需重啟設計器,該功能方生效。
4.1 上傳登入認證類
本文提供透過「帳號」進行後台單點認證的「自訂登入驗證類」。
點選下載並解壓自訂登入驗證類Demo.class:Demo.rar
將Demo.class上傳至報表工程%FR_HOME%\webapps\webroot\WEB-INF\classes目錄下,如下圖所示:
4.2 開啟 H5 整合登入
以管理者身分進入數據決策系統,點選「管理系統>行動平台>其它」, 開啟「H5整合登入」按鈕,設定「身分識別參數名」和「自訂的登入認證類」。如下圖所示:
具體設定內容和注意事項如下:
設定項 | 簡介 |
---|---|
身分識別參數名 | 使用者在 HTML5 端存取「報表工程/範本」時,若存取請求中帶有該「身分識別參數名」,則會被攔截進行自訂登入驗證 開啟「H5整合登入」後,「身分識別參數名」不可為空,否則無法儲存 該範例中設定為aaa |
自訂的登入認證類 | 可選項為報表工程%FR_HOME%\webapps\webroot\WEB-INF\classes資料夾下所有類 開啟「H5整合登入」後,「自訂的登入認證類」不可為空,否則無法儲存 該範例中設定為Demo.class |
4.3 效果預覽
4.3.1 登入驗證
HTML5 端存取報表工程/範本,若存取請求中含有「身分識別參數名」,驗證透過即可免登入存取,驗證不透過則傳回報錯介面,如下圖所示:
驗證邏輯如下表所示:
注:該驗證僅對 HTML5 端存取決策報表系統/單張範本生效,App 端、微信整合、釘釘整合、PC 端等不受影響。
場景 | 存取連結 | 結果 | |
---|---|---|---|
不含參數存取 | http://IP:埠號/webroot/decision | 跳出登入頁,正常輸入帳號密碼登入 | |
含參數存取 | 帳號正常 | http://IP:埠號/webroot/decision?aaa=正常的報表帳號 | 根據認證類驗證使用者,驗證透過,免登入存取系統/範本 |
帳號禁用 | http://IP:埠號/webroot/decision?aaa=禁用的報表帳號 | 根據認證類驗證使用者,驗證不透過,跳轉報錯頁面 | |
帳號不存在 | http://IP:埠號/webroot/decision?aaa=不存在的報表帳號 | ||
帳號為空 | http://IP:埠號/webroot/decision?aaa= |
4.3.2 登入逾時
若根據認證類驗證透過,存取範本後,觸發登入逾時,提示「當前對話已逾時,請重新登入」,關閉後將停留在頁面,不跳轉至內建登入頁。如下圖所示:
5. 頂部導航欄
由於在不同裝置、不同環境下,不確定終端是否有物理傳回鍵,因此新增「頂部導航欄」按鈕,支援使用者在 HTML5 端開啟「頂部傳回導航」,可自訂設定導航背景、導航標題、傳回按鈕、生效終端等。
5.1 開啟頂部導航欄按鈕
以管理者身分進入數據決策系統,點選「管理系統>行動平台>其它」, 開啟「頂部導航欄」按鈕,可設定項如下圖所示:
具體設定內容如下表所示:
設定項 | 簡介 |
---|---|
導航背景 | 使用者可自訂設定頂部傳回導航欄的背景色 預設藍色 |
標題字號 | 使用者可設定導航欄標題字體大小 設定範圍為12~20號,預設17號 注:若標題過長,顯示不下,則結尾顯示... |
標題顏色 | 使用者可自訂設定導航欄標題字體顏色 預設白色 |
字體粗體 | 使用者可自行選擇導航欄標題字體是否粗體 預設粗體 |
對齊方式 | 使用者可自行選擇導航欄標題文字對齊方式 可設定靠左、置中、靠右,預設定中 |
按鈕顏色 | 使用者可自訂設定導航欄傳回按鈕顏色 預設白色 |
終端設定 | 使用者可自行選擇導航欄生效終端 可選擇iOS、Android,預設全選 |
5.2 效果預覽
HTML5 端輸入http://IP:埠號/webroot/decision,存取報表系統,「頂部傳回導航欄」效果如下圖所示:
注:HTML5 端存取報表系統的步驟可參考 HTML5 端存取報表系統 。
「傳回按鈕」生效範圍如下表所示:
場景 | 傳回按鈕 |
---|---|
登入頁 | 無上級頁面,不顯示傳回按鈕 |
首頁 | 無上級頁面,不顯示傳回按鈕 |
首頁超連結 | 無上級頁面,不顯示傳回按鈕 |
單張範本 | 無上級頁面,不顯示傳回按鈕 |
一級目錄 | 無上級頁面,不顯示傳回按鈕 |
二級及以上目錄 | 傳回按鈕生效,傳回上級目錄 |
目錄中的範本 | 傳回按鈕生效,傳回目錄 |
範本中的超級連結 | 傳回按鈕生效,傳回上級範本 |
6. H5快速傳回
HTML5 查看多級鑽取範本後,只能透過點選多次傳回主目錄,操作較為繁瑣。
透過「 HTML5 快速傳回目錄按鈕」,無論查看幾層鑽取後的範本,一鍵點選後快速傳回目錄。
管理者進入「管理系統>行動平台>其他」中,開啟按鈕「H5快速傳回」,並「儲存」即可生效。詳情參見:[H5]HTML5快速傳回目錄按鈕
7. 使用 JSBridge
H5 透過 JSBridge 與原生 App 通訊。
管理者登入數據決策系統,點選「管理系統>行動平台>H5設定」,勾選「使用 JSBridge」,如下圖所示:
8. 設定資源地址
設定資源地址具體介紹請參見:設定資源地址
9. 引入 JS 和 CSS 檔案
「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 端預覽