1. 概述
1.1 版本
FineBI 版本 | HTML5 行動端展現插件 | 功能變動 |
6.0 | V11.0.68 | - |
1.2 功能簡介
設定項 | 應用場景 | 功能簡介 |
底部首頁切換 | 使用者在 HTML5 端存取 FineBI 工程時,希望透過按鈕的方式實現首頁和目錄的切換。 | 使用者可透過「底部首頁切換」按鈕,實現首頁和目錄的切換。 |
H5集成登入 | 使用者在 HTML5 端存取 FineBI 工程/儀表板時,希望實現單點登入。 | 使用者可開啟「H5集成登入」設定,透過填寫自訂的登入認證類和身份識別參數名,即可實現 HTML5 端單點登入。 |
頂部導航欄 | HTML5 端存取FineBI 工程時,不同使用者有不同需求,有些使用者希望使用設備自帶的傳回按鈕,有些使用者希望 FineBI 工程自帶傳回按鈕。 | 使用者可透過「頂部導航欄」,自訂設定 HTML5 端是否顯示傳回導航。 |
使用 JSBridge | 有時 HTML5 端和帆軟 App 端需要通信 | 使用者可開啟「使用 JSBridge」按鈕,使得 HTML5 端和原生 App 通信。 |
設定資源位址 | HTML5 插件資源都放在 FineBI 工程伺服器上,使用者存取 HTML5 端範本請求資源時,速度受報表伺服器寬頻限制。 | 使用者可在平台設定資源位址,那麼存取 HTML5 端範本請求資源時,速度不再受 FineBI 工程伺服器寬頻限制。 |
引入 JS | 使用者有時需要在 HTML5 端實現一些效果,比如改變元素元件和格子的樣式、元件的顯示或隱藏等。 | 使用者可引入外部 JS 檔案和 CSS 檔案,在 HTML5 端實現一些特效或效果。 |
引入 CSS |
2. 插件介紹
2.1 插件安裝
如需在數據決策系統設定相關 HTML5 設定項,必須安裝「HTML5 行動端展現」插件。
插件下載: HTML5行動端展現插件
插件安裝: 插件管理
2.2 介面簡介
插件安裝完成後,管理者登入FineBI系統,點選「管理系統>行動平台>H5設定」,如下圖所示:
3. 底部首頁切換
開啟「底部首頁切換」按鈕,使用者在 HTML5 端存取 FineBI 工程時,可透過按鈕的方式實現首頁和目錄的切換。
3.1 開啟底部首頁切換按鈕
管理者登入FineBI系統,點選「管理系統>行動平台>H5設定」, 開啟「底部首頁切換」按鈕,彈出提示框即設定成功。如下圖所示:
3.2 效果預覽
HTML5 端輸入http://ip:埠號/webroot/decision,存取 FineBI 工程,使用者可透過底部實現首頁與目錄間的切換,效果如下圖所示:
注1:HTML5 端存取 FineBI 工程的步驟可參考 HTML5端存取FineBI 。
注2:如未設定首頁,無法實現首頁與目錄之間的切換。具體步驟請參見 管理首頁 。
4. H5集成登入
開啟「H5集成登入」後,使用者透過 HTML5 端存取 FineBI 工程或單張儀表板,若其中含有身份識別參數名,則自動攔截進行自訂登入驗證。
注:插件更新後,需重啟工程,該功能方生效。
4.1 上傳登入認證類
本文提供透過「帳號」進行後臺單點認證的「自訂登入驗證類」。
點選下載並解壓自訂登入驗證類Demo.class:Demo.zip
將 Demo.class 上傳至 BI 工程%BI_HOME%\webapps\webroot\WEB-INF\classes目錄下。如下圖所示:
4.2 開啟 H5 集成登入
管理者登入FineBI系統,點選「管理系統>行動平台>H5設定」, 開啟「H5整合登入」按鈕,設定「身份識別參數名」和「自訂的登入認證類」。如下圖所示:
具體設定內容和注意事項如下:
設定項 | 簡介 |
身份識別參數名 | 使用者在 HTML5 端存取「BI 工程/儀表板」時,若存取請求中帶有該「身份識別參數名」,則會被攔截進行自訂登入驗證 開啟「H5集成登入」後,「身份識別參數名」不可為空,否則無法儲存 該範例中設定為aaa |
自訂的登入認證類 | 可選項為 BI 工程%FR_HOME%\webapps\webroot\WEB-INF\classes資料夾下所有類 開啟「H5集成登入」後,「自訂的登入認證類」不可為空,否則無法儲存 該範例中設定為Demo.class |
4.3 效果預覽
4.3.1 登入驗證
HTML5 端存取 FineBI 工程/單張儀表板,若存取請求中含有「身份識別參數名」,驗證透過即可免登入存取,驗證不透過則傳回報錯介面。如下圖所示:
驗證邏輯如下表所示:
注:該驗證僅對 HTML5 端存取 FineBI 工程/單張儀表板生效,公共連結、App 端、插件集成、PC 端等不受影響。
場景 | 存取連結 | 結果 | |
不含參數存取 | http://IP:埠號/webroot/decision | 跳出登入頁,正常輸入帳號密碼登入 | |
含參數存取 | 帳號正常 | http://IP:埠號/webroot/decision?aaa=正常的帳號 | 根據認證類驗證使用者,驗證透過,免登入存取 FineBI 工程/單張儀表板 |
帳號禁用 | http://IP:埠號/webroot/decision?aaa=禁用的帳號 | 根據認證類驗證使用者,驗證不透過,跳轉到報錯頁面 | |
帳號不存在 | http://IP:埠號/webroot/decision?aaa=不存在的帳號 | ||
帳號為空 | http://IP:埠號/webroot/decision?aaa= |
4.3.2 登入超時
若根據認證類驗證透過,存取 FineBI 工程/單張儀表板後,觸發登入超時,提示「當前會話已超時,請重新登入」,關閉後將停留在頁面,不跳轉至內建登入頁。如下圖所示:
5. 頂部導航欄
由於在不同設備、不同環境下,不確定終端是否有物理傳回鍵,因此新增「頂部導航欄」按鈕,支援使用者在 HTML5 端開啟「頂部傳回導航」,可自訂設定導航背景、導航標題、傳回按鈕、生效終端等。
5.1 開啟頂部導航欄按鈕
管理者登入FineBI系統,點選「管理系統>行動平台>H5設定」, 開啟「頂部導航欄」按鈕,可設定項如下圖所示:
具體設定內容如下表所示:
設定項 | 簡介 |
導航背景 | 使用者可自訂設定頂部傳回導航欄的背景色 默認藍色 |
標題字型大小 | 使用者可設定導航欄標題字體大小 設定範圍為12~20 號,默認 17 號 注:若標題過長,顯示不下,則結尾顯示... |
標題顏色 | 使用者可自訂設定導航欄標題字體顏色 默認白色 |
字體加粗 | 使用者可自行選擇導航欄標題字體是否加粗 默認加粗 |
對齊方式 | 使用者可自行選擇導航欄標題文字對齊方式 可設定居左、居中、居右,默認居中 |
按鈕顏色 | 使用者可自訂設定導航欄傳回按鈕顏色 默認白色 |
終端設定 | 使用者可自行選擇導航欄生效終端 可選擇iOS、Android,默認全選 |
5.2 效果預覽
HTML5 端輸入http://IP:埠號/webroot/decision,存取 FineBI 工程,「頂部傳回導航欄」效果如下圖所示:
注:HTML5 端存取 FineBI 工程的步驟可參考 HTML5端存取FineBI 。
「傳回按鈕」生效範圍如下表所示:
場景 | 傳回按鈕 |
登入頁 | 無上級頁面,不顯示傳回按鈕 |
首頁 | 無上級頁面,不顯示傳回按鈕 |
首頁超連結 | 無上級頁面,不顯示傳回按鈕 |
單張範本 | 無上級頁面,不顯示傳回按鈕 |
一級目錄 | 無上級頁面,不顯示傳回按鈕 |
二級及以上目錄 | 傳回按鈕生效,傳回上級目錄 |
目錄中的儀表板 | 傳回按鈕生效,傳回目錄 |
儀表板中的超級連結 | 傳回按鈕生效,傳回上級儀表板 |
6. H5快速傳回
開啟「行動平台>其他>H5設定>H5快速傳回」後,無論查看幾層鑽取後的範本,一鍵點選「快速傳回」按鈕即可快速傳回目錄。
詳情請參見:HTML5快速傳回目錄 。
7. 使用 JSBridge
H5 透過 JSBridge 與原生 App 通信,使用者若需要和原生 App 通信,可開啟「使用JSBridge」按鈕,彈出提示即設定成功。如下圖所示:
8. 設定資源位址
目前 H5 插件資源都放在 BI 伺服器上,使用者存取 H5 範本請求資源時,速度受 BI 伺服器寬頻限制,可在平台設定資源位址,加快資源請求速度。
8.1 邏輯說明
例如www.nimengwei.com是使用者的外網存取的伺服器位址,aliyun.cdn.nimengwei.com是使用者的 CDN 位址,
把 CDN 位址在平台中儲存,這樣存取www.nimengwei.com/webroot/decision時,所有JS 、圖片、字體等靜態資源都會從aliyun.cdn.nimengwei.com請求,aliyun.cdn.nimengwei.com中若沒有資源,會從www.nimengwei.com請求資源並傳回,第二次存取之後就會直接用aliyun.cdn.nimengwei.com上次儲存的資源。
注:設定 CDN 之後 CDN 廠商會給出 cname 資訊,使用者需要去域名廠商中配 cname 。
具體介紹如下表所示:
執行邏輯 | 生效的H5資源 |
1)瀏覽器中有快取,使用快取 2)瀏覽器中沒有快取,平台沒有配置 CDN 位址,請求 BI 伺服器資源 3)瀏覽器中沒有快取,平台已配置 CDN 位址,CDN 伺服器沒有資源快取,CDN 從 BI 伺服器請求並傳回 4)瀏覽器中沒有快取,平台已配置 CDN 位址,CDN 伺服器存在資源快取,從 CDN 伺服器獲取 | H5資源、圖片、字體等靜態資源 注:不支援圖表資源 |
8.2 範例
具體使用請參見 設定資源位址 中第三章、第四章內容。