[General] Opening/Closing a Dialog Box Through a Button Widget with JavaScript

Version

Expected Effect

• You can submit data in a dialog box opened after you tap a button on the current page when submitting data using a mobile terminal.

• You can close the dialog box by tapping a Submit button after filling in a form, as shown in the following figure.

Implementation Method

You can open or close a dialog box by tapping a button after configuring JS events for the button widget. The specific settings are as follows:

Note:

1. General data entry report templates are supported only in V11.0.91 and later versions.

2. The content in the pop-up dialog box can be a template only, not plain text.

1. JS for closing a pop-up dialog:

FR.closeMobilePopup();  //Close the pop-up.

2. JS for opening a pop-up dialog:

FR.mobilePopup{
    target: 'template',  //Set the button to follow the pop-up.
    parameters: {},
    setting: {
        templatePath: '/xxx.cpt',  //Set the sub-template path in the dialog box.
        xxx:xxx
        xxx:xxx
        //Set rules such as the border, length, and width.
    }
}

Sub-Template

Setting a Sub-Template

You can download the sub-template: Dashboard Data Entry-phone.frm

Save the template in the %FR_HOME%\webapps\webroot\WEB-INF\reportlets\Sub-Template for Opening or Closing a Dialog Box Through a Button Widget with JavaScript.frm path.

Adding a Click Event for Dialog Closing

Select the button widget button0, choose Component Settings > Event, add a Click event, and add JS codes, as shown in the following figure.

The following content shows the JavaScript codes.

FR.closeMobilePopup();   //Close the pop-up.

Main Template

Creating a Template

Create a dashboard and save it in the %FR_HOME%\webapps\webroot\WEB-INF\reportlets\Main Template for Opening or Closing a Dialog Box Through a Button Widget with JavaScript.frm path.

1. Setting Mobile Attributes

Choose Template > Mobile Attribute and select Set as Mobile Template, as shown in the following figure.

2. Setting the Layout Type

Choose Component Settings > body > Attribute. Choose Template > PC Adaptation Attribute and set Layout Type to Absolute Layout, as shown in the following figure.

Setting a Button Widget

1. Adding a Button Widget

Select Button Widget and drag it to the body page, as shown in the following figure.

2. Setting the Widget Name

Select the button widget button0, choose Component Settings > Attribute, and set Button Name to Click to Open the Sub-Report Pop-up, as shown in the following figure.

Adding a Click Event for Dialog Opening

Select the button widget button0, choose Component Settings > Event, add a Click event, and add JS codes, as shown in the following figure.

The following content shows the JavaScript codes.

FR.mobilePopup({
               target: "template",//Set the button to follow the pop-up.
               parameters: {},
               setting: {
                               templatePath: "Sub-Template for Opening orClosing a Dialog Box Through a Button Widget with JavaScript.frm",
                               //Set the sub-template path.
                               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
                               }//Set the size and format of the pop-up.
               }
});

Configuration items in the setting parameter in the codes are described below:

Effect Display

• Open the main template and click Mobile Preview.

• Click the Click to Open the Sub-Report Pop-up button to open the sub-template dialog on the current page.

• Click Submit after filling in the form. The template will be closed automatically.

The following figure shows the preview effect on the DataAnalyst app and on the HTML5 terminal.

1) Main template

You can download the template: Main Template for Opening or Closing a Dialog Box Through a Button Widget with JavaScript.frm

2) Sub-template

You can download the template: Sub-Template for Opening or Closing a Dialog Box Through a Button Widget with JavaScript.frm