Document Viewer's Client-Side Configuration (Angular)

• Apr 03, 2020
• 3 minutes to read

You can use the dx-report-viewer component to integrate the Web Document Viewer into your Angular-based application.

Root Options

The table below lists the dx-report-viewer component’s options:

Option	Required / Optional	Description
reportUrl	Required	A string or Knockout observable that specifies the initial report’s URL.
width	Optional	A string that defines the Document Viewer’s width. The default value is ‘100%’.
height	Optional	A string that defines the Document Viewer’s height. The default value is ‘700px’.
cssClass	Optional	A string that specifies the CSS class name to attach to the root div element.
isMobile	Optional	A boolean value that specifies whether to configure the Document Viewer for mobile devices. See Mobile Mode for more information on this Viewer version.
rtl	Optional	A boolean value that specifies whether a right-to-left layout is enabled in the Document Viewer’s UI.

Nested Options

dxrv-request-options - A nested component that allows you to specify where to send requests from the Document Viewer.

Option	Required / Optional	Description
host	Required	A server-side project’s URI.
invokeAction	Required	The URI path of the controller action that processes requests.
getLocalizationAction	Optional	The URI path of the controller action used to customize localization strings.

dxrv-remote-settings - A nested component that enables you to configure the Web Document Viewer to display documents that are created remotely with the DevExpress Report and Dashboard Server.

Option	Required / Optional	Description
serverUri	Required	Specifies the Report and Dashboard Server URI.
authToken	Required	Specifies the Bearer token to access documents on the Report and Dashboard Server.

dxrv-mobile-mode-settings - A nested component that provides options for the Web Document Viewer’s mobile mode (if the root isMobile option is enabled).

Option	Required / Optional	Description
readerMode	Optional	Specifies whether to enable the reader mode that displays document pages without page borders.
animationEnabled	Optional	Specifies whether actions are animated.

dxrv-tabpanel-setting - A nested component that allows you to customize the Document Viewer’s tab panel.

Option	Required / Optional	Description
position	Optional	Specifies the tab panel’s position (“Left” or “Right”).
width	Optional	Specifies the tab panel’s width.

dxrv-callbacks - A nested component that provides callbacks to customize the Document Viewer. These callbacks correspond to the client-side events at the Document Viewer control’s level. Refer to the Document Viewer's Client-Side API topic for a list of available events and how they are used.

Note

• The Document Viewer passes only one argument (the $event object) to callback handlers. This argument contains the sender and args properties.

• The sender object is the Document Viewer’s JavaScript equivalent. It provides access to all available client-side methods.

Usage

The following code snippet demonstrates how to use the dx-report-viewer component in a View:

HTML

 <div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px" cssClass='myViewer'>
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl"></dxrv-request-options>
        <dxrv-tabpanel-settings width="500" position="Left"></dxrv-tabpanel-settings>
        <dxrv-callbacks 
        (CustomizeMenuActions)="CustomizeMenuActions($event)">
        </dxrv-callbacks>
    </dx-report-viewer>
</div>

Specify the component’s options and event handlers in the View Model as shown below:

TS

import DevExpress from 'devexpress-reporting/dx-web-document-viewer'

// ...

export class AppComponent {
  reportUrl: string = 'InvoiceReport';
  hostUrl: string = 'http://localhost:10000/';
  invokeAction: string = 'WebDocumentViewer/Invoke';

  CustomizeMenuActions(event) {
    // For demonstration purposes, get the "Search" action and hide it. 
    var searchAction = event.args.GetById(DevExpress.Reporting.Viewer.ActionId.Search);
    if (searchAction)
      searchAction.visible = false;
  }
}