［通用］JS透過按鈕元件開關對話框

1.1 版本

1.2 預期效果

• 使用者在行動端填報時，希望透過「點選按鈕」在當前頁開啟對話框進行填報

• 填報完成後，透過「提交按鈕」可直接關閉對話框

如下圖所示：

1.3 實現方法

使用者可透過 JavaScript 實現透過按鈕元件開關對話框，具體設定如下：

注1：V11.0.91 及之後版本才支援普通報表填報範本。

注2：彈窗內容僅支援範本，不支援純正文。

1）關閉對話框彈窗

FR.closeMobilePopup();  //關閉彈窗

2）開啟對話框彈窗

FR.mobilePopup{
    target: 'template',  //跟隨彈窗
    parameters: {},
    setting: {
        templatePath: '/xxx.cpt',//設定對話框子範本路徑
        xxx:xxx
        xxx:xxx
        //設定邊框，長寬等規則
    }
}

2.1 子範本

2.1.1 設定範本

開啟範本：決策報表填報-phone.frm

另存為：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\JS透過按鈕元件開關對話框子範本.frm

2.1.2 新增點選事件關閉對話框

選中按鈕元件「button0」，點選「組件設定」>「事件」，新增「點選事件」，新增 JavaScript 程式碼。如下圖所示：

JavaScript 程式碼如下：

FR.closeMobilePopup(); //關閉彈窗

2.2 主範本

2.2.1 建立範本

建立決策報表，另存為：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\phone\JS\JS透過按鈕元件開關對話框主範本.frm

1）設定行動端屬性

點選「範本」>「行動端屬性」，勾選「設定為手機端範本」。如下圖所示：

2）設定佈局方式

選中「組件設定」>「body」>「屬性」，然後在「範本」>「PC端自適應屬性」，設定佈局方式為「絕對佈局」。如下圖所示：

2.2.2 設定按鈕元件

1）新增按鈕元件

選中「按鈕元件」，拖曳至「body」介面。如下圖所示：

2）設定元件名稱

選中按鈕元件「button0」，點選「組件設定」>「屬性」，設定「按鈕名稱」為「點選開啟子報表彈窗」。如下圖所示：

2.2.3 新增點選事件開啟對話框

選中按鈕元件「button0」，點選「組件設定」>「事件」，新增「點選事件」，新增 JavaScript 程式碼。如下圖所示：

JavaScript 程式碼如下：

FR.mobilePopup({
	target: "template",//設定跟隨彈窗
	parameters: {},
	setting: {
		templatePath: "/doc/phone/JS/JS透過按鈕元件開關對話框子範本.frm",//設定子範本地址
		hideCloseButton: false, //設定是否隱藏關閉按鈕，false 為不隱藏，true 為隱藏
		border: {
			type: 0,
			color: "rgb(0,0,0)",
			borderRadius: 4.0
		},
		background: {
			color: "rgb(255,255,255)"
		},
		mobileRegular: {
			type: "custom" || "auto_height",
			heightPercent: 95.0,
			widthPercent: 95.0
		},
		padRegular: {
			type: "custom" || "auto_height",
			heightPercent: 95.0,
			widthPercent: 95.0
		}//設定彈窗大小格式
	}
});

程式碼中 setting 參數中支援以下幾個配置：

2.3 效果預覽

• 開啟主範本，點選「行動端預覽」

• 點選按鈕，在當前頁開啟「子範本對話框」

• 填報結束，點選「填報成功」按鈕，子範本自動關閉

App 及 HTML5 端預覽效果如下圖所示：

1）主範本

已完成範本請參見：JS透過按鈕元件開關對話框主範本.frm

2）子範本

已完成範本請參見：JS透過按鈕元件開關對話框子範本.frm