I. Overview
1. Version
| Report server | JAR package | HTML5 mobile display plugin | New features |
|---|---|---|---|
| 10.0 | 2019-12-05 | V10.4.49 | Added Use JSBridgesetting Added Introduce JS setting Added Introduce CSS setting |
| - | V10.4.66 | Added Use main tab navigator button | |
| - | V10.4.76 | Added Set Resource URLsetting | |
| - | V10.4.90 | Added H5 Integrated Login setting Added Top Navigation setting |
2. Function description
| Setting item | Application scenario | Function introduction |
|---|---|---|
| Use main tab navigator | When users access the report system on the HTML5 side, they hope to switch between the homepage and the directory by means of buttons. | Users can switch between the home page and the directory through the Use main tab navigator button. |
| H5 Integrated Login | When users access the report system/leaflet template on the HTML5 side, they hope to achieve single sign-on. | Users can turn on the H5 Integrated Loginsetting, and by filling in the custom login authentication class and identification parameter name, HTML5 single sign-on can be realized. |
| Top Navigation | When accessing the report project on the HTML5 side, different users have different needs. Some users want to use the return button that comes with the device, and some users want the report system to have a return button. | Users can customize whether to display the return navigation on the HTML5 terminal through theTop Navigation. |
| Use JSBridge | Sometimes HTML5 and Fanruan App need to communicate | Users can turn on the Use JSBridge button to make the HTML5 terminal communicate with the native App. |
| Set Resource URL | HTML5 plug-in resources are all placed on the report server. When a user accesses the HTML5 template to request resources, the speed is limited by the bandwidth of the report server. | The user can set the resource address on the platform, so when accessing the HTML5 template to request resources, the speed is no longer limited by the bandwidth of the report server. |
| Introduce JS | Users sometimes need to achieve some effects on the HTML5 side, such as changing the style of element widgets and grids, and the display or hiding of widgets. | Users can import external JS files and CSS files to achieve some special effects or effects on the HTML5 side. |
| Introduce CSS |
II. Plugin introduction
1. Plugin installation
If you need to set relevant HTML5 settings in the data decision system, you must install the「HTML5 Mobile Display」 plugin.
Click to download the plugin: HTML5 mobile display
Designer plug-in installation method reference Plugin Management
Server installation method reference Server plugin management
2. Introduction to the interface
After the plug-in is installed, log in to the data decision system as an administrator, click Manage>Mobile Platform>Others, and add 「H5 Setting」, as shown in the following figure:
III. Bottom home page switch
When the HTML5 mobile display pluginversion is V10.4.66, the bottom homepage switch function is supported.
Turn on the bottom home page switch button, when users access the report system on the HTML5 side, they can switch between the home page and the directory by means of buttons.
1. Turn on the bottom home page switch button
Enter the data decision system as an administrator, click 「Manage>Mobile Platform>Others」, turn on the 「Bottom Home Page Switch」 button, and click 「Save」. As shown below:
2. Effect preview
Enter http://IP:port number/webroot/decision on the HTML5 terminal to access the report system. The user can switch between the home page and the directory through the bottom. The effect is shown in the following figure:
Note 1: For the steps to access the report system on the HTML5 side, please refer to HTML5 end access Report / Project
Note 2: If the home page is not set, the switch between the home page and the directory cannot be realized. Please refer to the Manage homepage for specific steps.
IV. H5 integrated login
When the HTML5 Mobile Display Plugin version is V10.4.90, the H5 Integrated Login function is supported.
When H5 Integrated Login is turned on, the user accesses the report project or leaflet template through the HTML5 terminal. If it contains the identification parameter name, it will be automatically intercepted for custom login verification.
Note: After the plug-in is updated, the designer needs to be restarted for this function to take effect.
1. Upload login authentication class
This article provides a custom login verification class for background single-point authentication throughusername.
Click to download and unzip the custom login verification class Demo.class: Demo.rar
Upload Demo.class to the report project %FR_HOME%\webapps\webroot\WEB-INF\classes directory, as shown below:
2. Open H5 integrated login
Enter the data decision system as an administrator, click Manage>Mobile Platform>Others, turn on the H5 Integrated Login button, and set the Identification Parameter Name and Custom Login Authentication Class. As shown below:
The specific settings and precautions are as follows:
| Setting item | Introduction |
|---|---|
| Identification parameter name | When a user accesses the 「report project/template」 on the HTML5 side, if the「identification parameter name」 is included in the access request, it will be intercepted for custom login verification After opening 「H5 Integration Login」, 「Identification Parameter Name」 cannot be empty, otherwise it cannot be saved Set to aaa in this example |
| Custom login authentication class | The options are all classes in the report project%FR_HOME%\webapps\webroot\WEB-INF\classes folder After opening 「H5 Integrated Login」,「Customized Login Authentication Class」 cannot be empty, otherwise it cannot be saved Set to Demo.class in this example |
3. Effect preview
1) Login Verification
When the HTML5 client accesses the report project/template, if the access request contains identification parameter name, it will be free of login access if the authentication is passed, and the error report interface will be returned if the authentication fails, as shown in the following figure:
The verification logic is shown in the following table:
Note: This verification is only valid for the HTML5 end access decision report system/leaflet template, and the App end, WeChat integration, DingTalk integration, PC end, etc. are not affected.
| Scenes | Access link | Result | |
|---|---|---|---|
| Access without parameters | http://IP:port number/webroot/decision | Jump out of the login page, enter the username and password normally to log in | |
| Access with parameters | Username is normal | http://IP:port number/webroot/decision?aaa=Normal report username | Verify the user according to the authentication type, pass the verification, and access the system/template without login |
| Username disabled | http://IP:port number/webroot/decision?aaa=Disabled report user name | Verify the user according to the authentication type, if the verification fails, jump to the error page | |
| Username does not exist | http://IP:port number/webroot/decision?aaa=Report user name that does not exist | ||
| Username is empty | http://IP:port number/webroot/decision?aaa= | ||
2) Login timeout
If the authentication is passed according to the authentication type, after accessing the template, the login timeout will be triggered, prompting The current session has timed out, please log in again. After closing, it will stay on the page without jumping to the built-in login page. As shown below:
V. Top navigation
When the HTML5 mobile display plugin」version is V10.4.90, the top navigationfunction is supported.
Because it is uncertain whether the terminal has a physical return key under different devices and different environments, a top navigation button has been added to allow users to open the top back navigation on the HTML5 side, and can customize the navigation background, navigation title, Back button, effective terminal, etc.
1. Open the top navigation bar button
Enter the data decision system as an administrator, click Manage>Mobile Platform>Others, open the Top Navigation button, and set items as shown in the figure below:
The specific settings are shown in the following table:
| Setting item | Introduction |
|---|---|
| Navigation background | The user can customize the background color of the top return navigation bar Default blue |
| Title font size | The user can set the font size of the navigation bar title The setting range is 12-20, the default is 17 Note: If the title is too long to display, it will display at the end... |
| Title color | Users can customize the font color of the navigation bar title Default white |
| Font bold | Users can choose whether to bold the title font of the navigation bar Bold by default |
| Alignment | Users can choose the alignment of the navigation bar title text Can be set to left, center, and right, the default is centered |
| Button color | Users can customize the color of the return button in the navigation bar Default white |
| Terminal settings | Users can choose the navigation bar to validate the terminal Choose iOS, Android, select all by default |
2. Effect preview
Enter http://IP:port number/webroot/decision on the HTML5 terminal to access the report system, and the effect of 「Top Return to Navigation Bar」 is shown in the figure below:
Note: For the steps to access the report system on the HTML5 side, please refer to: HTML5 end access Report / Project
The effective range of 「Return Button」 is shown in the following table:
| Scenes | Back button |
|---|---|
| Login page | No superior page, no return button |
| Home | No superior page, no return button |
| Home hyperlink | No superior page, no return button |
| Leaflet template | No superior page, no return button |
| First-level directory | No superior page, no return button |
| Level 2 and above | The return button takes effect and returns to the parent directory |
| Templates in the catalog | The return button takes effect and returns to the list |
| Hyperlink in template | The return button takes effect and returns to the previous template |
VI. Use JSBridge
When the HTML5 mobile display plugin version is V10.4.49, it supports the Use JSBridge function.
H5 communicates with native apps through JSBridge. If users need to communicate with native apps, they can open the Use JSBridge button and click save. As shown below:
VII. Set the resource address
For details on setting the resource address, please refer to: Set resource address
VIII. Introduce JS and CSS files
When the HTML5 Mobile Display Plugin version is V10.4.49, it supports the Introducing JS and Introducing CSS functions.
The HTML5 end supports the introduction of external JS and CSS files. This chapter takes the introduction of external JS files as an example to illustrate the usage of this function.
Note 1: The steps for importing CSS files and JS files are the same. For JS usage instructions, please refer to: JS Introduction Chapter 2
Note 2: This function is only supported on the HTML5 side, not the App side.
1. Import JS file
1) Put test.js file in the report project directory %FR_HOME%\webapps\webroot, as shown in the figure below:
2) Enter /test.js in the text box on the right of Import JS and click Save, as shown in the figure below:
2. Template preparation
1) In the FineReport designer, create a New General Report.
2) Enter test in cell A1, select Cell A1, click Hyperlink>Add Hyperlink>JavaScript, enter the JavaScript code, as shown below:
The JavaScript code is as follows:
warn();
3. Effect preview
Save the template, click on Mobile Preview, the HTML5 preview effect is shown below:
Note: For the method of previewing templates on HTML5 side, please refer to: HTML5 end access Report / Project
