Skip to main content Skip to footer

How to add HTML5 Report Viewer to a Web App

C1 Web API Report Services enables you to build HTTP services, which can be consumed by a variety of clients for viewing, loading and caching reports, including the Wijmo ReportViewer. These are REST-based API services, which communicated with HTML 5 ReportViewer control to display the report content on the web.

Available as Visual Studio template, C1 Web API enables you to create report services on Visual Studio. Client applications send a request to the report services application to load reports, export reports, and allow user to use parameters in the report. The service supports exporting your reports to PDF, Excel, HTML, RTF, OpenXML, and Image.

01_diagram

Set up report services for the report viewer

Create a report services application by C1 Web API Project Templates in Visual Studio:

  1. Installed ASP.NET Web API Edition from here.
  2. Select a C1 Web API Application template in Visual Studio New Project dialog:

    02_visualstudiotemplate

  3. The project template wizard shows. Please check Report services and click OK:

    03_projectsettings

  1. Add reports to this web application.

  2. FlexReport or C1Report:

  3. Copy the report definition file to the application. Please also copy the related database file and update the connect string of the report if necessary.

    04_reportdefinition

  1. Add a FlexReport disk storage in Configure method of Startup. For example:

    app.UseReportProviders().AddFlexReportDiskStorage("Root", System.IO.Path.Combine(System.Web.HttpRuntime.AppDomainAppPath, "ReportsRoot"));
    
  • Regarding SSRS reports: please register an SSRS report server in Startup:

    app.UseReportProviders().AddSsrsReportHost("ssrs", "http://ssrshost/ReportServer", new System.Net.NetworkCredential("username", "password"));
    
  1. Run the application in VS, or publish it in IIS.

Wijmo's ReportViewer has been launched as a control, and is available with Wijmo Enterprise. You'll be able to view FlexReports in ReportViewer, and in order to generate a FlexReport—and connect the ReportViewer to the FlexReport— you'll need GrapeCity's Ultimate suite. Ultimate includes the code-free standalone report designer, FlexReport Designer, along with a Web API.

Read more about GrapeCity's Ultimate suite

MESCIUS inc.

comments powered by Disqus