Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (143).NET Core  (23)Angular  (39)ASP.NET  (47)ASP.NET Core  (53)ASP.NET MVC  (84)Azure  (27)Blazor  (50)DocIO  (18)Essential JS 2  (65)Essential Studio  (159)Flutter  (53)JavaScript  (135)Microsoft  (96)PDF  (48)React  (29)Succinctly series  (118)Syncfusion  (403)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (25)Webinar  (14)Windows Forms  (52)WPF  (92)Xamarin  (106)XlsIO  (20)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (100)Chart  (40)Cloud  (8)Company  (445)Dashboard  (4)Data Science  (3)Data Validation  (2)DataGrid  (31)Development  (235)Doc  (7)eBook  (89)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (14)Extensions  (7)File Manager  (3)Gantt  (6)Gauge  (4)Git  (3)Grid  (25)HTML  (8)Installer  (1)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (141)Mobile MVC  (9)OLAP server  (1)Orubase  (12)Partners  (20)PDF viewer  (15)Performance  (2)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (15)SfDataGrid  (7)Silverlight  (21)Sneak Peek  (12)Solution Services  (2)Spreadsheet  (2)SQL  (4)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (18)UI  (66)Uncategorized  (68)Unix  (2)User interface  (49)Visual State Manager  (1)Visual Studio  (12)Visual Studio Code  (7)Web  (101)What's new  (62)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Create Report Viewer Component in Angular app with ASP.NET Core

Create Report Viewer Component in Angular app with ASP.NET Core

With the Bold Reports Embedded platform, you can easily embed reporting components in your project to create, bind data to, view, and export pixel-perfect paginated reports.

In this blog, we are going to walk you through the integration of our Angular Report Viewer component in an Angular template with an ASP.NET Core project. The ASP.NET Core and Angular CLI applications will process the report and render it in a browser, respectively. This lets you host both project types in a single-page app.

Prerequisites

  1. Visual Studio 2019 with ASP.NET and web development workloads.
  2. .NET Core 2.2+ Framework.
  3. NodeJS
  4. Bold Reports Embedded or Viewer SDK subscription.

Create a new app

  • To get started, create an Angular project template ASP.NET Core project using the following commands in the command prompt. If this template is not available for you, refer the following link to configure the system environment to kick-start your ASP.NET Core with Angular development: Use the Angular project template with ASP.NET Core.
dotnet new angular -o report-viewer
cd report-viewer

Project Structure

  • The project structure is like the ASP.NET Core, but we will have additional Angular loads to workout with Angular.

    Project structure of ASP.NET Core Angular project
    Project structure of ASP.NET Core Angular project

Create a Web API for report processing

In this section, we are going to create a Web API controller that will be used to process the provided RDL reports.

PackagePurpose
BoldReports.Net.CoreCreates Web API service to process reports.
System.Data.SqlClientThis should be referenced in the project when the RDL report renders visual data from the SQL Server or SQL Azure data source based on the RDL design. The package version should be higher than 4.1.0.
Microsoft.AspNetCore.Mvc.NewtonsoftJsonASP.NET Core MVC features that use Newtonsoft.Json. Includes input and output formats for JSON and JSON Patch. The package version should be higher than 3.1.2.
  • Create an empty API controller by right-clicking the Controller folder, selecting Add –> Controller, and then naming it ReportViewerController.cs

    Creating a new controller
    Creating a new controller

Include your already created .rdl or .rdlc reports into the path `wwwroot\Resources\`. Here we have used sales-order-detail.rdl report and which can be downloaded from here. You can also add reports from the Bold Reports installation location(C:\Users\Public\Documents\Bold Reports\Embedded Reporting Tools\Samples\ASP.NET Core\wwwroot\resources\Report). For more information, refer to the samples and demos section of the Bold Reports documentation.

  • Replace the following code into ReportViewerController.cs. To learn more about the controller actions, please refer to the documentation for ReportViewer ASP.NET Core Service.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using BoldReports.Web.ReportViewer;

// For more information on enabling Web API for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860

namespace webservice
{
    [Route("api/[controller]/[action]")]
    public class ReportViewerController : Controller, IReportController
    {
        // Report viewer requires a memory cache to store the information of consecutive client request and
        // have the rendered report viewer information in server.
        private Microsoft.Extensions.Caching.Memory.IMemoryCache _cache;

        // IHostingEnvironment used with sample to get the application data from wwwroot.
        private Microsoft.AspNetCore.Hosting.IHostingEnvironment _hostingEnvironment;

        // Post action to process the report from server-based json parameters and send the result back to the client.
        public ReportViewerController(Microsoft.Extensions.Caching.Memory.IMemoryCache memoryCache,
            Microsoft.AspNetCore.Hosting.IHostingEnvironment hostingEnvironment)
        {
            _cache = memoryCache;
            _hostingEnvironment = hostingEnvironment;
        }

        // Post action to process the report from server based json parameters and send the result back to the client.
        [HttpPost]
        public object PostReportAction([FromBody] Dictionary<string, object> jsonArray)
        {
            return ReportHelper.ProcessReport(jsonArray, this, this._cache);
        }

        // Method will be called to initialize the report information to load the report with ReportHelper for processing.
        public void OnInitReportOptions(ReportViewerOptions reportOption)
        {
            string basePath = _hostingEnvironment.WebRootPath;
            // Here, we have loaded the sales-order-detail.rdl report from application the folder wwwroot\Resources. sales-order-detail.rdl should be there in wwwroot\Resources application folder.
            System.IO.FileStream reportStream = new System.IO.FileStream(basePath + @"\Resources\sales-order-detail.rdl", System.IO.FileMode.Open, System.IO.FileAccess.Read);
            reportOption.ReportModel.Stream = reportStream;
        }

        // Method will be called when report is loaded internally to start to layout process with ReportHelper.
        public void OnReportLoaded(ReportViewerOptions reportOption)
        {
        }

        //Get action for getting resources from the report.
        [ActionName("GetResource")]
        [AcceptVerbs("GET")]
        // Method will be called from Report Viewer client to get the image src for Image report item.
        public object GetResource(ReportResource resource)
        {
            return ReportHelper.GetResource(resource, this, _cache);
        }

        [HttpPost]
        public object PostFormReportAction()
        {
            return ReportHelper.ProcessReport(null, this, _cache);
        }
    }
}

Configure Report Viewer in Angular

In this section, we are going to install and configure the required packages to render the Bold Reports Angular components in the CLI application.

Installing and importing reporting components assets

  • Open the command prompt and navigate to the path ./report-viewer/ClientApp/
  • Install the following Bold Reports Angular packages using these commands
npm install @boldreports/angular-reporting-components --save

npm install @boldreports/types –save-dev

  • Include the jquery and reports.all typings in the tsconfig.app.json
 {
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "typeRoots": [
      "node_modules/@types",
      "node_modules/@boldreports/types"
    ],
    "types": [
      "jquery",
      "reports.all"
    ]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}
  • Report Viewer required global jquery to render, so we need to import and assign jquery to the window object path src/polyfills.ts.
import * as jquery from 'jquery';
window['jQuery'] = jquery;
window['$'] = jquery;
  • Include the Report Viewer component style bold.reports.all.min.css in the angular.jsonfile.
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "reportviewerapp": {
  "my_new_app": [
    {
      "root": "src",
      "outDir": "dist",
       . . .
       . . .
      "styles": [
        "styles.css",
         "./node_modules/@boldreports/javascript-reporting-controls/Content/material/bold.reports.all.min.css"
      ],
      "scripts": [],
       . . .
       . . .
      }}
}
  • Import the necessary scripts to src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BoldReportViewerModule } from '@boldreports/angular-reporting-components';
import { AppComponent } from './app.component';

// Report Viewer
import '@boldreports/javascript-reporting-controls/Scripts/bold.report-viewer.min';

// data-visualization
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.bulletgraph.min';
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.chart.min';
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej2-circulargauge.min';
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej2-lineargauge.min';
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.map.min';

@NgModule({
  declarations: [
    AppComponent
  ],
imports: [
    BrowserModule,
    BoldReportViewerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Adding Report Viewer Component

  • To initialize and render the component use the following code in  src/app/app.component.html
<bold-reportviewer id="reportViewer_Control" [reportServiceUrl] = "serviceUrl"[reportPath] = "reportPath" style="width: 100%;height: 950px"></bold-reportviewer>
  • Bind the serviceURL and reportPath in the src/app/app.component.ts file.
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'reportviewerapp';
  public serviceUrl: string;
  public reportPath: string;=
    constructor() {
        this.serviceUrl = '/api/ReportViewer';
        this.reportPath = 'sales-order-detail.rdl';
    }
}

Run the application

  • Build and run the project using F5 or by clicking the Start button.
  • The application will be launched in the default system browser and the output will look like the following.
  • You can also export the report in PDF, Excel, Word, HTML, PowerPoint, XML, and CSV. For more options please refer to the documentation on the Report Viewer.

    Sales Report in ASP.NET Core with Angular application
    Sales Report in ASP.NET Core with Angular application

You can remove the ‘Invalid License’ from the output by including the licensing token in the project. Please refer to the documentation for how to generate a Bold Reports licensing token.

Conclusion

In this blog, we have learned how to use the Bold Reports Reporting Viewer component using ASP.NET Core with Angular. To explore further, I recommend you go through our sample reports and documentation.

If you have any questions, please post them in the comments section below. You can also contact us through our contact page or, if you already have an account, you can log in to submit your support question. Feel free to check out the Bold Reports Embedded Edition demos and documentation to explore the available tools and their various customization features.

Bold Reports now comes with a 15-day free trial with no credit card information required. We welcome you to start a free trial and experience Bold Reports for yourself. Give it a try and let us know what you think!

Stay tuned to our official TwitterFacebookLinkedInPinterest, and Instagram pages for announcements about new releases.

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top