1. 概述
1.1 版本
報表伺服器版本 | 插件版本 | App | HTML5 行動端展現插件 |
---|---|---|---|
11.0 | V8.16 | 10.4.90 | 10.4.90 |
1.2 問題描述
決策報表中,沒有提供網頁框元件。這使得在嵌入引用其他網頁或者報表的時候,很不方便。
1.3 解決方案
為了解決在決策報表中引用其他 Web 連結的問題,使用者可以使用「網頁框元件插件」。
注:網頁框元件插件不支援流媒體。
注:網頁框內容不支援匯出。
2. 插件介紹
2.1 安裝插件
點選下載插件: 網頁框元件插件
設計器插件安裝方法請參見:設計器插件管理
伺服器安裝插件方法請參見:伺服器插件管理
2.2 新增網頁框元件
插件安裝完畢後,建立決策報表,點選「元件欄」,新增了「網頁框元件」,拖動到決策報表 body 介面,即可新增。如下圖所示:
2.3 位址和參數
選中「網頁框元件」,可以設定「位址和參數」,步驟如下圖所示:
2.3.1 位址
支援新增兩種型別的連結。
1)範本路徑
注:不支援範本路徑和名稱裏面存在 & 符號。
「範本路徑」為相對路徑,點選「···」,出現範本選擇,選中需要的範本即可,如下圖所示:
2)網路路徑
「網路路徑」為絕對路徑。「網路路徑」的應用場景及方法如下表所示:
注:網路路徑公式狀態下,直接輸入連結即可,連結前不能有「=」。
應用場景 | 備註 |
---|---|
預覽範本 | 輸入範本預覽連結 http://IP:埠號/工程名,如下所示:http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt |
預覽視頻 | 方法一: 輸入完整視頻網頁 URL ,如下所示: https://www.iqiyi.com/v_19rxqx1kww.html?vfrm=pcw_home&vfrmblk=B&vfrmrst=fcs_0_p11 方法二: 將下載後的視頻儲存在%FR_HOME%\webapps\webroot,輸入連結http://IP:埠號/工程名/視頻名稱,如下所示: http://localhost:8075/webroot/6.gif |
預覽自訂 HTML 頁面 | 將自訂的 HTML 頁面儲存在%FR_HOME%\webapps\webroot,輸入連結http://IP:埠號/工程名/HTML頁面名稱,如下所示:http://localhost:8075/webroot/1.html |
2.3.2 參數
範例:
1)「網路路徑」下若新增了參數及預設值,連結使用 範本預覽 連結,範例連結為:http://localhost:8075/webroot/decision/view/report?viewlet=doc%252Fphone%252F%25E5%258A%25A8%25E6%2580%2581%25E5%2588%2586%25E7%25BB%2584.cpt如下圖所示:
效果如下圖所示:
2)若參數連接在範本連結 URL 尾部,「網路路徑」範例連結為:http://localhost:8075/webroot/decision/view/report?viewlet=doc/phone/動態分組.cpt&銷售員=孫林&產品型別=飲料&產品=牛奶
如下圖所示:
效果如下圖所示:
注1:同範本多個「網頁框」配置同一個連結,會相互影響(不同參數視為不同連結)。
注2:網頁框裏掛載 BI 範本連結時,參數需要連接到連結後 。
2.4 捲軸
「網頁框」的寬高就是所在儲存格的寬和高,當嵌入的網頁的寬或高超過網頁框的寬高值時,就會出現相應的「水平捲軸」與「垂直捲軸」。
屬性設定中,「水平捲軸可見」與「垂直捲軸可見」預設勾選。
若取消勾選,預覽範本時,不可見捲軸且無法捲動,超出「網頁框」大小的內容會被修剪不顯示。
2.5 組件大小
當 body 佈局方式設定為「絕對佈局」時,可自訂組件大小。如下圖所示:
2.6 支援自適應高度
行動端自適應規則如下表所示:
所在範本型別 | 所在範本佈局 | 內嵌範本型別 | 內嵌範本佈局 |
---|---|---|---|
frm 範本 | 行動端手機重佈局(body 内/ Tab 内) | FR 範本 | cpt 範本不自適應 |
cpt 範本橫向自適應 | |||
frm 範本 body 組件的行動端屬性下勾選 手機重佈局 | |||
frm 範本 body 組件的行動端屬性下不勾選 手機重佈局 ,且 組件縮放 選擇橫向自適應 | |||
不勾選 手機重佈局,且縮放邏輯為固定大小 |
需注意以下幾點:
「網頁框元件」自適應時,凍結不生效。
「網頁框」內配置跨域的連結,「網頁框」自適應不生效 。
Android App 上,範本 A 的「網頁框元件」中內嵌範本 B ,外部手勢(滑動範本 A )與內部手勢(滑動範本 B ),每次只能響應一個,另一個禁用。
行動端預覽時,開啟[網頁框]範本中的子範本時:如果子範本設定的當前視窗,則從網頁框內部開啟;如果子範本設定的新視窗,則從新視窗開啟。
3. JavaScript API
決策報表裏有一個網頁框元件 「rHIframe0」,使用者可新增「按鈕元件」,新增不同的「點選事件」,以達到不同的效果。如下圖所示:
3.1 setValue(String)
設定並重新整理「網頁框元件」的位址(保留原參數)
3.1.1 範本路徑
var Widget = _g().getWidgetByName('rHIframe0');
Widget.setValue("${servletURL}?viewlet=GettingStarted.cpt");
3.1.2 網路路徑
var Widget = _g().getWidgetByName('rHIframe0');
Widget.setValue("http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt");
3.2 reload()
重新整理網頁框:
var Widget = _g().getWidgetByName('rHIframe0');
Widget.reload();
3.3 loadUrl(String)
載入指定的 URL 連結位址。
3.3.1 範本路徑
var Widget = _g().getWidgetByName('rHIframe0');
Widget.loadUrl("${servletURL}?viewlet=GettingStarted.cpt");
3.3.2 網路路徑
var Widget = _g().getWidgetByName('rHIframe0');
Widget.loadUrl("http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt");
4. 行動端
App 和 H5 插件版本在 10.4.61 及之後時,「網頁框元件插件」支援在行動端使用。
注1:行動端不支援第三章 JavaScript API。
注2:透過「網頁框元件插件」預覽範本時,行動端不支援顯示範本中的參數面板。