The HTML5 Viewer is a Javascript component that can be used in web applications to preview reports hosted on ActiveReports Server or ActiveReports 12 Web Service. The HTML5 Viewer provides several UI types to target the wide range of supported devices. The application can switch between these options using the public API methods and properties.
HTML5 Viewer Mobile UI
HTML5 Viewer Mobile Top Toolbar
| Toolbar Element | Name | Description |
|---|---|---|
 |
Table of Contents | Displays the Table of Contents pane. |
 |
Parameters | Displays the Parameters pane. |
 |
Search | Displays the Search pane. |
 |
Single page view | Displays one page at a time in the viewer. |
 |
Continuous page view | Displays all preview pages one below the other. |
 |
Galley mode | Provides a viewer mode which removes automatic page breaks from an RDL report and displays the data in a single scrollable page. This mode maintains page breaks you create in the report. |
 |
Save As | Displays the drop-down list of formats to export the report. The available options are PDF Document, Word Document, Image File, MHTML Web Archives, Excel Workbook, and CSV file. Tapping the menu item exports the report to the selected format. and opens the saved file in the browser as an attachment. |
 |
Send report by email after specifying email address of the recipient in the Send Report by Email dialog. You can select the format of the report from PDF (default), EXCEL, MHT, Image, WORD, and XML, and choose to send the report as link or as an attachment. |
HTML5 Viewer Mobile Bottom Toolbar
| Toolbar Element | Name | Description |
|---|---|---|
 |
Previous Page | Navigates to the previous page of the displayed report. |
 |
Next Page | Navigates to the next page of the displayed report. |
| 2/124 | Current Page | Displays the current page number and page total. Enter the page number to view a specific page. |
 |
Back to Parent | Returns to the parent report in a drill-through page report. |
 |
Partial Data. Run Full Report | Provides information that report is not fully rendered. It is partially rendered either due to page limit set by administrator or user has cancelled rendering using  option. Click option again to run full report. |
| |
Cancel Report | Use this option to cancel loading full report. This option is displayed for large reports. |
HTML5 Viewer Mobile Table of Contents Pane
The Table of Contents pane appears when you tap the TOC button on the toolbar. Tap any TOC item in the Table of Contents pane to navigate to the corresponding section of the report in the Viewer.
The Table of Contents pane has a Close (x) button that hides the pane and shows the report display area. If a report does not have a Table of Contents, the TOC button in the toolbar is disabled.
HTML5 Viewer Mobile Parameters Pane
The Parameters pane appears automatically if your report contains parameters.
In the Parameters pane, click the 
button to open the Parameters Value editor where you can choose or enter values depending on the parameter type.
After you select or enter the values, click the Back button to navigate to Parameters Pane. Click the View Report button to view the report according to the selected parameter values.
In the Parameters pane, you can use parameters to filter or add the data to display reports at runtime. You can either prompt users for parameters so that they control the output, or set hidden parameters to pass values automatically at runtime without prompting the users. To filter or add the report data, enter a value or set of values and click View report.
If a report does not have parameters, the Parameters button in the toolbar is disabled. Parameters
HTML5 Viewer Mobile Search Pane
The Search pane appears when you tap the Search button in the toolbar. The Search pane occupies all the available HTML5 viewer size.
This pane allows you to search for a specific text in the report.
To search in a report:
- Enter the word or phrase in the search field.
- Under the search field, you may choose to use the Match case and Whole phrase options while searching in the report.
- Click the Search button to see the results appear below the Search button.
- Click an item in the list to jump to that item in the report.
HTML5 Viewer Desktop UI
HTML5 Viewer Desktop Toolbar
| Toolbar Element | Name | Description |
|---|---|---|
|
Sidebar | Displays the sidebar with the Table of Contents and Parameters panes. |
|
Search | Displays the Search pane. |
 |
First | Navigates to the first page of the displayed report. |
 |
Prev | Navigates to the previous page of the displayed report. |
| 2/124 | Current page | Displays the current page number and page total. Enter the page number to view a specific page. |
 |
Next | Navigates to the next page of the displayed report. |
 |
Last |
Navigates to the last page of the displayed report. |
|
Back to Parent | Returns to the parent report in a drill-through page report. |
 |
Displays the Print dialog to specify printing options. | |
|
Single page view | Displays one page at a time in the viewer. |
|
Continuous page view | Displays all preview pages one below the other. |
|
Galley mode | Provides a viewer mode which removes automatic page breaks from an RDL report and displays the data in a single scrollable page. This mode maintains page breaks you create in the report. |
 |
Save As | Displays the drop-down list of formats to export the report. The available options are PDF Document, Word Document, Image File, MHTML Web Archives, Excel Workbook, and CSV file. Tapping the menu item exports the report to the selected format. and opens the saved file in the browser as an attachment. |
| |
Send report by email after specifying email address of the recipient in the Send Report by Email dialog. You can select the format of the report from PDF (default), EXCEL, MHT, Image, WORD, and XML , and choose to send the report as link or as an attachment. | |
 |
Partial Data. Run Full Report | Provides information that report is not fully rendered. It is partially rendered either due to page limit set by administrator or user has cancelled rendering using Cancel Report option. Click Partial Data. Run Full Report option again to run full report. |
 |
Cancel Report | Use this option to cancel loading full report. This option is displayed for large reports. |
HTML5 Viewer Desktop Table of Contents Pane
The Table of Contents pane appears when you click the Sidebar button in the toolbar. Click any TOC item to navigate to the corresponding section of the report in the Viewer.
If a report does not have the Table of Contents, the Sidebar button in the toolbar is disabled.
HTML5 Viewer Desktop Parameters Pane
The Parameters pane appears when you click the Sidebar button in the toolbar and then click the Parameters tab. In the Parameters pane, enter a value to filter the data to be displayed.
Click View Report button to view the report according to the selected parameter values.
You can use parameters to filter or add the data to display in reports at runtime. You can either prompt users for parameters so that they control the output, or set hidden parameters to pass values automatically at runtime without prompting the users. To filter or add the report data, enter a value or set of values and click View report.
If a report does not have parameters, the Parameters pane does not appear in the sidebar. For more information, see Parameters.
HTML5 Viewer Desktop Search Pane
The Search pane appears when you click the Search button on the toolbar. This pane allows you to search for a specific text in the report.
To search in a report:
- Enter the word or phrase in the search field.
- Under the search field, you may choose to use the Match case and Whole phrase options while searching the report.
- Click the Search button to see the results appear below the Search button.
- Click an item in the search results to jump to that item in the report.
HTML5 Viewer Custom UI
The custom UI option of the HTML5 Viewer provides the ability to create a customized viewer for targeted devices and to meet the specific application requirements.
You can customize the appearance of the HTML5 Viewer using the public API methods and properties, described in Work with HTML5 Viewer using Javascript.