How to Build Report Services with ComponentOne WebAPI and FlexReport

In the ComponentOne 2021v3 release, we added the support for creating a C1WebApi Report Services in .Net Core 6. In previous versions, the report services were only compatible with .NET Framework. Due to this update, users can create FlexReport APIs using .NET 6.

ComponentOne Web API Edition provides Report Services that enable users to build HTTP services, which a variety of clients can consume for viewing, loading, and caching FlexReports and SSRS reports. These are REST-based API services, which communicate with HTML 5 ReportViewer control to display the report content on the web.

This article will demonstrate how to create report services in .NET Core 6 and display reports using ComponentOne FlexViewer in .NET MVC Core. You will learn how to do the following:

• Add C1WebApi
• Display the Report in FlexViewer
• Search in FlexReports
• Export to Various Formats

Ready to start building? Download ComponentOne Today!

Adding C1WebApi

For developing a Web API for FlexReport using .NET 6, we require the following packages:

• C1.AspNetCore.Api
• C1.AspNetCore.Api.Report

In Visual Studio, create a new project and use ASP.NET Core Web API as the template:

In the following dialog box, select the desired location and the name of the project:

In the next dialog box, select .NET 6 as the Framework for the project. This will create the WebApi project targeting .NET Core 6:

After the project is created, go to Tools → NuGet Package Manager → Manage NuGet Packages for Solution and install the above packages.

The C1.AspNetCore.Api package provides the core functionality of C1WebApi, like sending or receiving data from the client and the C1.AspNetCore.Api.Report package contains API for fetching and parsing FlexReports. Now, we will add the C1WebApi functionality and add a report provider. Add the following lines to Program.cs file:

using C1.AspNetCore.Api;  
...  
app.UseC1Api();  
var root = app.Environment.ContentRootPath;  
app.UseReportProviders().AddFlexReportDiskStorage("Root", Path.Combine(root, "Reports")); 

The UseC1Api method will create an API for all the services provided by the C1WebApi, and the AddFlexReportDiskStorage method will bind the API to the Reports folder inside the root of the project. Here, the Root is the key that can be used for referencing this folder while fetching the reports.

Now we will add the Reports folder to the project. Right-click on the project name, select Add → New Folder, and name the folder as Reports:

We can put the FlexReports file in this folder. For this article, I am using the sample reports already provided with ComponentOne. Go to Documents\ComponentOne Samples\Web Api\v4.5.2\CS\WebApi\WebApi\ReportsRoot\FinancialReports and copy the BalanceSheet.flxr report into the Reports folder created previously.

Once copied, run the application by pressing F5 and going to the following URL:

https://localhost:/api/report/Root

This will return all the reports containing the Reports folder in JSON format. Here the Root key has been used to fetch the reports. The result may vary depending upon your machine:

Note: It is unnecessary to have the Reports folder inside the project, and it could be anywhere on the machine. But make sure that the project has permission to read/write this folder and the files inside it.

Displaying the Report in FlexViewer

The primary purpose of this article is to display the reports. The FlexReports are saved in XML format, which is difficult for users to understand. So, we need a way to parse this XML and display it in a user-friendly format.

The C1WebApi Report service is used to parse this report from XML, and the FlexViewer control is used to display this parsed report. In this article, we will use ComponentOne MVC Core FlexViewer control. In your MVC Core project, add the following NuGet packages:

• C1.AspNetCore.Mvc
• C1.AspNetCore.Mvc.FlexViewer

While creating a new project in Visual Studio, select the ASP.NET Core Web App (Model-View-Controller) template and click on Next:

In the next dialog box, enter the name of your project and the desired location where the project should be created:

In the Additional Information dialog box, select .NET 6 as the Framework same as the Web API project, and create the project:

After the project is created, install the above packages. Once these packages are installed, we need to add the reference of these packages to cshtml files. In Views\Shared_Layout.cshtml file, add the following lines just before the head tag:

<c1-styles />  
<c1-scripts>  
   <c1-basic-scripts />  
   <c1-flex-viewer-scripts />  
</c1-scripts> 

And in the Views_ViewImports.cshtml file, add the following tag helpers:

@addTagHelper *, C1.AspNetCore.Mvc  
@addTagHelper *, C1.AspNetCore.Mvc.FlexViewer  

Now we have added the reference of MVC Controls, we can easily add the FlexViewer control and bind it to the WebApi service. In the Views\Home\Index.cshtml file, add the following code snippet:

<c1-report-viewer service-url="http://localhost:<port>/api/report" file-path="Root/BalanceSheet.flxr" report-name="BalanceSheet"></c1-report-viewer> 

Here, service-url is the URL of C1WebApi. The file-path is the path to the FlexReport file where the root folder is the key that we added while creating the API, and report-name is the name of the report to display. After adding the required code, run the application, and the result will be similar to this:

Searching in FlexReports

The search feature is built into the FlexViewer. Whenever the user enters a search key, the C1WebApi is called, and it returns the search results in JSON format. The results are then parsed by the FlexViewer and displayed on the FlexReport. Click on the search button on the left toolbar and enter the search string:

Exporting to Various Formats

C1WebApi also supports exporting the FlexReport in various formats for future use. The following formats are available:

• Adobe PDF Document
• HTML SVG Document
• TIFF, JPG, PNG, BMP, and GIF Images
• Open XML Word Document
• Open XML Excel Document

On the left toolbar, click the export button, select the appropriate format, and click on Export:

Documentation: /componentone/docs/webapi/online-webapicore/reportservices.html

Demo: https://demos.componentone.com/aspnet/webapiexplorer

Sample: https://bitbucket.org/ashwin2409/flexreportnet6/src/master/