HTML5 Side Access Report / Project

1. Version

2. Application scenarios

After setting the home page or directory of the mobile terminal in the decision-making platform, users can view the entire report system on the mobile terminal.

Users can preview the single template created in FineReport Designer on HTML5 terminal such as WeChat or browser.

Users can configure their own server on the HTML5 terminal such as WeChat or a browser to browse the entire report project.

3. Function introduction

By installing the HTML5 mobile display plugin on the server side,

On the HTML5 side, you can view the effects of templates, catalogs, and home pages in the report project through the access link.

On the HTML5 side, you can scan the code to view the effect of a single report.

1. Install the plugin

If you want to preview the report project on the HTML5 terminal, you must install the HTML5 mobile terminal display plugin.

Click to download the plug-in: 

HTML5 mobile display plugin.zip

For the installation method of the designer plugin, please refer to the designer plugin management

Server plugin installation method refer to Server plugin management

2. Environmental preparation

Switch the PC device and mobile device to the same network environment. There are two ways:

1) The mobile phone opens the hotspot to the computer

2) Connect the phone and computer to the same hotspot

Note 1: To prevent the computer IP from not switching to the wireless network IP, please unplug the wired network.

Note 2: If you want to access the project under different network environments, you need to configure the proxy server, refer to the document: Proxy server configuration

3. Configure account password

If you need to access the template on the mobile terminal, you need to have an account and password for the dicision-making platform. For the specific setting method, please refer to: Introduction to the decision-making platform

After the initialization is successful, this article takes the built-in user Alice of the FineReport designer as an example. The account and password are: Alice, 123456.

4. Configure Home Directory

The administrator can configure the mobile terminal homepage and mobile terminal directory in the decision-making platform, and the page will not be displayed if it is not configured. 

The administrator needs to assign directory viewing permissions to the corresponding users, and templates cannot be viewed without assigning them.

Users can view the effects of templates, catalogs, and homepages on the HTML5 side through designated links. The corresponding links are shown in the following table:

Note: IP and port number should be modified to: actual IP, actual port number.

If the user wants to turn off the HTML5 effect when visiting the above link, he can add the background parameter force_web=true after the link. An example is shown below:

Note: Parameters can only be added in the URL, not in the template parameters.

• http://IP:port number/webroot/decision?force_web=true

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

Before accessing the template on the HTML5 side, please make sure that the PC side configuration in Chapter II has been completed.

1. Template preview

1)Open the template in the designer: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\phone\basic\product details-phone.cpt

Click the mobile preview, as shown in the figure below:

2)After clicking the preview on the mobile terminal, the PC browser displays the page as shown in the figure below:

2. HTML5 side scan code

Open WeChat/Browser and scan the QR code to view the template. As shown below:

Note: The Safari browser does not have a QR code scanning function. You can use the iPhone camera to scan the QR code. A prompt will pop up in the notification bar at the top. You can open it with Safari with a single tap.

When accessing the report through HTML5, there is a slight difference between the JS and plugins that can be used when accessing the report on the PC side. For details, please refer to:

1. Unable to open the webpage

Problem Description:

When previewing on the mobile terminal, after scanning the QR code, it prompts that the server connection fails or the web page cannot be opened. As shown below:

1)The network environment is not configured

Reason analysis: The mobile device is not configured and is in the same network environment as the computer.

Solution: Please refer to section II.2 of this article for details.

2)Identify IP errors

Reason analysis: As the computer is connected to multiple networks in a short period of time, the network corresponding to the IP address in the QR code link is different from the network connected to the mobile device.

solution:

• Enter in the CMD command prompt window: ipconfig/all

 Then you can view the actual IP address of the machine, as shown in the figure below:

• Compare the found IPv4 address with the IP address in the link below the QR code generated in the report, as shown in the figure below:

• If they are inconsistent, modify the localhost in the web link to the correct IP, click the Enter key to regenerate the QR code, and use the mobile device to scan the code to preview again.

3)Firewall blocking

Reason analysis: If you confirm that you have followed the document flow and the application configuration meets the requirements, the error may be caused by the Windows firewall.

Solution: The user can directly turn off the Windows firewall, and then perform the preview operation on the mobile terminal. Or follow the steps below to set up Windows Firewall to open unallowed ports.

• Open Windows Security>Firewall & network protection>Advanced settings, select Inbound Rules>Import Policy

• Set the rule type to port, protocol to TCP, and port to specific local port 8075. Just save it, as shown in the figure below:

2. HTML5 Data Entry Preview Error Report

Problem description: The user will report an error when Data Enrey preview on the HTML5 terminal: The page is not displayed on the current terminal. If you need to access it, please contact the administrator, as shown in the following figure:

Reason analysis: When the decision-making platform mounts the "Data Entry Template", if the display terminal only selects tablet and mobile, and does not select PC, the error will appear in the HTML5 preview.

Solution: The mobile terminal H5 report preview does not currently support H5 parsing. The report template is parsed by the PC, and the PC logic is used for authentication. Therefore, the terminal display must check the PC, as shown in the following figure: