[General] JS Through the Button Widget Switch Dialog Box

1. Version

2. Expected effect

When the user data entry in the report on the mobile terminal, he hopes to open a dialog box on the current page byclicking the button to data entry. After data entry, user can directly close the dialog box through the Submit Button. As shown below:

3. Implementation method

The user can switch the dialog box through the button widget through JavaScript, and the specific settings are as follows:

Note 1: Only the button widget under the decision report are supported, and ordinary reports are not supported.

Note 2: The content of the pop-up window only supports templates, not plain text.

1) Close the dialog box pop-up window

FR.closeMobilePopup();

2) Open the dialog box pop-up window

FR.mobilePopup{
    target: 'template',
    parameters: {},
    setting: {
        templatePath: '/xxx.cpt',
        xxx:xxx
        xxx:xxx
    }
}

1. Sub-template

1) Set template

Open the template:FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Mobile\MobileData Entry\Leave Request_mobile.frm

Save as:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\phone\JS\JS_through_the_button_widget_switch_dialog_box_sub-template.frm

2) Add a click event to close the dialog box

Select button widgetbutton0, ClickComponent Settings>Event,Add toClick event, Add JavaScript code, as shown in the following figure:

The JavaScript code is as follows:

FR.closeMobilePopup(); 

2. Main template

1) New template

Create a new dashboard and save it as:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\JS_through_the_button_widget_switch_dialog_box_main-template_mobile.frm

Set mobile terminal attributes

Click onTemplates>Mobile Attribute, CheckSet as mobile template,As shown below:

Set the layout

SelectedComponent settings>body>Attributes,set upLayoutforAbsolute layout,As shown below:

2) Set button widiget

Add button widget

SelectedButton widget, Drag tobody interface, as shown in the figure below:

Set the widget name

Select button widgetbutton0, ClickComponent Settings>Attributes,set upButton NameforClick to open the sub-template,As shown below: 

3) Add a click event to open the dialog box

Select button widgetbutton0, ClickComponent Settings>Event,Add toClick event, Add JavaScript code, as shown in the following figure:

The JavaScript code is as follows:

FR.mobilePopup({
target: "template",
parameters: {},
setting: {
templatePath: "/JS_through_the_button_widget_switch_dialog_box_sub-template.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
}
}
});

3. Effect preview

Open the main template and clickMobile preview. Click the button to open on the current pageSub-template dialog. After completing the report, clickSubmitButton, the sub-template is automatically closed.

The preview effect of App and HTML5 terminal is as shown in the figure below:

1) Main template

Please refer to the completed template:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\JS\JS_through_the_button_widget_switch_dialog_box_main-template_mobile.frm

Click to download the template:

JS_through_the_button_widget_switch_dialog_box_main-template_mobile.frm

2) Sub-template

Please refer to the completed template:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\JS\JS_through_the_button_widget_switch_dialog_box_sub-template.frm

Click to download the template:

JS_through_the_button_widget_switch_dialog_box_sub-template.frm