dotnetreport

The front end of Dotnet Report: the drag-and-drop report builder, dashboards and admin setup pages that you embed in your own web app.

Dotnet Report lets your users build their own reports and dashboards: pick fields, filter, group, total, chart, and export to PDF, Excel, Word or CSV, all inside your application. Try the live demo.

Install

npm install dotnetreport

Installing the package also installs the client libraries Dotnet Report uses, such as jQuery, Knockout, Bootstrap, ECharts, Select2 and Summernote.

What's in the package

| File | What it is | |---|---| | src/dotnetreport.js | Report builder, report viewer and dashboard view models | | src/dotnetreport-helper.js | Shared helpers: Knockout bindings, formatting and AJAX calls | | src/dotnetreport-setup.js | Admin setup pages: tables, joins, users and access | | src/dotnetreport.css | Styles for the report builder, reports and dashboards | | src/lib/gridstack.min.js, src/lib/gridstack.jQueryUi.min.js, src/lib/gridstack.min.css | Dashboard grid layout |

The scripts are plain browser scripts, not ES modules. Load them with <script> tags or a bundler's global scripts list, after their libraries.

Use it with

ASP.NET Core

Most projects get these files through the dotnetreport NuGet package, which also adds the Razor views and the server code. Use this npm package when you want the scripts to come from npm, for example to pin the version in package.json or to bundle them with your own build.

Copy the files into wwwroot with your build tool. With gulp:

gulp.task('dotnetreport', function () {
    return gulp.src('node_modules/dotnetreport/src/**/*')
        .pipe(gulp.dest('wwwroot/js/dotnetreport'));
});

Angular

Use dotnetreport-ng, which wraps Dotnet Report as Angular components and uses this package for its scripts. Add the scripts to angular.json:

"styles": [
  "node_modules/dotnetreport/src/dotnetreport.css"
],
"scripts": [
  "node_modules/dotnetreport/src/dotnetreport-helper.js",
  "node_modules/dotnetreport/src/dotnetreport.js",
  "node_modules/dotnetreport/src/dotnetreport-setup.js"
]

These go after the libraries Dotnet Report uses. The Angular installation guide has the full styles and scripts lists in the right order.

Any other web app

Load jQuery, Knockout and the other libraries first (the Angular installation guide lists them in order), then:

<link rel="stylesheet" href="/node_modules/dotnetreport/src/dotnetreport.css" />
<script src="/node_modules/dotnetreport/src/dotnetreport-helper.js"></script>
<script src="/node_modules/dotnetreport/src/dotnetreport.js"></script>

The scripts call the Dotnet Report API endpoints in your back end. The dotnetreport.backend NuGet package provides them for .NET.

Versions

The npm and NuGet packages share version numbers. Use the same version of dotnetreport on npm and the Dotnet Report NuGet packages, so the scripts match the views and the API.

Pre-release versions such as 6.3.5-beta.1 are published under the beta tag, so npm install dotnetreport always gets the latest stable release. To try a beta:

npm install dotnetreport@beta

Links

• Knowledge base: setup, building reports, dashboards and embedding
• What's new: release notes for every version
• Live demo
• dotnetreport.com

License

See the LICENSE file in this package. Running reports needs a Dotnet Report account; sign up at dotnetreport.com.