Using Javascript with the HTML Viewer

Show All

Hide All

To use JavaScript with the WebViewer, initialize the WebViewer's view model using the clientId returned from the WebViewer, and subscribe to its Loaded event. Once you initialize the view model, you can access its API methods and properties to modify the WebViewer. You can also use the same view model to access the API for the side bar search panel and the toolbar.

The WebViewer raises the Loaded event to notify listeners that internal initialization is complete. The following code subscribes to the Loaded event of the viewer with the specified clientId.

$(document).ready(function () {

      $('#' + clientId).bind('loaded', function(){

        ...

      });

    });

Note: You can get the ClientId from the WebViewer control. By default, it's WebViewer1.

To work with the API, first initialize the viewer's view model using the GetViewModel(clientId) function. The clientId is the WebViewer control's name, by default, WebViewer1. If there is no ViewerViewModel with the requested clientId, an exception occurs.

Use code like the following to initialize the ViewerViewModel:

var viewModel = GetViewModel(clientId);

Now you can access API methods and properties using the viewModel variable.

Methods/Properties	Example	Description
Sidebar	`viewModel.Sidebar;`	Gets the Sidebar view model.
Toolbar	`viewModel.Toolbar;`	Gets the Toolbar view model.
PageLoaded	`viewModel.PageLoaded;`	Gets a Boolean value indicating whether the page is loaded.
Export	`viewModel.Export(exportType, callback, saveAsDialog, settings);viewModel.Export(ExportType.Pdf, callback, true, {FileName:"report.pdf"});`	Exports the loaded page to the specified format. In order to export without any errors, the PageLoaded() property must be True. exportType: Requested output format. callback: Function which obtains the URI of the exported document. saveAsDialog: Optional request to show save as dialog after export. settings: Optional export settings. Here you can specify the exported file name. Note that the FileName keyword is case sensitive. Note: ExportType is an Enumeration. `var ExportType = { Pdf, Html, Word, Xls, Xml };`
Print	`viewModel.Print();`	Prints the report using pdf printing. In order to print without any errors the PageLoaded() property must be True.
RenderMode	`viewModel.RenderMode = "Galley";`	Provides viewer mode: Paginated: displays a report in which data is displayed in discrete pages Galley: displays an RDL report by removing automatic page breaks from a report and displaying data in a single scrollable page. This mode maintains page breaks you create in the report.

The SidebarViewModel allows you to use its properties and methods to get the current state and show or hide the sidebar and panels within the sidebar.

Use code like the following to get the SidebarViewModel from the ViewerViewModel:

var sideBarModel = viewModel.Sidebar;

Now you can access API methods and properties using the sideBarModel variable.

Methods/Properties	Example	Description
IsSidebarVisible	`sideBarModel.IsSidebarVisible = false;`	Gets or sets a Boolean value indicating whether the Sidebar is visible.
HideShowSidebar	`sideBarModel.HideShowSidebar();`	Toggles the visibility of the Sidebar.
IsBookmarksPaneVisible	`sideBarModel.IsBookmarksPaneVisible = false;`	Gets or sets a Boolean value indicating whether the Bookmarks Pane is visible.
ShowBookmarksPane	`sideBarModel.ShowBookmarksPane();`	Toggles the visibility of the Bookmarks Pane.
IsParametersPaneVisible	`sideBarModel.IsParametersPaneVisible = false;`	Gets or sets a Boolean value indicating whether the Parameters Pane is visible.
ShowParametersPane	`sideBarModel.ShowParametersPane();`	Toggles the visibility of the Parameters Pane.
IsSearchPaneVisible	`sideBarModel.IsSearchPaneVisible = false;`	Gets or sets a Boolean value indicating whether the Search Pane is visible.
ShowSearchPane	`sideBarModel.ShowSearchPane();`	Toggles the visibility of the Search Pane.
HideAll	`sideBarModel.HideAll();`	Hides all Sidebar Panes.

Walkthroughs

Customizing the HTML Viewer UI