Table of Contents
Note

This documentation describes the ReportViewer Vue component for native UI views, for Xml templates see report-viewer.

ReportViewer

Renders a report viewer inside a WebView, intercepting internal navigation links to open them via the Neos navigation system.

Import

import { ReportViewer } from '@neos/app'

Props

Prop Type Default Description
options ReportViewerOptions — Required. Report viewer configuration (report name, parameters, etc.)

Types

import type { ReportViewerOptions } from '@neos/app'

Usage Examples

Basic report viewer

const reportOptions: ReportViewerOptions = {
  report: 'SalesReport',
  parameters: {
    startDate: '2024-01-01',
    endDate: '2024-12-31',
    customerId: currentCustomerId.value
  }
}

<ReportViewer :options="reportOptions" />

In a modal

<Modal v-model:is-open="showReport" size="xlarge">
  <template #body>
    <ReportViewer :options="{ report: 'InvoiceDetail', parameters: { invoiceId: invoice.id } }" />
  </template>
</Modal>

See Also