@nexterajs/report-viewer

An Angular viewer for reports served by Nextera.Reports.Angular.NetCore. The server renders each report once and keeps it; the viewer asks for the pages it shows and places each one in its own shadow root, so a report's styles never reach the application around it.

Its inputs, outputs and api are the ones stimulsoft-viewer-angular has, so a host swaps the component and keeps its bindings.

Install

npm install @nexterajs/report-viewer

Angular 22 and RxJS 7.8 are peer dependencies. The viewer sends its requests through the application's HttpClient, so the application's interceptors apply — provide HttpClient as usual.

Use

import { NxeReportViewerComponent } from '@nexterajs/report-viewer';

@Component({
  imports: [NxeReportViewerComponent],
  template: `
    <nxe-report-viewer
      requestUrl="/api/core/{action}"
      action="generate-report?id1=INVOICE"
      width="100%"
      height="800px"
      (loaded)="onLoaded()"
      (error)="onError($event)"
    />
  `,
})
export class ReportPageComponent {}

requestUrl is the URL of every request, with {action} in place of the host action it goes to. action is the host action that answers the first request, and so names the report to open. On the server, that action calls NexteraAngularViewer.ViewerDataResult, and the two actions it names in its options answer the rest — see docs/viewer-protocol.md in nexteradigital/nextera-report.

Inputs

| Input | What it is | |---|---| | requestUrl | Each request's URL, with {action} in it | | action | The host action that opens the report | | properties | Sent to the host with every request, as JSON, when truthy | | width | The viewer's width; 100% when not given | | height | The viewer's height; 650px when the report panel scrolls, else 100% | | backgroundColor | The viewer's background; White when not given | | style | Styles for the viewer's root; width, height and background take precedence | | postParametersFunction | Called for every request; each key of an object it returns becomes a form field |

A change to any input reloads the report, as Stimulsoft's viewer does.

Outputs

| Output | Payload | |---|---| | loaded | Fires after each report is loaded | | error | The failure the viewer put on show (NxeViewerFailure) |

api

viewer.api.currentPage reads and writes the 0-based page on screen; pagesCount and reportType are read-only.

What this version does

Opening a report, showing its pages, and the toolbar Stimulsoft's viewer draws, with the same rules for what is shown and enabled: paging with the first / previous / next / last buttons and the page box; zoom (fixed percentages, Page Height and Page Width); the Single Page, Continuous and Multiple Pages view modes; Find, with Match Case and Match Whole Word; and Save to PDF or HTML, for the formats the server turns on. The page frame follows the server's options (pageAlignment, showPageShadow, pageBorderColor, scrollbarsMode). Failures are shown and announced, an expired report is rendered again, and an open viewer keeps its report alive on the server.

Not here yet: bookmarks, parameters, print, open, email, full screen, the editor, themes and translations of the viewer's own captions. Each arrives with its task in BACKLOG.md (Stage 2) in nexteradigital/nextera-report.

Development

npm run build:report-viewer
npm run test:report-viewer
npm run protocol:check

The specs replay conversations recorded against the real server by the report repository (tests/protocol in nexteradigital/nextera-report). The copy in testing/protocol is written only by the sync script, and CI checks it against the SHA-256 manifest it came with. To take a new recording:

node tools/report-protocol/sync.mjs --from <path to the nextera-report checkout>