Viewer Settings
The HTML5 Viewer is configured using properties that are located in the Stimulsoft.Viewer.StiViewerOptions class. All properties are divided into groups. Some of the groups contain subgroups for ease of use. The following is an example of setting the properties of the viewer.
viewer.html
...
<script type="text/javascript">
var report = new Stimulsoft.Report.StiReport();
report.loadFile("SimpleList.mrt");
var options = new Stimulsoft.Viewer.StiViewerOptions();
options.width = "1000px";
options.height = "1000px";
options.appearance.theme = Stimulsoft.Viewer.StiViewerTheme.Office2022WhiteBlue;
options.appearance.reportDisplayMode = Stimulsoft.Report.Export.StiHtmlExportMode.Div;
options.appearance.scrollbarsMode = true;
options.appearance.backgroundColor = Stimulsoft.System.Drawing.Color.dodgerBlue;
options.appearance.showTooltips = false;
options.toolbar.showPrintButton = false;
options.toolbar.showDesignButton = false;
options.toolbar.showAboutButton = false;
options.exports.showExportToPdf = true;
options.exports.ShowExportToWord2007 = true;
var viewer = new Stimulsoft.Viewer.StiViewer(options);
viewer.report = report;
</script>
...
Please note that all dashboard elements have their own save options and full-screen buttons for preview. There are no special options to control displaying them, but they can be disabled through the properties of the element. The code below should be added after loading the report before passing it to the viewer.
Default.aspx.cs
...
var dbsElementInteraction = report.getComponentByName("RegionMap1").dashboardInteraction;
dbsElementInteraction.showFullScreenButton = false;
dbsElementInteraction.showSaveButton = false;
...
Main settings (without groups)
| Name | Description |
|---|---|
width |
Sets the width of the component in “px” or “%”. |
height |
Sets the height of the component in “px” or “%”. Works only in the mode if the options.appearance.scrollbarsMode property is set to true. |
Appearance
| Name | Description |
|---|---|
appearance.theme |
Specifies the theme of the viewers’ layout. The list of available themes can be found in the StiViewerTheme enumeration. The default value is Office2022WhiteBlue. |
appearance.backgroundColor |
Sets the background color of the viewer. By default. it is set to Stimulsoft.System.Drawing.Color.white. |
appearance.pageBorderColor |
Sets the border color of the viewer. By default, it is set to Stimulsoft.System.Drawing.Color.gray. |
appearance.rightToLeft |
Sets the Right to Left mode for viewer controls. By default, the property is set to false. |
appearance.fullScreenMode |
Sets the full-screen display mode of the viewer. By default, the property is set to false. |
appearance.scrollbarsMode |
Sets the preview mode with scrollbars. By default, the property is set to false. |
appearance.openLinksWindow |
Sets the target window to open links contained in the report. By default, it is set to ‘_blank’ (new window). It can have one of the standard values ‘_blank’, ‘_self’, ‘_top’, as well as the name of the window or frame. |
appearance.showTooltips |
Enables displaying tips for the viewer controls when the mouse hovers over. By default, the property is set to true. |
appearance.showTooltipsHelp |
Sets a value which indicates that show or hide the help link in tooltips. By default, the property is set to true. |
appearance.showDialogsHelp |
Sets a value which indicates that show or hide the help button in dialogs. By default, the property is set to true. |
appearance.pageAlignment |
Sets the position of the report page in the viewer window. - Stimulsoft.Viewer.StiContentAlignment.DefaultValue - page alignment is determined from the template settings (default value); - Stimulsoft.Viewer.StiContentAlignment.Left – the page will be aligned left; - Stimulsoft.Viewer.StiContentAlignment.Center – the page will be centered; - Stimulsoft.Viewer.StiContentAlignment.Right – the page will be aligned right. |
appearance.showPageShadow |
Enables displaying shadow for report pages. By default, the property is set to true. |
appearance.bookmarksPrint |
Enables printing of report bookmarks (besides the report itself). By default, the property is set to false. |
appearance.bookmarksTreeWidth |
Sets the width of the bookmarks panel in pixels. By default, the width is 180 pixels. |
appearance.parametersPanelMaxHeight |
Sets the maximum height of the parameters bar in pixels. By default, the maximum height is 300 pixels. |
appearance.parametersPanelColumnsCount |
Sets the number of columns to display report parameters. By default, it is set to 2 columns. |
appearance.parametersPanelSortDataItems |
Gets or sets a value which indicates that variable items will be sorted. By default the property is set to true. |
appearance.parametersPanelDateFormat |
Sets the date and time format for variables of the corresponding type in the parameters panel. By default, the property is set to String.empty. |
appearance.reportDisplayMode |
Sets the export mode for displaying report pages. It can take one of the following values of the reportDisplayMode enumeration: - FromReport - the export mode of the report elements is defined from report template settings - Div or Table (default value); - Table – report elements are exported using HTML tables; - Div – report elements are exported using DIV markup. |
appearance.interfaceType |
Sets the type of interface used for the viewer. It can take one of the following values: - Stimulsoft.Viewer.StiInterfaceType.Auto – the viewer’s interface is determined automatically depending of the device that is report is displayed on (default value); - Stimulsoft.Viewer.StiInterfaceType.Mouse – the standard interface with a mouse control will be used for all the screen types; - Stimulsoft.Viewer.StiInterfaceType.Touch – the Touch interface will be used to control the viewer. The interface design was optimized for the ‘touchscreen’ display types. The viewer interface elements have been increased in size to simplify the control of the viewer and to improve its usability; - Stimulsoft.Viewer.StiInterfaceType.Mobile – the Mobile interface will be used to control the viewer for all screen types. The Mobile interface was designed to control the viewer using the mobile smartphone display. This interface design was simplified and adapted to use on smartphones. |
appearance.allowMobileMode |
Enables or disables displaying a report or dashboard in the mobile mode. If the option is set to false, then the mobile view will not be used. If the option is set to true, the mobile view mode will be used when opening the viewer on mobile devices. By default, the option is set to true. |
appearance.chartRenderType |
Sets the chart displaying mode on the report page. - Stimulsoft.Viewer.StiChartRenderType.AnimatedVector – charts are displayed in the vector mode as an SVG object, the chart elements are displayed with animation (set by default). - Stimulsoft.Viewer.StiChartRenderType.Vector – charts are displayed in the vector mode as an SVG object; |
appearance.datePickerFirstDayOfWeek |
Sets the first day of week in the date picker. - Stimulsoft.Viewer.StiFirstDayOfWeek.Auto- Sets Monday or Sunday as the first day depending on the browser culture default value); - Stimulsoft.Viewer.StiFirstDayOfWeek.Monday - Sets Monday as the first day of the week; - Stimulsoft.Viewer.StiFirstDayOfWeek.Sunday - Sets Sunday as the first day of the week. |
appearance.datePickerIncludeCurrentDayForRanges |
Sets a value, which indicates that the current day will be included in the ranges of the date picker. By default the property is set to false. |
appearance.allowScrollZoom |
Sets a value which allows changing the viewer’s zoom level using the mouse scroll wheel. By default the property is set to true. |
appearance.allowTouchZoom |
Sets a value which allows touch zoom in the viewer. By default the property is set to true. |
appearance.combineReportPages |
Sets a value which indicates that if a report contains several pages, then they will be combined in preview. By default the property is set to false. |
appearance.allowPropagationEvents |
Allows the propagation of key press events when the report viewer is not in focus. By default, the property is set to true. |
appearance.dashboardFilterElementItemHeight |
Sets the height in pixel of the checkbox in the List Box dashboard element. |
Toolbar
| Name | Description |
|---|---|
toolbar.visible |
Enables displaying the viewer toolbar. By default, the property is set to true. |
toolbar.displayMode |
Specifies the display mode of the toolbar of the viewer. It can take one of the following values of the displayMode enumeration: - Simple - all controls are located on the same control panel (default value); - Separated - the control panel is split into top and bottom panels. |
toolbar.backgroundColor |
Sets the color of the viewer toolbar. By default, the property is set to Stimulsoft.System.Drawing.Color.empty. |
toolbar.borderColor |
Sets the color of the borders of the Viewer toolbar. By default, the property is set to Stimulsoft.System.Drawing.Color.empty. |
toolbar.fontColor |
Sets the text color for the toolbar and the viewer menu. By default, the property is set to Stimulsoft.System.Drawing.Color.empty. |
toolbar.fontFamily |
Sets the font for the toolbar and the viewer menu. By default, the property is set to ‘Arial’. |
toolbar.alignment |
Sets the alignment mode for the controls on the viewer toolbar. - Stimulsoft.Viewer.StiContentAlignment.Default – the alignment depends on the RightToLeft property (set by default). - Stimulsoft.Viewer.StiContentAlignment.Left – elements will be aligned left; - Stimulsoft.Viewer.StiContentAlignment.Center – elements will be centered; - Stimulsoft.Viewer.StiContentAlignment.Right – elements will be aligned right. |
toolbar.showButtonCaptions |
Enables text of the buttons on the toolbar of the viewer. By default, the property is set to true. |
toolbar.showOpenButton |
Enables displaying the Open button on the toolbar of the viewer when viewing reports or dashboards. By default, the property is set to true. |
toolbar.showPrintButton |
Enables showing the button - Print - on the toolbar of the viewer. By default, the property is set to true. |
toolbar.showSaveButton |
Enables displaying the Save button on the toolbar of the viewer when viewing reports or dashboards.. By default, the property is set to true. |
toolbar.showSendEmailButton |
Enables showing the button - Send Email - on the toolbar of the viewer. By default, the property is set to false. Also, you should add the onEmailReport event handler. |
toolbar.showFindButton |
Sets a visibility of the Find button in the toolbar of the viewer. By default, the property is set to true. |
toolbar.showBookmarksButton |
Enables showing the button - Bookmarks - on the toolbar of the viewer. By default, the property is set to true. If the button is hidden, the bookmarks panel will not be displayed even if there are bookmarks in the report. |
toolbar.showParametersButton |
Enables showing the button - Parameters - on the toolbar of the viewer. By default, the property is set to true. If the button is hidden, the parameters panel will not be displayed even if there are parameters in the report. |
toolbar.showResourcesButton |
Enables showing the button - Resources - on the toolbar of the viewer. By default, the property is set to true. If the button is hidden, the resources panel will not be displayed even if there are resources in the report. |
toolbar.showEditorButton |
Enables showing the button - Editor - on the toolbar of the viewer. By default, the property is set to true. |
toolbar.showFullScreenButton |
Enables displaying the Full Screen button on the toolbar of the viewer when viewing reports or dashboards. By default, the property is set to true. |
toolbar.showRefreshButton |
Sets a visibility of the Refresh button in the toolbar of the viewer. By default, the property is set to true. |
toolbar.showFirstPageButton |
Enables showing the button - First Page - on the toolbar of the viewer. By default, the property is set to true. |
toolbar.showPreviousPageButton |
Enables showing the button - Previous Page - on the toolbar of the viewer. By default, the property is set to true. |
toolbar.showCurrentPageControl |
Enables showing the current report page indicator. By default, the property is set to true. |
toolbar.showNextPageButton |
Enables showing the button - Next Page - on the toolbar of the viewer. By default, the property is set to true. |
toolbar.showLastPageButton |
Enables showing the button - Last Page - on the toolbar of the viewer. By default, the property is set to true. |
toolbar.showZoomButton |
Enables showing the Zoom button. By default, the property is set to true. |
toolbar.showViewModeButton |
Enables showing the button for selecting the display mode of report pages. By default, the property is set to true. |
toolbar.showDesignButton |
Enables displaying the Design button on the toolbar of the viewer when viewing reports or dashboards. By default, the property is set to true. |
toolbar.showAboutButton |
Enables showing the button - About - on the toolbar of the viewer. By default, the property is set to true. |
toolbar.showPinToolbarButton |
Sets a visibility of the Pin button in the toolbar of the viewer in mobile mode. By default, the property is set to true. |
toolbar.printDestination |
Sets the report printing mode. It can take one of the following values of the StiPrintDestination enumeration: - Default – a menu with a choice of printing modes will be displayed (default value); - Pdf – printing will be done to the PDF format; - Direct – printing will be done to the HTML format directly to the printer, the system print dialog will be displayed; - PopupWindow – printing will be done in the HTML format via the preview window of the report. |
toolbar.viewMode |
Sets the mode for displaying report pages. - Stimulsoft.Viewer.StiWebViewMode.OnePage – displays one page of the report selected in the toolbar of the viewer (the default value); - Stimulsoft.Viewer.StiWebViewMode.Continuous – displays all pages of the report; - Stimulsoft.Viewer.StiWebViewMode.MultiplePages – displays all report pages as a table. |
toolbar.zoom |
Sets the zoom for displaying report pages. The default setting is 100 percent. The values are from 10 to 500 percent. You can also set one of the following values: - Stimulsoft.Viewer.StiZoomMode.PageWidth– when the viewer runs, the zoom, necessary to display the report by the page width, will be set; - Stimulsoft.Viewer.StiZoomMode.PageHeight – when the viewer runs, the zoom, required to display the page height of the report, will be set. |
toolbar.menuAnimation |
Enables animation when the viewer menu shows/hides. By default, the property is set to true. |
toolbar.showMenuMode |
Sets the display mode of the viewer menu. It can take one of the following values of the StiShowMenuMode enumeration: - Stimulsoft.Viewer.StiShowMenuMode.Click – shows menu by mouse click (default value); - Stimulsoft.Viewer.StiShowMenuMode.Hover – shows menu by hovering the mouse cursor. |
toolbar.autoHide |
Sets a value which allows automatically hide the viewer toolbar in mobile mode. By default, the property is set to false. |
Exports
| Name | Description |
|---|---|
export.storeExportSettings |
Sets a value which allows store the export settings in the cookies. By default, the property is set to true. |
exports.showExportDialog |
Enables showing export options dialog box. If the property is set to false, the export will be done with the default settings. By default, the property is set to true. |
exports.showExportToDocument |
Enables the export menu item - Document File. By default, the property is set to true. |
exports.showExportToPdf |
Enables displaying the Adobe PDF file export menu item when viewing reports, and the Adobe PDF item when viewing dashboards. By default, the property is set to true. |
exports.showExportToXps |
Enables the export menu item - XPS File. By default, the property is set to false. |
exports.showExportToHtml |
Enables the export menu item - HTML File. By default, the property is set to true. |
exports.showExportToHtml5 |
Enables the export menu item - HTML5 File. By default, the property is set to true. |
exports.showExportToWord2007 |
Enables the export menu item - Microsoft Word 2007/2010 File. By default, the property is set to true. |
exports.showExportToExcel2007 |
Enables displaying the Microsoft Excel 2007/2010 File export menu item when viewing reports, and the Microsoft Excel item when viewing dashboards. By default, the property is set to true. |
exports.showExportToCsv |
Enables the export menu item - CSV. By default, the property is set to true. |
exports.showExportToJson |
Enables the export menu item - JSON. By default, the property is set to false. |
exports.showExportToText |
Enables the export menu item - Text File. By default, the property is set to true. |
exports.showExportToOpenDocumentWriter |
Enables the export menu item - OpenDocument Writer File. By default, the property is set to true. |
exports.showExportToOpenDocumentCalc |
Enables the export menu item - OpenDocument Calc File. By default, the property is set to true. |
exports.showExportToPowerPoint |
Enables the export menu item - Microsoft PowerPoint File. By default, the property is set to true. |
exports.showExportToImageSvg |
Enables displaying the Image export menu item, with the ability to export the report to an SVG file. By default, the property is set to true. |
| Name | Description |
|---|---|
email.showEmailDialog |
Enables displaying settings for sending the report via email. If the dialog box is disabled, the email will be sent with the settings set on the server side in the onEmailReport event. By default, the property is set to true. |
email.showExportDialog |
Enables displaying export options dialog box when sending email. If the property is set to false, the export will be done with the default settings. By default, the property is set to true. |
email.defaultEmailAddress |
Sets the default recipient email, i.e. the address to which the email with the attached report will be sent. |
email.defaultEmailSubject |
Sets the default email subject (header). |
email.defaultEmailMessage |
Sets the default email message (text). |