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

1.1 版本

1.2 預期效果

用戶在移動端填報時，希望通過「點擊按鈕」在當前頁打開對話框進行填報。填報完成後，通過「提交按鈕」可直接關閉對話框。如下圖所示：

1.3 實現方法

用戶可通過 JavaScript 實現通過按鈕控件開關對話框，具體設置如下：

注1：僅支持決策報表下的按鈕控件，不支持普通報表。

注2：彈窗内容僅支持模板，不支持純文本。

1）關閉對話框彈窗

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

2）打開對話框彈窗

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

2.1 子模板

2.1.1 設置模板

打開模板：FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Phone\form\決策報表填報-phone.frm

另存爲：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\phone\JS\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>屬性，設置布局方式爲絕對布局，如下圖所示：

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",//設置子模板地址
		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
		}//設置彈窗大小格式
	}
});
顯示代碼

2.3 效果預覽

打開主模板，點擊移動端預覽。點擊按鈕，在當前頁打開子模板對話框。填報結束，點擊填報成功按鈕，子模板自動關閉。

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

1）主模板

已完成模板請參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\phone\JS\JS通過按鈕控件開關對話框主模板.frm

點擊下載模板：JS通過按鈕控件開關對話框主模板.frm

2）子模板

已完成模板請參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\phone\JS\JS通過按鈕控件開關對話框子模板.frm

點擊下載模板：JS通過按鈕控件開關對話框子模板.frm