Adding a Custom Component to the Designer / Reports.NET / .NET Framework

You can extend the designer with your own report components that users can drop onto a report like any built-in element.

Adding a Custom Function / Reports.JS / HTML

You can extend the report engine with your own functions that authors call from expressions in the designer.

Adding a Custom Function to the Designer / Reports.WEB / .NET 6.0 Razor

You can extend the report engine with your own functions that users call from expressions in the web designer.

Adding a Custom Function to the Designer / Reports.BLAZOR / Server

Add a custom function to the expression engine and call it from a report template during rendering.

Adding a Custom Function to the Designer / Reports.BLAZOR / Web Assembly

Add a custom function to the expression engine and call it from a report template during rendering.

Adding a Custom Function to the Designer / Reports.WEB / .NET 6.0

You can extend the report engine with your own functions that users can call from expressions in the web designer.

Adding a Custom Function to the Designer / Reports.WEB / .NET 8.0

You can extend the report engine with your own functions that users can call from expressions in the web designer.

Adding a Font to the Resource / Reports.WEB / .NET 6.0 Razor

Fonts can be embedded into a report as resources so the document renders and exports identically regardless of the fonts installed on the server.

Adding a Font to the Resource / Reports.JS / Angular

A custom font can be embedded into the report as a resource, so it travels with the template.

Adding a Font to the Resource / Reports.JS / HTML

Fonts can be embedded into a report as resources so it renders identically everywhere. This example adds a TrueType font to the report dictionary.

Adding a Font to the Resource / Reports.JS / React

A custom font can be embedded into the report as a resource, so it travels with the template.

Adding a Font to the Resource / Reports.JS / Node.js

Fonts can be embedded into the report as resources so exported files render identically on any server.

Adding a Font to the Resource / Reports.JS / Vue 3

A custom font can be embedded into the report as a resource, so it travels with the template.

Adding a Font to the Resource / Reports.WPF / .NET 6.0

Fonts can be embedded into a report as resources so it renders and exports identically on machines where the font is not installed.

Adding a Font to the Resource / Reports.WPF / .NET 8.0

Fonts can be embedded into a report as resources so it renders and exports identically on machines where the font is not installed.

Adding a Font to the Resource / Reports.WPF / .NET Framework

Fonts can be embedded into a report as resources so it renders and exports identically on machines where the font is not installed.

Adding a Font to the Resource / Reports.NET / .NET 6.0

Register the required resource in .NET 6.0 so the report renders consistently in every environment.

Adding a Font to the Resource / Reports.NET / .NET 8.0

Register the required resource in .NET 8.0 so the report renders consistently in every environment.

Adding a Font to the Resource / Reports.NET / .NET Framework

Register the required resource in .NET Framework so the report renders consistently in every environment.

Adding a Font to the Resource / Reports.WEB / .NET 6.0

Fonts can be embedded into a report as resources so the document renders and exports identically regardless of the fonts installed on the server.

Adding a Font to the Resource / Reports.WEB / .NET 8.0

Fonts can be embedded into a report as resources so the document renders and exports identically regardless of the fonts installed on the server.

Assigning a Report to the Viewer / Reports.JS / HTML

The Reports.JS viewer displays a report entirely in the browser. This example creates a viewer, loads a report, and shows it.

Change Theme in Avalonia / Reports.AVALONIA / .NET 6.0

Stimulsoft integrates with Avalonia's light/dark theming. This example switches the application theme and applies the matching Stimulsoft appearance.

Change Theme in Avalonia / Reports.AVALONIA / .NET 8.0

Stimulsoft integrates with Avalonia's light/dark theming. This example switches the application theme and applies the matching Stimulsoft appearance.

Changing an Export Settings on the Server-Side / Reports.PHP / PHP

Export settings can be adjusted on the server when the user exports from the viewer, through the onBeginExportReport event.

Changing an Export Settings on the Server-Side / Reports.PYTHON / Python

Export settings can be adjusted on the server when the user exports from the viewer, through the onBeginExportReport event.

Changing Database Type / Reports.WEB / .NET 6.0

A report's data connection can be swapped for a different database type at run time without editing the template.

Changing Database Type / Reports.WEB / .NET 8.0

A report's data connection can be swapped for a different database type at run time without editing the template.

Changing Report Properties on the Server-Side / Reports.PHP / PHP

A report's template is JSON, so you can modify its properties on the server before rendering.

Changing the Designer Options / Reports.BLAZOR / Server

The Blazor designer is configured the same way as the viewer, through an options object and a theme.

Changing the Designer Options / Reports.BLAZOR / Web Assembly

The Blazor designer is configured the same way as the viewer, through an options object and a theme.

Changing the Designer Theme / Reports.JS / HTML

Embed the report designer in JavaScript, load a template, and connect its editing and save actions.

Changing the Designer Theme / Reports.JS / React

The report designer is available as a React component too, and it also supports themes. This example applies a theme to the designer.

Changing the Designer Theme / Reports.JS / Angular

The report designer is available as a component too, and it also supports themes. This example applies a theme to the designer.

Changing the Designer Theme / Reports.JS / Vue 3

The report designer is available as a component too, and it also supports themes. This example applies a theme to the designer.

Changing the Viewer and Designer Theme / Reports.WPF / .NET Framework

The WPF viewer and designer support light and dark themes and configurable accent colors. This example switches their appearance at run time.

Changing the Viewer and Designer Theme / Reports.NET / .NET Framework

Embed the report designer in .NET Framework, load a template, and connect its editing and save actions.

Changing the Viewer Options / Reports.BLAZOR / Server

The viewer's appearance, toolbar, size and theme can all be configured. This example sets several options and a theme on the component.

Changing the Viewer Options / Reports.BLAZOR / Web Assembly

The viewer's appearance, toolbar, size and theme can all be configured. This example sets several options and a theme on the component.

Changing the Viewer Options from the Controller / Reports.WEB / .NET 6.0

Set up the report viewer in .NET 6.0, load a template, and connect the component to the application.

Changing the Viewer Options from the Controller / Reports.WEB / .NET 8.0

Set up the report viewer in .NET 8.0, load a template, and connect the component to the application.

Changing the Viewer Theme / Reports.WEB / .NET 6.0 Razor

The web viewer ships with a set of visual themes and appearance options. This example changes the viewer's theme and background color.

Changing the Viewer Theme / Reports.JS / HTML

Set up the report viewer in JavaScript, load a template, and connect the component to the application.

Changing the Viewer Theme / Reports.JS / React

The viewer supports many visual themes, selected through options. This example applies a theme to the React viewer component.

Changing the Viewer Theme / Reports.JS / Angular

Set up the report viewer in Angular, load a template, and connect the component to the application.

Changing the Viewer Theme / Reports.JS / Vue 3

Set up the report viewer in Vue 3, load a template, and connect the component to the application.

Changing the Viewer Theme / Reports.PHP / PHP

The viewer supports many themes and appearance options, set on the PHP options object. This example applies a dark theme and tunes the toolbar.

Changing the Viewer Theme / Reports.WEB / .NET 6.0

The web viewer ships with a set of visual themes and configurable appearance options. This example changes the viewer's theme and background color.

Changing the Viewer Theme / Reports.WEB / .NET 8.0

The web viewer ships with a set of visual themes and configurable appearance options. This example changes the viewer's theme and background color.

Changing the Viewer Theme / Reports.PYTHON / Python

Set up the report viewer in Python, load a template, and connect the component to the application.

Configuring and Installing Node.js / Reports.PYTHON / Python

The server-side engine relies on Node.js, which the SDK can install for you. This example installs Node.js and updates the required packages.

Configuring and Installing NodeJs / Reports.PHP / PHP

The server-side engine relies on Node.js, which the SDK can install for you. This example installs Node.js and updates the required packages.

Configuring Report caching / Reports.WEB / .NET 6.0 Razor

Caching keeps a rendered report on the server between requests, so paging and exporting do not re-render it every time.

Configuring Report caching / Reports.WEB / .NET 6.0

Caching keeps a rendered report on the server between requests, so paging and exporting do not re-render it every time.

Configuring Report caching / Reports.WEB / .NET 8.0

Caching keeps a rendered report on the server between requests, so paging and exporting do not re-render it every time.

Connecting to Data from Code / Reports.WPF / .NET 6.0

A report's data can be supplied entirely from code. This example builds a dataset from JSON and registers it with the report before showing it.

Connecting to Data from Code / Reports.WPF / .NET 8.0

A report's data can be supplied entirely from code. This example builds a dataset from JSON and registers it with the report before showing it.

Connecting to Data from Code / Reports.WPF / .NET Framework

A report's data can be supplied entirely from code. This example builds a dataset from JSON and registers it with the report before showing it.

Connecting to Data from Code / Reports.NET / .NET 6.0

Reports are usually bound to data at design time, but you can also supply the data entirely from code.

Connecting to Data from Code / Reports.NET / .NET 8.0

Reports are usually bound to data at design time, but you can also supply the data entirely from code.

Connecting to Data from Code / Reports.NET / .NET Framework

Reports are usually bound to data at design time, but you can also supply the data entirely from code.

Connecting to Data from Code / Reports.BLAZOR / Server

A report's data can be supplied and switched from Blazor code. This example loads a report and lets the user swap between two datasets.

Connecting to Data from Code / Reports.BLAZOR / Web Assembly

A report's data can be supplied and switched from Blazor code. This example loads a report and lets the user swap between two datasets.

Connecting to Data from Code / Reports.WEB / .NET 6.0

A report's data can be supplied entirely from the controller instead of being stored in the template.

Connecting to Data from Code / Reports.WEB / .NET 8.0

A report's data can be supplied entirely from the controller instead of being stored in the template.

Connecting to Data from Code / Reports.WEB / .NET 6.0 Razor

A report's data can be supplied from the page model instead of the template.

Copying Components Between Reports / Reports.JAVA / Java

Move reusable content between templates in Java without rebuilding the report structure by hand.

Creating a Custom Button on the Viewer Toolbar / Reports.WEB / .NET 6.0 Razor

The web viewer toolbar can be extended with your own buttons using its client-side JavaScript API.

Creating a Custom Button on the Viewer Toolbar / Reports.BLAZOR / Server

Set up the report viewer in Server, load a template, and connect the component to the application.

Creating a Custom Button on the Viewer Toolbar / Reports.BLAZOR / Web Assembly

Set up the report viewer in WebAssembly, load a template, and connect the component to the application.

Creating a Custom Button on the Viewer Toolbar / Reports.PHP / PHP

Set up the report viewer in PHP, load a template, and connect the component to the application.

Creating a Custom Button on the Viewer Toolbar / Reports.WEB / .NET 6.0

The web viewer toolbar can be extended with your own buttons using its client-side JavaScript API.

Creating a Custom Button on the Viewer Toolbar / Reports.WEB / .NET 8.0

The web viewer toolbar can be extended with your own buttons using its client-side JavaScript API.

Creating a Custom Parameter Panel for the Viewer / Reports.WEB / .NET 6.0 Razor

Instead of the built-in parameter panel, you can build your own HTML form and feed its values to the viewer through the client API.

Creating a Custom Parameter Panel for the Viewer / Reports.WEB / .NET 6.0

Instead of the built-in parameter panel, you can build your own HTML form and feed its values to the viewer.

Creating a Custom Parameter Panel for the Viewer / Reports.WEB / .NET 8.0

Instead of the built-in parameter panel, you can build your own HTML form and feed its values to the viewer.

Creating a new Data Connection from code / Reports.JS / Angular

A report can be connected to a data source entirely from code, without editing the template dictionary.

Creating a new Data Connection from code / Reports.JS / React

A report can be connected to a data source entirely from code, without editing the template dictionary.

Creating a new Data Connection from code / Reports.JS / Vue 3

A report can be connected to a data source entirely from code, without editing the template dictionary.

Creating Chart at Runtime / Reports.NET / .NET Framework

Build the report in .NET Framework from code by creating its structure and configuring the required components.

Creating Chart at Runtime / Reports.AVALONIA / .NET 6.0

Charts can be built from code and placed on a report page. This example creates a report with a chart at run time under Avalonia.

Creating Chart at Runtime / Reports.AVALONIA / .NET 8.0

Charts can be built from code and placed on a report page. This example creates a report with a chart at run time under Avalonia.

Creating Report at Runtime / Reports.JS / Angular

Build the report in Angular from code by creating its structure and configuring the required components.

Creating Report at Runtime / Reports.JS / React

Build the report in React from code by creating its structure and configuring the required components.

Creating Report at Runtime / Reports.JS / Vue 3

Build the report in Vue 3 from code by creating its structure and configuring the required components.

Creating Report at Runtime / Reports.WPF / .NET 6.0

Build the report in .NET 6.0 from code by creating its structure and configuring the required components.

Creating Report at Runtime / Reports.WPF / .NET 8.0

Build the report in .NET 8.0 from code by creating its structure and configuring the required components.

Creating Report at Runtime / Reports.WPF / .NET Framework

Build the report in .NET Framework from code by creating its structure and configuring the required components.

Creating Report at Runtime / Reports.JAVA / Java

Build the report in Java from code by creating its structure and configuring the required components.

Creating Report at Runtime / Reports.NET / .NET 6.0

Build the report in .NET 6.0 from code by creating its structure and configuring the required components.

Creating Report at Runtime / Reports.NET / .NET 8.0

Build the report in .NET 8.0 from code by creating its structure and configuring the required components.

Creating Report at Runtime / Reports.NET / .NET Framework

Build the report in .NET Framework from code by creating its structure and configuring the required components.

Creating Report at Runtime / Reports.AVALONIA / .NET 6.0

A report can be built entirely in code under Avalonia — pages, bands and components are objects you create.

Creating Report at Runtime / Reports.AVALONIA / .NET 8.0

A report can be built entirely in code under Avalonia — pages, bands and components are objects you create.

Creating Report with MySQL Database at Runtime / Reports.JAVA / Java

Prepare the data in Java, register it in the report dictionary, and render the template with those records.

Creating Report with Relations at Runtime / Reports.JAVA / Java

Register related data in Java, define the relation in the dictionary, and use it inside the report.

Customizing the Designer / Reports.JS / HTML

The designer interface can be trimmed down to just the features you want to expose. This example hides several toolbar items and component types.

Customizing the Designer / Reports.JS / React

Embed the report designer in React, load a template, and connect its editing and save actions.

Customizing the Designer / Reports.JS / Angular

Embed the report designer in Angular, load a template, and connect its editing and save actions.

Customizing the Designer / Reports.JS / Vue 3

Embed the report designer in Vue 3, load a template, and connect its editing and save actions.

Customizing the Viewer / Reports.JS / HTML

The viewer exposes many options for appearance and toolbar contents. This example tunes the toolbar, colors, zoom and size.

Customizing the Viewer / Reports.JS / React

The viewer's toolbar and export options can be trimmed to expose only the features you want. This example hides the Open button and the PDF export.

Customizing the Viewer / Reports.JS / Angular

The viewer toolbar and export options can be trimmed to expose only the features you want. This example hides the Open button and the PDF export.

Customizing the Viewer / Reports.JS / Vue 3

The viewer toolbar and export options can be trimmed to expose only the features you want. This example hides the Open button and the PDF export.

Customizing the Viewer / Reports.NET / .NET Framework

The embedded StiViewerControl exposes many properties that turn interface elements on and off, so you can tailor the preview to your application.

Customizing the Viewer / Reports.AVALONIA / .NET 6.0

The Avalonia StiViewerControl exposes properties to show or hide its interface elements. This example toggles toolbar buttons and panels from code.

Customizing the Viewer / Reports.AVALONIA / .NET 8.0

The Avalonia StiViewerControl exposes properties to show or hide its interface elements. This example toggles toolbar buttons and panels from code.

Drilling Down Report in Live / Reports.NET / .NET Framework

Interactive reports let a user click an element to open a related detailed report — a drill-down.

Drilling Down Report in Live / Reports.AVALONIA / .NET 6.0

Use .NET 6.0 code to drilling down report in live, with the required setup kept alongside the main API calls.

Drilling Down Report in Live / Reports.AVALONIA / .NET 8.0

Use .NET 8.0 code to drilling down report in live, with the required setup kept alongside the main API calls.

Editing a Report in the Designer / Reports.JS / Wisej.NET

The Reports.JS designer can be embedded in a Wisej.NET application the same way as the viewer, giving users a full report editor inside a C# web app.

Editing a Report in the Designer / Reports.PHP / Laravel

The Reports.PHP designer embeds in a Laravel application the same way as the viewer, letting users edit report templates in the browser.

Editing a Report Template in the Designer / Reports.JS / HTML

Reports.JS includes a full report designer that runs in the browser. This example opens the designer with a template loaded for editing.

Editing a Report Template in the Designer / Reports.WPF / .NET 6.0

Embed the report designer in .NET 6.0, load a template, and connect its editing and save actions.

Editing a Report Template in the Designer / Reports.WPF / .NET 8.0

Embed the report designer in .NET 8.0, load a template, and connect its editing and save actions.

Editing a Report Template in the Designer / Reports.WPF / .NET Framework

Embed the report designer in .NET Framework, load a template, and connect its editing and save actions.

Editing a Report Template in the Designer / Reports.NET / .NET 6.0

Your application can host the full Stimulsoft report designer so users edit templates themselves.

Editing a Report Template in the Designer / Reports.NET / .NET 8.0

Your application can host the full Stimulsoft report designer so users edit templates themselves.

Editing a Report Template in the Designer / Reports.NET / .NET Framework

Your application can host the full Stimulsoft report designer so users edit templates themselves.

Editing a Report Template in the Designer / Reports.BLAZOR / Server

Embed the report designer in Server, load a template, and connect its editing and save actions.

Editing a Report Template in the Designer / Reports.BLAZOR / Web Assembly

Embed the report designer in WebAssembly, load a template, and connect its editing and save actions.

Editing a Report Template in the Designer / Reports.PHP / PHP

The Reports.PHP designer runs in the browser, served by the PHP SDK. This example opens the designer with a template loaded for editing.

Editing a Report Template in the Designer / Reports.WEB / .NET 6.0

Besides the viewer, Stimulsoft provides a full web report designer that you can embed in an ASP.NET Core MVC application.

Editing a Report Template in the Designer / Reports.WEB / .NET 8.0

Besides the viewer, Stimulsoft provides a full web report designer that you can embed in an ASP.NET Core MVC application.

Editing a Report Template in the Designer / Reports.PYTHON / Python

Embed the report designer in Python, load a template, and connect its editing and save actions.

Editing a Report Template in the Designer / Reports.WEB / .NET 6.0 Razor

Embed the report designer in ASP.NET Core Razor Pages, load a template, and connect its editing and save actions.

Editing a Report Template in the Designer in an HTML template / Reports.PHP / PHP

As with the viewer, the designer's scripts and body can be emitted separately to fit your own HTML layout.

Editing a Report Template in the Designer in an HTML template / Reports.PYTHON / Python

The designer's scripts and body can be emitted separately to fit your own HTML template, just like the viewer.

Editing a Report Template in the Designer using JavaScript / Reports.PHP / PHP

The designer can be created entirely in JavaScript, with PHP acting only as the request handler. This example uses StiHandler on the server.

Exporting a Report from Code / Reports.JAVA / Java

Render the report in Java and export it directly from code, without opening the viewer.

Exporting a Report from Code / Reports.WPF / .NET 6.0

Render the report in .NET 6.0 and export it directly from code, without opening the viewer.

Exporting a Report from Code / Reports.WPF / .NET 8.0

Render the report in .NET 8.0 and export it directly from code, without opening the viewer.

Exporting a Report from Code / Reports.WPF / .NET Framework

Render a report and export it directly to a selected file format without opening the viewer — ideal for batches and scheduled jobs.

Exporting a Report from Code / Reports.NET / .NET 6.0

This example shows how to export a rendered report to a file without opening the viewer — useful for batch generation or server-side scenarios.

Exporting a Report from Code / Reports.NET / .NET 8.0

This example shows how to export a rendered report to a file without opening the viewer — useful for batch generation or server-side scenarios.

Exporting a Report from Code / Reports.NET / .NET Framework

This example shows how to export a rendered report to a file without opening the viewer — useful for batch generation or server-side scenarios.

Exporting a Report from Code / Reports.BLAZOR / Server

A report can be exported to a file and delivered to the browser without the viewer.

Exporting a Report from Code / Reports.BLAZOR / Web Assembly

A report can be exported to a file and delivered to the browser without the viewer.

Exporting a Report from Code / Reports.PHP / PHP

A report can be exported from PHP code to several formats. This example renders a report and exposes buttons that export it to PDF, Excel or HTML.

Exporting a Report from Code / Reports.AVALONIA / .NET 6.0

A report can be rendered and exported to a file from Avalonia code. This example loads a selected report and exports it after rendering.

Exporting a Report from Code / Reports.AVALONIA / .NET 8.0

A report can be rendered and exported to a file from Avalonia code. This example loads a selected report and exports it after rendering.

Exporting a Report from Code / Reports.PYTHON / Python

Render the report in Python and export it directly from code, without opening the viewer.

Exporting a Report from Code on the Server-Side / Reports.PHP / PHP

Server-side rendering can be followed by a server-side export. This example renders a report with the Node.js engine and exports it to text.

Exporting a Report from Code on the Server-Side / Reports.PYTHON / Python

Server-side rendering can be followed by a server-side export. This example renders a report with the Node.js engine and exports it to a file.

Exporting a Report from Code with Changing Export Settings / Reports.JS / Angular

Export output can be tuned through a settings object. This example exports to PDF while adjusting metadata, font embedding and a user password.

Exporting a Report from Code with Changing Export Settings / Reports.JS / React

Export output can be tuned through a settings object. This example exports to PDF while adjusting metadata, font embedding and a user password.

Exporting a Report from Code with Changing Export Settings / Reports.JS / Vue 3

Export output can be tuned through a settings object. This example exports to PDF while adjusting metadata, font embedding and a user password.

Exporting a Report from Code with Changing Export Settings / Reports.PHP / PHP

Server-side exports can be fine-tuned with a settings object. This example exports to PDF with custom metadata and saves it to a file.

Exporting a Report in a .NET MAUI Application / Reports.BLAZOR / .NET MAUI

Render the report in .NET MAUI and export it directly from code, without opening the viewer.

Exporting a Report to HTML / Reports.JS / HTML

This example renders a report and exports it to HTML — either receiving the HTML string for display in the page, or saving it as a file.

Exporting a Report to HTML / Reports.JS / Angular

Render the report in Angular and export it directly from code, without opening the viewer.

Exporting a Report to HTML / Reports.JS / React

Render the report in React and export it directly from code, without opening the viewer.

Exporting a Report to HTML / Reports.JS / Node.js

Render the report in Node.js and export it directly from code, without opening the viewer.

Exporting a Report to HTML / Reports.JS / Vue 3

Render the report in Vue 3 and export it directly from code, without opening the viewer.

Exporting a Report to PDF / Reports.JS / HTML

Render the report in JavaScript and export it directly from code, without opening the viewer.

Exporting a Report to PDF / Reports.JS / Angular

Render the report in Angular and export it directly from code, without opening the viewer.

Exporting a Report to PDF / Reports.JS / React

Render the report in React and export it directly from code, without opening the viewer.

Exporting a Report to PDF / Reports.JS / Node.js

Reports can be rendered and exported to PDF entirely on the server. This example renders a template and writes the PDF to a file.

Exporting a Report to PDF / Reports.JS / Vue 3

Render the report in Vue 3 and export it directly from code, without opening the viewer.

Exporting a Report to ZUGFeRD PDF / Reports.NET / .NET Framework

Render the report in .NET Framework and export it directly from code, without opening the viewer.

Exporting a Report with the Export Dialog / Reports.JAVA / Java

Render the report in Java and export it directly from code, without opening the viewer.

Exporting and Printing a Report from Code / Reports.WEB / .NET 6.0

You do not always need the viewer — a report can be printed or exported directly to the HTTP response.

Exporting and Printing a Report from Code / Reports.WEB / .NET 8.0

You do not always need the viewer — a report can be printed or exported directly to the HTTP response.

Exporting and Printing a Report from Code / Reports.WEB / .NET 6.0 Razor

A report can be printed or exported straight to the HTTP response without the viewer.

Exporting Many Files to Single PDF / Reports.JS / Angular

Render the report in Angular and export it directly from code, without opening the viewer.

Exporting Many Files to Single PDF / Reports.JS / React

Render the report in React and export it directly from code, without opening the viewer.

Exporting Many Files to Single PDF / Reports.JS / Vue 3

Render the report in Vue 3 and export it directly from code, without opening the viewer.

Exporting Many Files to Single PDF / Reports.NET / .NET Framework

Render the report in .NET Framework and export it directly from code, without opening the viewer.

Get a modified Report from the Designer / Reports.JS / React

When the user changes the report in the designer (for example creates a new one), the designer assigns a new report object.

Get a modified Report from the Designer / Reports.JS / Angular

When the user changes the report in the designer, it assigns a new report object.

Get a modified Report from the Designer / Reports.JS / Vue 3

When the user changes the report in the designer, it assigns a new report object.

Globalizing Report / Reports.JS / Angular

A report can be rendered for a specific culture, formatting numbers, dates and localized text accordingly.

Globalizing Report / Reports.JS / React

A report can be rendered for a specific culture, formatting numbers, dates and localized text accordingly.

Globalizing Report / Reports.JS / Vue 3

A report can be rendered for a specific culture, formatting numbers, dates and localized text accordingly.

Globalizing Reports / Reports.NET / .NET Framework

Globalization lets a single report template present its data in different cultures — number, date and currency formats follow the selected culture.

Globalizing Reports / Reports.AVALONIA / .NET 6.0

Globalization lets one report present its data in different cultures — number, date and currency formats follow the selected culture.

Globalizing Reports / Reports.AVALONIA / .NET 8.0

Globalization lets one report present its data in different cultures — number, date and currency formats follow the selected culture.

How to Activate the Product / Reports.PYTHON / Python

By default Reports.Python runs in trial mode (with a watermark). This example shows how to apply your license key to remove it.

How to Activate the Product / Reports.JS / Angular

The product license is applied from code before any report is used. This example shows where to set the license key or load it from a file.

How to Activate the Product / Reports.JS / React

The product license is applied from code before any report is used. This example shows where to set the license key or load it from a file.

How to Activate the Product / Reports.JS / Vue 3

The product license is applied from code before any report is used. This example shows where to set the license key or load it from a file.

How to Activate the Product / Reports.PHP / PHP

By default Reports.PHP runs in trial mode (with a watermark). This example shows the several ways to apply your license key to remove it.

Integrating the Report Components into a Django framework / Reports.JS / Python

This example integrates the Reports.JS viewer and designer into a Django application whose views render the component templates.

Integrating the Report Components into a Flask framework / Reports.JS / Python

Reports.JS is a client-side library, so integrating it into a Python framework means serving the pages that host the viewer and designer.

Integrating the Report Components into a native Python application / Reports.JS / Python

You do not need a web framework at all — a plain Python HTTP server is enough to host the Reports.JS pages.

Integrating the Report Components into a Tornado framework / Reports.JS / Python

This example integrates the Reports.JS viewer and designer into a Tornado application whose handlers render the component templates.

Integrating the Report Viewer into an Application / Reports для React / .NET 6.0

Set up the report viewer in .NET 6.0, load a template, and connect the component to the application.

Integrating the Report Viewer into an Application / Reports для React / .NET 8.0

Set up the report viewer in .NET 8.0, load a template, and connect the component to the application.

Integrating the Report Viewer into an Application / Reports для React / .NET 10.0

Set up the report viewer in .NET 10.0, load a template, and connect the component to the application.

Integrating the Report Viewer into an Application / Reports для Vue.js / .NET 6.0

Set up the report viewer in .NET 6.0, load a template, and connect the component to the application.

Integrating the Report Viewer into an Application / Reports для Vue.js / .NET 8.0

Set up the report viewer in .NET 8.0, load a template, and connect the component to the application.

Integrating the Report Viewer into an Application / Reports для Vue.js / .NET 10.0

Set up the report viewer in .NET 10.0, load a template, and connect the component to the application.

Integrating the Report Viewer into an Application / Reports для Angular / .NET 6.0

Set up the report viewer in .NET 6.0, load a template, and connect the component to the application.

Integrating the Report Viewer into an Application / Reports для Angular / .NET 8.0

Set up the report viewer in .NET 8.0, load a template, and connect the component to the application.

Integrating the Report Viewer into Standalone Angular Component / Reports для Angular / .NET 6.0

Modern Angular applications can be built from standalone components that declare their own dependencies, without a central NgModule.

Integrating the Report Viewer into Standalone Angular Component / Reports для Angular / .NET 8.0

Modern Angular applications can be built from standalone components that declare their own dependencies, without a central NgModule.

Loading a Report and Rendering it with a JSON Data / Reports.JS / Node.js

On Node.js the Stimulsoft engine runs server-side through the stimulsoft-reports-js package.

Loading a Report and Saving a Rendered Report / Reports.JS / Node.js

Handle the save action in Node.js and store or return the updated report template.

Loading a Report from the Server-Side / Reports.JS / Node.js

A common pattern is to render a report on the Node.js server and send the finished document to a viewer running in the browser.

Loading and Saving a Report Template / Reports.BLAZOR / Server

Handle the save action in Server and store or return the updated report template.

Loading and Saving a Report Template / Reports.BLAZOR / Web Assembly

Handle the save action in WebAssembly and store or return the updated report template.

Loading Scripts in Part to Minify Project / Reports.PYTHON / Python

Load the report template in Python and pass it to the next viewing, rendering, or export operation.

Loading Scripts in Part to Minify Project / Reports.JS / HTML

Reports.JS is modular: instead of loading the whole library, you can include only the parts your page needs to keep the download small.

Loading Scripts in Part to Minify Project / Reports.PHP / PHP

Load the report template in PHP and pass it to the next viewing, rendering, or export operation.

Loading the Report / Reports.JS / HTML

The foundation of Reports.JS is the StiReport object: you create it, load a template, and render it in the browser.

Localization the Designer / Reports.JS / HTML

The designer interface can be shown in different languages by adding localization files. This example adds several and selects one culture.

Localizing the Designer / Reports.JS / Angular

The designer can offer several interface languages and pick a default. This example adds localization files to the menu with different load options.

Localizing the Designer / Reports.JS / React

The designer can offer several interface languages and pick a default. This example adds localization files to the menu with different load options.

Localizing the Designer / Reports.JS / Vue 3

The designer can offer several interface languages and pick a default. This example adds localization files to the menu with different load options.

Localizing the Designer / Reports.PHP / PHP

The designer interface can be shown in different languages, and several localization files can be offered at once.

Localizing the Designer / Reports.PYTHON / Python

Embed the report designer in Python, load a template, and connect its editing and save actions.

Localizing the User Interface / Reports.WPF / .NET 6.0

The WPF viewer and designer interface can be shown in different languages by loading localization files.

Localizing the User Interface / Reports.WPF / .NET 8.0

The WPF viewer and designer interface can be shown in different languages by loading localization files.

Localizing the User Interface / Reports.WPF / .NET Framework

The WPF viewer and designer interface can be shown in different languages by loading localization files.

Localizing the User Interface / Reports.NET / .NET 6.0

The viewer and designer interface can be shown in different languages by loading localization files.

Localizing the User Interface / Reports.NET / .NET 8.0

The viewer and designer interface can be shown in different languages by loading localization files.

Localizing the User Interface / Reports.NET / .NET Framework

The viewer and designer interface can be shown in different languages by loading localization files.

Localizing the Viewer / Reports для React / .NET 6.0

The viewer interface — toolbar tooltips, menus, dialogs — can be shown in any language.

Localizing the Viewer / Reports для React / .NET 8.0

The viewer interface — toolbar tooltips, menus, dialogs — can be shown in any language.

Localizing the Viewer / Reports для React / .NET 10.0

The viewer interface — toolbar tooltips, menus, dialogs — can be shown in any language.

Localizing the Viewer / Reports.JS / React

Set up the report viewer in React, load a template, and connect the component to the application.

Localizing the Viewer / Reports для Vue.js / .NET 6.0

The viewer interface — toolbar tooltips, menus, dialogs — can be shown in any language.

Localizing the Viewer / Reports для Vue.js / .NET 8.0

The viewer interface — toolbar tooltips, menus, dialogs — can be shown in any language.

Localizing the Viewer / Reports.JS / Angular

The viewer interface can be shown in different languages by loading a localization file. This example sets a Portuguese localization.

Localizing the Viewer / Reports для Vue.js / .NET 10.0

The viewer interface — toolbar tooltips, menus, dialogs — can be shown in any language.

Localizing the Viewer / Reports.JS / Vue 3

The viewer interface can be shown in different languages by loading a localization file. This example sets a Portuguese localization.

Localizing the Viewer / Reports для Angular / .NET 6.0

The viewer interface — toolbar tooltips, menus, dialogs — can be shown in any language.

Localizing the Viewer / Reports для Angular / .NET 8.0

The viewer interface — toolbar tooltips, menus, dialogs — can be shown in any language.

Localizing the Viewer / Reports.BLAZOR / Server

The viewer interface can be shown in different languages by pointing it to a localization file through the component parameter.

Localizing the Viewer / Reports.BLAZOR / Web Assembly

The viewer interface can be shown in different languages by pointing it to a localization file through the component parameter.

Localizing the Viewer / Reports.WEB / .NET 6.0

The web viewer interface can be shown in any language by pointing it to a localization file.

Localizing the Viewer / Reports.WEB / .NET 8.0

The web viewer interface can be shown in any language by pointing it to a localization file.

Localizing the Viewer / Reports.WEB / .NET 6.0 Razor

The web viewer interface can be shown in any language by pointing it to a localization file, chosen in the viewer options.

Managing Report Printing and Exporting / Reports.WEB / .NET 6.0

When printing and exporting go through the viewer, you can intercept them on the server to adjust the document or its export settings.

Managing Report Printing and Exporting / Reports.WEB / .NET 8.0

When printing and exporting go through the viewer, you can intercept them on the server to adjust the document or its export settings.

Managing Report Printing and Exporting / Reports.WEB / .NET 6.0 Razor

When printing and exporting go through the viewer, you can intercept them in the page model to adjust the document or its export settings.

Managing Reports with Sub-Reports / Reports.NET / .NET Framework

A report can include other reports as sub-reports, combining several templates into one document.

Managing Reports with Sub-Reports / Reports.AVALONIA / .NET 6.0

Use .NET 6.0 code to manage reports with sub-reports, with the required setup kept alongside the main API calls.

Managing Reports with Sub-Reports / Reports.AVALONIA / .NET 8.0

Use .NET 8.0 code to manage reports with sub-reports, with the required setup kept alongside the main API calls.

Merging Several Reports into One / Reports.JS / HTML

Several rendered reports can be combined into a single document. This example renders two reports and appends their pages into one merged report.

Merging Several Reports into One / Reports.JAVA / Java

Several rendered reports can be combined into a single document under Java.

Opening the Report in the Viewer and Changing it on the Server-Side / Reports.PHP / PHP

Handle onOpenedReport in the PHP viewer to modify a report before it reaches the browser.

Opening the Report in the Viewer and Changing it on the Server-Side / Reports.PYTHON / Python

Handle onOpenedReport in the Python viewer to modify a report before it reaches the browser.

Previewing a Report with AutoUpdate in Realtime / Reports.NET / .NET Framework

A rendered report can be updated live while it is displayed, which is handy for dashboards and monitoring screens.

Printing a Report from Code / Reports.WPF / .NET 6.0

Render the report in .NET 6.0 and start the print workflow with settings supplied by the application.

Printing a Report from Code / Reports.WPF / .NET 8.0

Render the report in .NET 8.0 and start the print workflow with settings supplied by the application.

Printing a Report from Code / Reports.WPF / .NET Framework

Render the report in .NET Framework and start the print workflow with settings supplied by the application.

Printing a Report from Code / Reports.PHP / PHP

A report can be rendered and sent to print directly from PHP code. This example loads a report, renders it, and prints it.

Printing the Report / Reports.JS / HTML

A report can be sent to the printer directly from code, without the viewer. This example renders a report and prints it as soon as it is ready.

Printing the Report from Code / Reports.JS / Angular

Render the report in Angular and start the print workflow with settings supplied by the application.

Printing the Report from Code / Reports.JS / React

Render the report in React and start the print workflow with settings supplied by the application.

Printing the Report from Code / Reports.JS / Vue 3

Render the report in Vue 3 and start the print workflow with settings supplied by the application.

Printing the Report Template from Code / Reports.JAVA / Java

Render the report in Java and start the print workflow with settings supplied by the application.

Printing the Table from Code / Reports.JS / HTML

A report can be built completely from code, including its data structure and layout, and then printed or shown.

Register JSON Data File and Synchronize Dictionary / Reports.JS / HTML

A report with an empty data dictionary can be filled from a JSON file, building the data structure automatically.

Register JSON String and Synchronize Dictionary / Reports.JS / HTML

Data can also be registered from a JSON string you have already fetched, for example from a REST API.

Registering a Data from Code / Reports.PHP / PHP

Data can be registered for the report from code just before it renders, using the onBeforeRender event that runs on the client.

Registering a Data from Code / Reports.PYTHON / Python

Prepare the data in Python, register it in the report dictionary, and render the template with those records.

Registering a Data from Code when Rendering a Report on the Server-Side / Reports.PHP / PHP

When rendering server-side, data can be registered through the onBeforeRender event, which runs in the Node.js engine.

Registering a Fonts Folder / Reports.JS / HTML

Register the required resource in JavaScript so the report renders consistently in every environment.

Registering a Fonts Folder / Reports.JS / Node.js

On the server you can point the engine to a folder of font files so all of them become available to reports.

Registering a JSON Data for the Report Template / Reports.JS / HTML

Prepare the data in JavaScript, register it in the report dictionary, and render the template with those records.

Registering an XML Data for the Report Template / Reports.JS / HTML

Prepare the data in JavaScript, register it in the report dictionary, and render the template with those records.

Registering Data from Code / Reports.JS / Angular

Instead of a database connection, you can pass an in-memory DataSet directly to the report.

Registering Data from Code / Reports.JS / React

Instead of a database connection, you can pass an in-memory DataSet directly to the report.

Registering Data from Code / Reports.JS / Vue 3

Instead of a database connection, you can pass an in-memory DataSet directly to the report.

Registering Data when Creating a New Report / Reports.PHP / PHP

When a user creates a new report in the designer, you can automatically register data for it through the onCreateReport event.

Registering Data when Creating a New Report / Reports.PYTHON / Python

When a user creates a new report in the designer, you can automatically register data for it through the onCreateReport event.

Rendering a Report from Code / Reports.JS / Angular

A report can be rendered without a viewer, for example to process the result server-side. This example renders the report and inspects the output.

Rendering a Report from Code / Reports.JS / React

A report can be rendered without a viewer, for example to process the result server-side. This example renders the report and inspects the output.

Rendering a Report from Code / Reports.JS / Vue 3

A report can be rendered without a viewer, for example to process the result server-side. This example renders the report and inspects the output.

Rendering a Report from Code / Reports.PHP / PHP

Use PHP code to render a report from code, with the required setup kept alongside the main API calls.

Rendering a Report from Code / Reports.PYTHON / Python

A report can be rendered from Python code and its result inspected or shown. This example renders a report and reacts when rendering completes.

Rendering a Report from Code on a Button Click / Reports.PHP / PHP

Rendering can be deferred until the user clicks a button, rather than on page load. This example outputs the report scripts on demand.

Rendering a Report from Code on the Server-Side / Reports.PHP / PHP

Reports.PHP can render reports fully on the server using an embedded Node.js engine, with no browser involved.

Rendering a Report from Code on the Server-Side / Reports.PYTHON / Python

Reports.Python can render reports fully on the server using an embedded Node.js engine, with no browser involved.

Rendering a Report in the Thread / Reports.NET / .NET Framework

Rendering a large report can take time, so it is often done on a background thread to keep the interface responsive.

Rendering a Report with SQL from Code on the Server-Side / Reports.PHP / PHP

Prepare the data in PHP, register it in the report dictionary, and render the template with those records.

Rendering and Exporting a Report Asynchronously / Reports.NET / .NET Framework

The report engine offers async methods so you can compile, render and export without blocking the UI thread, using ordinary async/await.

Rendering and Exporting a Report in the Console App / Reports.WEB / .NET 6.0 Razor

Report generation does not require a web host — the engine runs anywhere .NET runs, including a console application.

Rendering and Exporting a Report in the Console App / Reports.WEB / .NET 6.0

Report generation does not require a web or desktop host at all — the engine runs anywhere .NET runs, including a console application.

Rendering and Exporting a Report in the Console App / Reports.WEB / .NET 8.0

Report generation does not require a web or desktop host at all — the engine runs anywhere .NET runs, including a console application.

Running the Angular Viewer / Reports.JAVA / Java

The Stimulsoft web viewer can be embedded into an Angular front-end while a Java servlet serves the report data.

Running the Angular Viewer with Jakarta EE / Reports.JAVA / Java

This example is the Jakarta EE variant of the Angular viewer integration.

Running the Angular Viewer with Spring Boot / Reports.JAVA / Java

This example integrates the Angular viewer with a Spring Boot back-end.

Running the Designer / Reports.JAVA / Java

Embed the report designer in Java, load a template, and connect its editing and save actions.

Running the Designer and Viewer with Jakarta Faces / Reports.JAVA / Java

Embed the report designer in Java, load a template, and connect its editing and save actions.

Running the Designer and Viewer with JavaServer Faces / Reports.JAVA / Java

Embed the report designer in Java, load a template, and connect its editing and save actions.

Running the Designer and Viewer with Spring Boot / Reports.JAVA / Java

This example hosts both the Stimulsoft web viewer and the web designer in a single Spring Boot application using server-rendered views.

Running the Designer Jakarta EE / Reports.JAVA / Java

Embed the report designer in Java, load a template, and connect its editing and save actions.

Running the React Viewer / Reports.JAVA / Java

This example embeds the Stimulsoft web viewer into a React front-end backed by a Java servlet.

Running the React Viewer with Jakarta EE / Reports.JAVA / Java

Set up the report viewer in Java, load a template, and connect the component to the application.

Running the React Viewer with Spring Boot / Reports.JAVA / Java

Set up the report viewer in Java, load a template, and connect the component to the application.

Running the Viewer / Reports.JAVA / Java

Set up the report viewer in Java, load a template, and connect the component to the application.

Running the Viewer Jakarta EE / Reports.JAVA / Java

Set up the report viewer in Java, load a template, and connect the component to the application.

Saving a Report Template in the Designer / Reports.WEB / .NET 6.0

When you host the web designer you usually want to control where edited templates are stored.

Saving a Report Template in the Designer / Reports.WEB / .NET 8.0

When you host the web designer you usually want to control where edited templates are stored.

Saving a Report Template in the Designer / Reports.WEB / .NET 6.0 Razor

Embed the report designer in ASP.NET Core Razor Pages, load a template, and connect its editing and save actions.

Saving a Report Template on the Server-Side / Reports.PYTHON / Python

When the user saves in the designer, the template is sent to the server where you decide how to store it.

Saving a Report Template on the Server-Side / Reports.PHP / PHP

When the user saves in the designer, the template is sent to the server where you decide how to store it.

Saving and Loading a Report in the Designer / Reports.NET / .NET Framework

This example customizes the designer's save and load behavior, redirecting them through your own handlers and adjusting the designer menu.

Saving the Rendered Report to a File / Reports.JS / HTML

A rendered report can be saved as a document file (.mdc) so it can be reloaded later without re-rendering.

Sending a Report by Email / Reports для React / .NET 6.0

Create the document in memory in .NET 6.0 and send it as an e-mail attachment without leaving a temporary file.

Sending a Report by Email / Reports для React / .NET 8.0

Create the document in memory in .NET 8.0 and send it as an e-mail attachment without leaving a temporary file.

Sending a Report by Email / Reports для React / .NET 10.0

Create the document in memory in .NET 10.0 and send it as an e-mail attachment without leaving a temporary file.

Sending a Report by Email / Reports для Vue.js / .NET 6.0

Create the document in memory in .NET 6.0 and send it as an e-mail attachment without leaving a temporary file.

Sending a Report by Email / Reports для Vue.js / .NET 8.0

Create the document in memory in .NET 8.0 and send it as an e-mail attachment without leaving a temporary file.

Sending a Report by Email / Reports для Vue.js / .NET 10.0

Create the document in memory in .NET 10.0 and send it as an e-mail attachment without leaving a temporary file.

Sending a Report by Email / Reports для Angular / .NET 6.0

Create the document in memory in .NET 6.0 and send it as an e-mail attachment without leaving a temporary file.

Sending a Report by Email / Reports для Angular / .NET 8.0

Create the document in memory in .NET 8.0 and send it as an e-mail attachment without leaving a temporary file.

Sending a Report by Email / Reports.PHP / PHP

Create the document in memory in PHP and send it as an e-mail attachment without leaving a temporary file.

Sending a Report by Email / Reports.WEB / .NET 6.0

Create the document in memory in .NET 6.0 and send it as an e-mail attachment without leaving a temporary file.

Sending a Report by Email / Reports.WEB / .NET 8.0

Create the document in memory in .NET 8.0 and send it as an e-mail attachment without leaving a temporary file.

Sending a Report by Email / Reports.WEB / .NET 6.0 Razor

The web viewer can e-mail a rendered report from its toolbar. This example enables the button and handles the request in the page model.

Sending a Report by Email / Reports.PYTHON / Python

Create the document in memory in Python and send it as an e-mail attachment without leaving a temporary file.

Sending an Exported Report to the Server-Side / Reports.PHP / PHP

When the user exports a report, the result can be sent back to the server and saved.

Sending an Exported Report to the Server-Side / Reports.PYTHON / Python

When the user exports a report, the result can be sent back to the server and saved.

Setting Report Variables on the Server-Side / Reports.PHP / PHP

Load the report template in PHP, assign its variables from application code, and continue with rendering.

Setting Report Variables on the Server-Side / Reports.PYTHON / Python

Load the report template in Python, assign its variables from application code, and continue with rendering.

Setting the Variable Value from Code / Reports.JS / HTML

Report variables can be assigned from code before rendering — for values that come from the application rather than the data.

Showing a Progress while Rendering a Report / Reports.NET / .NET Framework

When rendering takes a while, showing a progress indicator improves the user experience.

Showing a Report as PDF / Reports.JS / HTML

Instead of downloading, an exported PDF can be shown inline in the browser. This example renders a report and produces a PDF blob for display.

Showing a Report in the Viewer / Reports.JS / Wisej.NET

Set up the report viewer in Wisej.NET, load a template, and connect the component to the application.

Showing a Report in the Viewer / Reports.PHP / Laravel

Set up the report viewer in Laravel, load a template, and connect the component to the application.

Showing a Report in the Viewer / Reports.WPF / .NET 6.0

This example shows the two basic ways to display a report in a WPF application: in an embedded WPF viewer control, or in a separate viewer window.

Showing a Report in the Viewer / Reports.WPF / .NET 8.0

This example shows the two basic ways to display a report in a WPF application: in an embedded WPF viewer control, or in a separate viewer window.

Showing a Report in the Viewer / Reports.WPF / .NET Framework

This example shows the two basic ways to display a report in a WPF application: in an embedded WPF viewer control, or in a separate viewer window.

Showing a Report in the Viewer / Reports.NET / .NET 6.0

Set up the report viewer in .NET 6.0, load a template, and connect the component to the application.

Showing a Report in the Viewer / Reports.NET / .NET 8.0

Set up the report viewer in .NET 8.0, load a template, and connect the component to the application.

Showing a Report in the Viewer / Reports.NET / .NET Framework

Set up the report viewer in .NET Framework, load a template, and connect the component to the application.

Showing a Report in the Viewer / Reports.BLAZOR / Server

Stimulsoft provides native Blazor components, so the viewer is used as a Razor tag.

Showing a Report in the Viewer / Reports.BLAZOR / Web Assembly

Stimulsoft provides native Blazor components, so the viewer is used as a Razor tag.

Showing a Report in the Viewer / Reports.PHP / PHP

The Reports.PHP viewer is created on the server with the PHP SDK, which outputs the JavaScript viewer into the page.

Showing a Report in the Viewer / Reports.WEB / .NET 6.0

Set up the report viewer in .NET 6.0, load a template, and connect the component to the application.

Showing a Report in the Viewer / Reports.WEB / .NET 8.0

Set up the report viewer in .NET 8.0, load a template, and connect the component to the application.

Showing a Report in the Viewer / Reports.PYTHON / Python

Stimulsoft Reports.Python is a native Python library that renders reports and outputs the JavaScript viewer into your web page.

Showing a Report in the Viewer / Reports.WEB / .NET 6.0 Razor

Set up the report viewer in ASP.NET Core Razor Pages, load a template, and connect the component to the application.

Showing a Report in the Viewer in an HTML template / Reports.PHP / PHP

When you build the page yourself, you can output the viewer's scripts and body separately so they fit your HTML layout.

Showing a Report in the Viewer in an HTML template / Reports.PYTHON / Python

When you build the page with your own HTML template, the viewer's scripts and body can be emitted separately so they fit your layout.

Showing a Report in the Viewer in an HTML template using PHP variables / Reports.PHP / PHP

Instead of printing directly, the viewer's HTML can be captured into PHP variables and echoed wherever you need — handy for templating engines.

Showing a Report in the Viewer using JavaScript / Reports.PHP / PHP

You can also build the viewer with plain JavaScript on the client and use PHP only as the data/request handler.

Showing a Report in the Viewer without Toolbar / Reports.JS / React

Reports.JS provides ready-made React components in the stimulsoft-reports-js-react package, so you embed the viewer as a JSX element.

Showing a Report in the Viewer without Toolbar / Reports.JS / Angular

Reports.JS ships ready-made components for Angular and Vue, so the viewer is used as a framework element.

Showing a Report in the Viewer without Toolbar / Reports.JS / Vue 3

Reports.JS ships ready-made components for Angular and Vue, so the viewer is used as a framework element.

Showing a Viewer without Toolbar / Reports.BLAZOR / Server

The viewer can be shown without its toolbar for a clean, read-only preview. This example configures viewer options and passes them to the component.

Showing a Viewer without Toolbar / Reports.BLAZOR / Web Assembly

The viewer can be shown without its toolbar for a clean, read-only preview. This example configures viewer options and passes them to the component.

Showing Interactive Reports / Reports.WEB / .NET 6.0

Stimulsoft reports can be interactive — sorting, drill-down, collapsing groups, chart interaction — and it all works in the web viewer out of the box.

Showing Interactive Reports / Reports.WEB / .NET 8.0

Stimulsoft reports can be interactive — sorting, drill-down, collapsing groups, chart interaction — and it all works in the web viewer out of the box.

Showing Interactive Reports / Reports.WEB / .NET 6.0 Razor

Interactive report features — sorting, drill-down, collapsing groups, chart interaction — work in the web viewer without extra code.

Showing the Designer Immediately after Running an App / Reports.JS / HTML

Embed the report designer in JavaScript, load a template, and connect its editing and save actions.

Showing the Designer in a Required Position / Reports.JS / HTML

The designer can be placed into any element on your page rather than filling the window, so it fits into an existing layout.

Showing the Designer in iframe / Reports.JS / HTML

Embed the report designer in JavaScript, load a template, and connect its editing and save actions.

Showing the Report Viewer in a Required Position / Reports.JS / HTML

The viewer can be rendered into any element on the page so it fits your layout. This example draws it into a specific container.

Showing the Viewer Immediately after Running an App / Reports.JS / HTML

Set up the report viewer in JavaScript, load a template, and connect the component to the application.

Showing the Viewer in iframe / Reports.JS / HTML

The viewer can be hosted inside an iframe to keep its scripts and styles separate from the host page. This example loads a viewer page into an iframe.

Starting SQL adapters from the HTTP server / Reports.JS / Node.js

Reports.JS can connect to SQL databases (MySQL, PostgreSQL, MS SQL and others) through a small Node.js data-adapter service.

Supply Custom Headers for JSON Database / Reports.JS / Angular

When a JSON data source is served by a protected backend, you can attach custom HTTP headers to each data request.

Supply Custom Headers for Json Database / Reports.JS / HTML

When a report loads data from a protected JSON endpoint, you may need to send authentication headers.

Supply Custom Headers for JSON Database / Reports.JS / React

When a JSON data source is served by a protected backend, you can attach custom HTTP headers to each data request.

Supply Custom Headers for JSON Database / Reports.JS / Vue 3

When a JSON data source is served by a protected backend, you can attach custom HTTP headers to each data request.

Supply Custom Headers for Json Database / Reports.JS / Node.js

When a report loads data from a protected JSON endpoint, you may need to send authentication headers.

Testing Memory Usage in EngineV1 and EngineV2 / Reports.NET / .NET Framework

Stimulsoft includes two rendering engines: the classic EngineV1 and the memory-optimized EngineV2.

Using a Custom Data Adapter / Reports.WEB / .NET 6.0 Razor

For a data source that is not built in, you can register a custom data adapter and use it in the web designer.

Using a Custom Data Adapter / Reports.JS / Angular

You can register a fully custom data source that supplies schema and data from your own code.

Using a Custom Data Adapter / Reports.JS / React

You can register a fully custom data source that supplies schema and data from your own code.

Using a Custom Data Adapter / Reports.JS / HTML

For a data source Reports.JS does not support natively, you can register a custom database that answers the engine's data commands yourself.

Using a Custom Data Adapter / Reports.JS / Vue 3

You can register a fully custom data source that supplies schema and data from your own code.

Using a Custom Data Adapter / Reports.WPF / .NET 6.0

For a data source that is not built in, you can register a custom data adapter and use it in the WPF designer.

Using a Custom Data Adapter / Reports.WPF / .NET 8.0

For a data source that is not built in, you can register a custom data adapter and use it in the WPF designer.

Using a Custom Data Adapter / Reports.WPF / .NET Framework

For a data source that is not built in, you can register a custom data adapter and use it in the WPF designer.

Using a Custom Data Adapter / Reports.NET / .NET 6.0

Stimulsoft supports many databases out of the box, but you can plug in your own data adapter for a source that is not built in.

Using a Custom Data Adapter / Reports.NET / .NET 8.0

Stimulsoft supports many databases out of the box, but you can plug in your own data adapter for a source that is not built in.

Using a Custom Data Adapter / Reports.NET / .NET Framework

Stimulsoft supports many databases out of the box, but you can plug in your own data adapter for a source that is not built in.

Using a Custom Data Adapter / Reports.WEB / .NET 6.0

For a data source that is not built in, you can register a custom data adapter and use it in the web designer.

Using a Custom Data Adapter / Reports.WEB / .NET 8.0

For a data source that is not built in, you can register a custom data adapter and use it in the web designer.

Using a Custom Font / Reports.JS / Angular

Fonts can also be supplied to the whole engine rather than stored in the report. This example registers a TTF file with the global font collection.

Using a Custom Font / Reports.JS / React

Fonts can also be supplied to the whole engine rather than stored in the report. This example registers a TTF file with the global font collection.

Using a Custom Font / Reports.JS / Node.js

A single custom font file can be added to the engine and used in a report. This example loads one font and embeds it in the exported PDF.

Using a Custom Font / Reports.JS / Vue 3

Fonts can also be supplied to the whole engine rather than stored in the report. This example registers a TTF file with the global font collection.

Using a Report Cache Mode / Reports.JS / Node.js

For very large reports, cache mode keeps memory usage low by holding only part of the rendered document in memory at a time.

Using a Report Export Service / Reports.WEB / .NET 6.0

A report can be exposed as a web API endpoint that renders and returns a document on demand — a report export service.

Using a Report Export Service / Reports.WEB / .NET 8.0

A report can be exposed as a web API endpoint that renders and returns a document on demand — a report export service.

Using API Methods / Reports для React / .NET 6.0

For finer control you can talk to the viewer directly through its API instead of only reacting to events.

Using API Methods / Reports для React / .NET 8.0

For finer control you can talk to the viewer directly through its API instead of only reacting to events.

Using API Methods / Reports для React / .NET 10.0

For finer control you can talk to the viewer directly through its API instead of only reacting to events.

Using API Methods / Reports для Vue.js / .NET 6.0

For finer control you can talk to the viewer directly through its API instead of only reacting to events.

Using API Methods / Reports для Vue.js / .NET 8.0

For finer control you can talk to the viewer directly through its API instead of only reacting to events.

Using API Methods / Reports для Vue.js / .NET 10.0

For finer control you can talk to the viewer directly through its API instead of only reacting to events.

Using API Methods / Reports для Angular / .NET 6.0

For finer control you can talk to the viewer directly through its API instead of only reacting to events.

Using API Methods / Reports для Angular / .NET 8.0

For finer control you can talk to the viewer directly through its API instead of only reacting to events.

Using Business Objects in the Report / Reports.WEB / .NET 6.0 Razor

Web reports can be bound to your application's business objects — collections implementing IEnumerable or ITypedList.

Using Business Objects in the Report / Reports.WPF / .NET 6.0

Reports can be bound directly to your application's business objects — collections implementing IEnumerable or ITypedList.

Using Business Objects in the Report / Reports.WPF / .NET 8.0

Reports can be bound directly to your application's business objects — collections implementing IEnumerable or ITypedList.

Using Business Objects in the Report / Reports.WPF / .NET Framework

Reports can be bound directly to your application's business objects — collections implementing IEnumerable or ITypedList.

Using Business Objects in the Report / Reports.NET / .NET Framework

Besides datasets, reports can be bound directly to your application's business objects — collections implementing IEnumerable or ITypedList.

Using business objects in the report / Reports.BLAZOR / Server

Reports can be bound to your application's business objects. This example registers a business object collection and opens the report in the designer.

Using business objects in the report / Reports.BLAZOR / Web Assembly

Reports can be bound to your application's business objects. This example registers a business object collection and opens the report in the designer.

Using Business Objects in the Report / Reports.WEB / .NET 6.0

Register application objects as a data source in .NET 6.0 and make their fields available to the report template.

Using Business Objects in the Report / Reports.AVALONIA / .NET 6.0

Reports can be bound directly to your application's business objects. This example registers an object collection and shows it in an Avalonia viewer.

Using Business Objects in the Report / Reports.AVALONIA / .NET 8.0

Reports can be bound directly to your application's business objects. This example registers an object collection and shows it in an Avalonia viewer.

Using Business Objects in the Report / Reports.WEB / .NET 8.0

Register application objects as a data source in .NET 8.0 and make their fields available to the report template.

Using CDNs for Script Loading / Reports.JS / HTML

The Reports.JS scripts can be loaded from a CDN instead of being hosted with your application, which speeds up delivery and simplifies updates.

Using Designer Events / Reports.JS / HTML

The designer raises events for the actions users perform — creating, previewing, saving and exiting a report.

Using Designer Events / Reports.JS / React

The React designer raises events for creating, saving, previewing and exiting a report.

Using Designer Events / Reports.JS / Angular

The designer raises events for creating, saving and previewing a report. This example registers data on new reports and reacts to saves.

Using Designer Events / Reports.JS / Vue 3

The designer raises events for creating, saving and previewing a report. This example registers data on new reports and reacts to saves.

Using Designer Events / Reports для Angular / .NET 6.0

Stimulsoft for Angular includes not only a viewer but a full report designer.

Using Designer Events / Reports для Angular / .NET 8.0

Stimulsoft for Angular includes not only a viewer but a full report designer.

Using Events of the Report Render Process / Reports.JAVA / Java

Handle the relevant report event in Java and use its arguments to adjust the application behavior.

Using Linq in Reports / Reports.WPF / .NET 6.0

Because a report can be bound to any object collection, you can feed it the result of a LINQ query.

Using Linq in Reports / Reports.WPF / .NET 8.0

Because a report can be bound to any object collection, you can feed it the result of a LINQ query.

Using Linq in Reports / Reports.WPF / .NET Framework

Because a report can be bound to any object collection, you can feed it the result of a LINQ query.

Using Linq in Reports / Reports.NET / .NET Framework

Because a report can be bound to any object collection, you can feed it the result of a LINQ query.

Using Linq in Reports / Reports.AVALONIA / .NET 6.0

Because a report can be bound to any object collection, you can feed it a LINQ query.

Using Linq in Reports / Reports.AVALONIA / .NET 8.0

Because a report can be bound to any object collection, you can feed it a LINQ query.

Using Parameters in SQL Query / Reports.JS / Angular

SQL query parameters can be substituted with real values at run time. This example replaces a parameter value just before the data is fetched.

Using Parameters in SQL Query / Reports.JS / React

SQL query parameters can be substituted with real values at run time. This example replaces a parameter value just before the data is fetched.

Using Parameters in SQL Query / Reports.JS / Vue 3

SQL query parameters can be substituted with real values at run time. This example replaces a parameter value just before the data is fetched.

Using Parameters in SQL Query / Reports.PHP / PHP

SQL queries can use parameters whose values you set on the server. This example supplies a parameter value in the onBeginProcessData event.

Using Parameters in SQL Query / Reports.PYTHON / Python

SQL queries can use parameters whose values you set on the server. This example supplies a parameter value in the onBeginProcessData event.

Using Report Variables in Code / Reports.JS / Angular

Report variables can be assigned from code before rendering, which is handy for passing application state into a template.

Using Report Variables in Code / Reports.JS / React

Report variables can be assigned from code before rendering, which is handy for passing application state into a template.

Using Report Variables in Code / Reports.JS / Vue 3

Report variables can be assigned from code before rendering, which is handy for passing application state into a template.

Using Report Variables in Code / Reports.WPF / .NET 6.0

Load the report template in .NET 6.0, assign its variables from application code, and continue with rendering.

Using Report Variables in Code / Reports.WPF / .NET 8.0

Load the report template in .NET 8.0, assign its variables from application code, and continue with rendering.

Using Report Variables in Code / Reports.WPF / .NET Framework

Load the report template in .NET Framework, assign its variables from application code, and continue with rendering.

Using Report Variables in Code / Reports.NET / .NET 6.0

Report variables let a report receive values from the application — user input, settings, calculated data.

Using Report Variables in Code / Reports.NET / .NET 8.0

Report variables let a report receive values from the application — user input, settings, calculated data.

Using Report Variables in Code / Reports.NET / .NET Framework

Report variables let a report receive values from the application — user input, settings, calculated data.

Using Report Variables in Code / Reports.BLAZOR / Server

Report variables can be set from Blazor, for example from a text box, and the viewer updates to reflect them.

Using Report Variables in Code / Reports.BLAZOR / Web Assembly

Report variables can be set from Blazor, for example from a text box, and the viewer updates to reflect them.

Using Report Variables in Code / Reports.WEB / .NET 6.0

Report variables let a web report receive values from the request — user input from a form or query string.

Using Report Variables in Code / Reports.AVALONIA / .NET 6.0

Load the report template in .NET 6.0, assign its variables from application code, and continue with rendering.

Using Report Variables in Code / Reports.AVALONIA / .NET 8.0

Load the report template in .NET 8.0, assign its variables from application code, and continue with rendering.

Using Report Variables in Code / Reports.WEB / .NET 8.0

Report variables let a web report receive values from the request — user input from a form or query string.

Using Report Variables in Code / Reports.WEB / .NET 6.0 Razor

Load the report template in ASP.NET Core Razor Pages, assign its variables from application code, and continue with rendering.

Using SQL Data Sources / Reports.JS / Angular

The connection string and SQL query of a report can be changed dynamically from code. This example swaps both when the report requests its data.

Using SQL Data Sources / Reports.JS / React

The connection string and SQL query of a report can be changed dynamically from code. This example swaps both when the report requests its data.

Using SQL Data Sources / Reports.JS / Vue 3

The connection string and SQL query of a report can be changed dynamically from code. This example swaps both when the report requests its data.

Using SQL Data Sources / Reports.BLAZOR / Web Assembly

In a Blazor WebAssembly app the browser cannot reach a database directly, so SQL data is fetched through a server API.

Using SQL Data Sources / Reports.PHP / PHP

Reports can pull data from SQL databases, with the connection handled on the server through the onBeginProcessData event.

Using the Form to Select Columns / Reports.NET / .NET Framework

Use .NET Framework code to use the form to select columns, with the required setup kept alongside the main API calls.

Using the Full-Screen Mode in the Designer / Reports.JS / HTML

Full-screen mode makes the designer occupy the whole browser window, which is the natural layout for a dedicated report-editing application.

Using the Full-Screen Mode in the Viewer / Reports.WEB / .NET 6.0 Razor

The web viewer can occupy the whole browser window in full-screen mode, useful for report portals and dashboards.

Using the Full-Screen Mode in the Viewer / Reports.JS / HTML

Set up the report viewer in JavaScript, load a template, and connect the component to the application.

Using the Full-Screen Mode in the Viewer / Reports.WEB / .NET 6.0

The web viewer can occupy the whole browser window in full-screen mode, which is useful for report portals and dashboards.

Using the Full-Screen Mode in the Viewer / Reports.WEB / .NET 8.0

The web viewer can occupy the whole browser window in full-screen mode, which is useful for report portals and dashboards.

Using the Right-To-Left Mode in the Viewer / Reports.JS / React

For right-to-left languages such as Arabic or Hebrew, the viewer interface can be mirrored. This example enables RTL mode.

Using the Right-To-Left Mode in the Viewer / Reports.JS / Angular

For right-to-left languages such as Arabic or Hebrew, the viewer interface can be mirrored. This example enables RTL mode.

Using the Right-To-Left Mode in the Viewer / Reports.JS / Vue 3

For right-to-left languages such as Arabic or Hebrew, the viewer interface can be mirrored. This example enables RTL mode.

Using the Right-To-Left Mode in the Viewer / Reports.NET / .NET Framework

For right-to-left languages such as Arabic or Hebrew, the viewer interface itself can be mirrored. This example enables RTL mode for the viewer.

Using the Same Label for Multiple Fonts / Reports.JS / HTML

Register the required resource in JavaScript so the report renders consistently in every environment.

Using the two Viewer in the One Project / Reports.JS / React

Because the viewer is just a React component, you can place several instances on one page. This example shows two independent viewers side by side.

Using the two Viewer in the One Project / Reports.JS / Angular

Because the viewer is a component, you can place several instances on one page. This example shows two independent viewers side by side.

Using the two Viewer in the One Project / Reports.JS / Vue 3

Because the viewer is a component, you can place several instances on one page. This example shows two independent viewers side by side.

Using User Data in Reports / Reports.NET / .NET Framework

Reports can display arbitrary application data, not only database tables.

Using User Data in Reports / Reports.BLAZOR / Server

The StiUserData source lets a report pull data from arbitrary application code through an event.

Using User Data in Reports / Reports.BLAZOR / Web Assembly

The StiUserData source lets a report pull data from arbitrary application code through an event.

Using Viewer Events / Reports.JS / HTML

The viewer raises events for data loading, printing, exporting and switching to the designer.

Using Viewer Events / Reports для React / .NET 6.0

Set up the report viewer in .NET 6.0, load a template, and connect the component to the application.

Using Viewer Events / Reports для React / .NET 8.0

Set up the report viewer in .NET 8.0, load a template, and connect the component to the application.

Using Viewer Events / Reports для React / .NET 10.0

Set up the report viewer in .NET 10.0, load a template, and connect the component to the application.

Using Viewer Events / Reports.JS / React

The React viewer exposes events as component props. This example handles the e-mail event, which fires when the user sends a report from the toolbar.

Using Viewer Events / Reports для Vue.js / .NET 6.0

Set up the report viewer in .NET 6.0, load a template, and connect the component to the application.

Using Viewer Events / Reports для Vue.js / .NET 8.0

Set up the report viewer in .NET 8.0, load a template, and connect the component to the application.

Using Viewer Events / Reports.JS / Angular

Set up the report viewer in Angular, load a template, and connect the component to the application.

Using Viewer Events / Reports для Vue.js / .NET 10.0

Set up the report viewer in .NET 10.0, load a template, and connect the component to the application.

Using Viewer Events / Reports.JS / Vue 3

Set up the report viewer in Vue 3, load a template, and connect the component to the application.

Using Viewer Events / Reports для Angular / .NET 6.0

Set up the report viewer in .NET 6.0, load a template, and connect the component to the application.

Using Viewer Events / Reports для Angular / .NET 8.0

Set up the report viewer in .NET 8.0, load a template, and connect the component to the application.

Using Viewer Parameters / Reports для React / .NET 6.0

The viewer can be driven from your application through a properties object.

Using Viewer Parameters / Reports для React / .NET 8.0

The viewer can be driven from your application through a properties object.

Using Viewer Parameters / Reports для React / .NET 10.0

The viewer can be driven from your application through a properties object.

Using Viewer Parameters / Reports для Vue.js / .NET 6.0

The viewer can be driven from your application through a properties object.

Using Viewer Parameters / Reports для Vue.js / .NET 8.0

The viewer can be driven from your application through a properties object.

Using Viewer Parameters / Reports для Vue.js / .NET 10.0

The viewer can be driven from your application through a properties object.

Using Viewer Parameters / Reports для Angular / .NET 6.0

The viewer can be driven from your application through a properties object bound to the component.

Using Viewer Parameters / Reports для Angular / .NET 8.0

The viewer can be driven from your application through a properties object bound to the component.

Using with Express / Reports.JS / Node.js

Use Node.js code to use with express, with the required setup kept alongside the main API calls.

Working with onDesign and onExit events / Reports.PYTHON / Python

The viewer and designer can be combined into one edit-and-preview workflow using their onDesignReport and onExit events.

Working with onDesign and onExit Events / Reports.JS / React

This example combines the viewer and the designer, switching between them with React state.

Working with onDesign and onExit Events / Reports.JS / Angular

This example combines the viewer and designer, switching between them with a flag.

Working with onDesign and onExit Events / Reports.JS / Vue 3

This example combines the viewer and designer, switching between them with a flag.

Working with onDesign and onExit events / Reports.PHP / PHP

The viewer and designer can be combined into one edit-and-preview workflow using their onDesignReport and onExit events.