[General] Mobile JS Template to Achieve Jump

1. Version

2. Function introduction

Through the JS statement, click the summary data above the template to jump to the detailed data below.

Note 1: This method does not support horizontal screen.

Note 2: If JS is triggered after the full screen is zoomed in, exit the full screen and jump to the corresponding component.

Note 3: Click the floating window in the template to navigate to the specified position on the page, please refer to: Fast positioning of component navigation

The JS calling scene is shown in the following table:

Note: This method can only be used when the body layout in dashoboard is re-layout.

1. Prepare template

Open the template in the FineReport designer:

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Dashoboard\Retail group real-time monitoring-phone.frm

Click to download the template:

Retail group real-time monitoring-phone.frm

2. Add hyperlink

Hyperlink JS statements are different in different scenarios, as shown below:

• Use hyperlinks in cells:_g().options.form.jumpToMark("markName")

• Use hyperlinks in form components:this.options.form.jumpToMark("markName")

Note: 'markName' can be the widget name, table component name, chart block name, and Tab-tabpane name.

1) Add hyperlink to report cell

Double click with the left mouse buttonreport0Report block, selectedA3Cell, click in the property panel on the rightHyperlink,chooseJavaScript script,As shown below:

The JS code is as follows:

_g().options.form.jumpToMark("chart1")

2) Add hyperlink to chart block

Double clickchart2Chart block, clickSpecial Effects>Add a link,chooseJavaScript,As shown below:

The JS code is as follows:

this.options.form.jumpToMark("chart0")

Double clickchart2Chart block, clickSpecial effects>Add a link,chooseJavaScript,As shown below:

The JS code is as follows:

this.options.form.jumpToMark("report1")

Double-click the added link name to change the link nameIn turnchange into:Real-time sales,Top,As shown below:

3. Use navigation

1) Selectreport1,  ClickMobile Terminal, checkUse NavigationButton, as shown in the figure below:

2) Selectchart0,  ClickMobile Terminal, checkUse NavigationButton, as shown in the figure below:

3) Selectchart1, ClickMobile Terminal, checkUse NavigationButton, as shown in the figure below:

4. Effect view

Take the App effect as an example, as shown in the figure below:

The completed template can be found in:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\JS\Form JS instance\35-JS realizes rapid component positioning.frm

Click to download the template:

35-JS realizes fast positioning of components.frm