[General] JS Clicks Pagination Report to Drill Down and Return to Original Page

1. Expected effect

When using a report with pagination on the mobile terminal, after drilling into other reports, you often want to return to the original page to continue browsing. As shown below:

2 Implementation ideas

Add hyperlinks in both templates to realize the jump between each other.

This document will introduce the implementation process.

1. Create a new parent template

1) Prepare data

Create a new Template dataset, where the SQL statement of the ds1 dataset is: SELECT * FROM sales_Volume

2) Report design

Design the table as shown below, and drag the fields into the corresponding cells:

Open Template>Repeat and Freeze Settings, set the repeat title behavior:line 1-2, and set the repeat end behavior: line 4.

Set one page to display 5 rows of data. SetCondition Formatting>Paging After Rowto cell B3, and the paging condition is Formula: seq()% 5 == 0

Add a serial number to the data. Add the formula in cell A3:&B3+"." to display the serial number.

And set A3 Left Parent Cell to B3, and B3 Left Parent to None.

Set the Cell Format. SetData Settingof B3 to List.

Add the page number at the end of the page. Add page number display in F4 cell, add formula: "The" + $$page_number + "page"

Save this template and name the template: Mobile page jump test.

2. Create a new sub-template

Save Mobile page jump test as and rename it to: Mobile page jump test subpage.

1) Modify the subpage dataset

SELECT * FROM Sales_Volume

where Region='${region}' and Salesperson='${sales}' and Product='${product}'

2) Add back button 

Add a parameter to the G1 cell, the formula value is:$page, and setConditional Formatting value of the G1 cell to Column width 0, and the condition: None.

3) Add a hyperlink to the back button

Add the text<Back to cell B1 of the subpage, add a js script hyperlink to cell B1, and add the parameterpage to the js script, the value is the formula: G1

The JS code is as follows:

var url = encodeURI("${servletURL}?viewlet=/Mobile page jump test.cpt&page="+page);
FR.doHyperlinkByGet({url:url,title:'Mobile page jump test.cpt',target:'_self'})                                                                    

3 Parent page settings

1) Add hyperlink

Return to theMobile page jump test.cptreport, and add a Web Report hyperlink to cell C3. The specific settings are as shown in the figure below:

2 ) Add loading end event

Set Template>Template web Attributes and add Loading End event in thePagintion Preview , as shown in the following figure:

The JS code is as follows:

var pa='${=$page}'
if(pa){
contentPane.gotoPage(parseInt(pa))}//Jump to the specified page                                                                                

Please refer toSection I of this document for mobile display effect.

The completed template can be found in:

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\JS\Mobile_page_jump_test.cpt

%FR_HOME%\\webapps\webroot\WEB-INF\reportlets\doc-EN\JS\Mobile_page_jump_test_subpage.cpt

Mobile_page_jump_test.cpt

Mobile_page_jump_test_subpage.cpt