Accessing the Report/Project on the HTML5 Terminal

Version

Application Scenario

After setting the homepage or the directory of the decision-making platform on the mobile terminal, you can view the entire report system on the mobile terminal.

You can preview a single template created in the FineReport designer on HTML5 terminals, for example, browsers.

You can configure your server and browse the entire report projects on HTML5 terminals, for example, browsers.

Function Description

By installing the HTML5 Mobile-Terminal Display Plugin on the server, you can view effects of the template, directory, and homepage in report projects through links on HTML5 terminals. In addition, you can also scan the QR code to view the effect of a single template on HTML5 terminals.

Plugin Installation

To preview report projects on HTML5 terminals, you must install the HTML5 Mobile-Terminal Display plugin.

You can obtain the plugin at https://community.finereport.com/market/.

For details about how to install plugins in the designer, see Designer Plugin Management.

For details about how to install the plugin on the server, see Server Plugin Management.

Environment Preparation

You have kept the network between PC and the mobile terminal consistent. You can keep the network consistent through the following two ways.

1. Create a hotspot for your computer through your smartphone.

2. Connect the smartphone and the computer to the same hotspot.

Note:

1. To prevent the wireless network switchover failure of the computer IP, ensure that you have unplugged the wired network.

2. If you want to access the project on different networks, you need to configure the proxy server. For details, see Proxy Server Configuration.

Account and Password Configuration

To access templates on mobile terminals, you need to have an account and a password for the decision-making platform. For details, see Introduction to the Decision-making Platform.

After successful initialization, this document takes the built-in user Alice (account: Alice; password: 123456) in the FineReport designer as an example.

Homepage and Directory Configuration

You (as the admin) can configure the homepage and the directory of the mobile terminal on the decision-making platform. If you do not configure the homepage and the directory, they will not be displayed. For details about the configuration method, see Homepage Management and Directory Management.

You (as the admin) need to assign the directory viewing permission to corresponding users, otherwise they will not be able to view templates. For details about permission configurations, see User Permission Management.

You can view the effects of templates, directories, and homepages on HTML5 terminals by specifying links. The following table describes the corresponding links.

Note:

IP address and Port number in the following links should be modified to the actual ones.

If you want to disable the HTML5 effect when accessing the above links, you can add the backend parameter force_web=true at the end of the links, as shown in the following examples.

Note:

The parameter can only be added in the URL.

http://IP address:Port number/webroot/decision?force_web=true

http://IP address:Port number/webroot/decision/view/report?viewlet=xxx.cpt&force_web=true

Before accessing templates on HTML5 terminals, ensure that you have completed the setting on PC based on section "Setting on PC."

Template Preview

1. Open the built-in template in the path %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Mobile\Mobile Report\Detail Report_mobile.cpt.

Click Mobile Preview, as shown in the following figure.

2. The following figure shows the browser display page on PC.

Note:

Mobile Preview is currently not supported in FVS visualization dashboards. With the FineVis Data Visualization plugin 1.17.1 or later versions, you can directly add &op=mobile at the end of the URL to call the following page.

Attribute	Note
Detail Report_mobile	Report name
Type	Report preview type and can be set to Preview or Data Entry. Note: Data Entry is not supported in dashboards.
QR Code	QR code of the report access link and can be directly recognized and accessed by the DataAnalyst app and third-party browsers.
Copy Link	If the IP address in the current URL is localhost, localhost will be automatically recognized as the IP address of the current network. A prompt displaying "Ensure that mobile terminals are on the same network as the current PC" is shown below the link.

Scanning the Code on the HTML5 Terminal

Open the browser and scan the QR code to view the template, as shown in the following figure.

Note:

The Safari browser does not support the QR code scanning function. You can use the iPhone camera to scan the QR code and tap on the prompt (popping up at the top of the notification bar) to open the template with Safari.

The supported JS and plugins are slightly different when you access reports through HTML5 terminals and through PC. You can refer to the following table.

Webpage Opening Failure

Problem

When you preview templates on mobile terminals, the server fails to be connected or the browser fails to be opened after you scan the QR code, as shown in the following figure.

Not-Configured Network

Cause: The mobile terminal is not on the same network as the current computer.

Solution: For details, see section "Environment Preparation."

IP Identification Error

Cause: Since the computer connects to multiple networks in a short period, the network corresponding to the IP address in the QR code link is different from that connected to the mobile terminal.

Solution:

1. Enter the command ipconfig /all in the CMD command prompt window to check the actual IP address of the current computer, as shown in the following figure.

2. Compare the IPv4 address with the IP address in the link below the generated QR code of the report, as shown in the following figure.

3. If the IPv4 and the IP address are inconsistent, modify localhost in the webpage link to the correct IP address, press the Enter key to regenerate the QR code, and re-scan the QR code through a mobile device to preview the template.

Firewall Block

Cause: If you confirm that you have performed operations based on the document process and the application has been configured correctly, the error may be caused by the Windows firewall.

Solution: Directly disable the Windows firewall and proceed with preview operations on mobile terminals. Alternatively, configure the Windows firewall to open the unauthorized port based on the following steps.

1. Choose Windows Security > Firewall & network protection > Advanced settings > Inbound Rules > Import Policy.

2. Select Port in Rule Type, select TCP and Specific local ports in Protocol and Ports, enter 8075 into the text box, and save the setting, as shown in the following figure.

Data Entry Preview Error on the HTML5 Terminal

Problem: When you perform the data entry preview on the HTML terminal, an error displaying "This page is not available on the current terminal. Contact the administrator if access is required." pops up, as shown in the following figure.

Cause: When you mount data entry templates on the decision-making platform, if you only select Tablet and Mobile in Terminal, an error will pop up during the preview on the HTML5 terminal.

Solution: Currently, the H5 parsing is not supported in the data entry preview of the HTML5 terminal. Data entry templates are parsed on PC. The authentication also follows the PC logic. Therefore, you must select PC in Terminal, as shown in the following figure.