ActiveReports 15 .NET Edition
ActiveReports 15 User Guide / Concepts / ActiveReports Web Designer / Integration to React Application
In This Topic
    Integration to React Application
    In This Topic

    This page explains how you can embed the ActiveReports Web Designer component in your React application (ASP.NET Core). To run the React Application Server, you will require the node.js JavaScript runtime.

    1. Open Microsoft Visual Studio 2019 and create a new ASP .NET Core Web Application project.

      Create a New Project Dialog

    2. Type a name for your project and click Create.

      Configure your New Project Dialog

    3. Select ASP.NET Core 5.0 and choose the React.js project template from the dialog.

      Create a New Project Dialog

    4. Right-click the project in the Solution Explorer and select Manage Nuget Packages.

    5. Add the following package to the project.

      GrapeCity.ActiveReports.Aspnetcore.Designer
      GrapeCity.ActiveReports.Aspnetcore.Viewer

    6. Open 'Startup.cs' file and add the following 'using' statements at the top.

      using GrapeCity.ActiveReports.Aspnetcore.Viewer;
      using GrapeCity.ActiveReports.Aspnetcore.Designer;
      using System.Reflection;

    7. Open 'Startup.cs' file and add the following code snippet in the ConfigureServices method (after the services.AddControllersWithViews(); statement):

      Startup.cs
      Copy Code
         services
             .AddReporting()
             .AddDesigner()
             .AddMvc(options => options.EnableEndpointRouting = false)
             .AddJsonOptions(options => options.JsonSerializerOptions.PropertyNamingPolicy = null);
      
    8. Similarly, add the following code snippet in the Configure method of the 'Startup.cs' file (before app.UseStaticFiles(); statement):

      Startup.cs
      Copy Code
         app.UseReporting(settings =>
         {
             settings.UseEmbeddedTemplates("WebDesigner_React", Assembly.GetAssembly(GetType()));
             settings.UseCompression = true;
         });
         app.UseDesigner();
      
    9. Expand the ClientApp folder.

    10. Open 'package.json' file and add the following packages for ActiveReports' Viewer and Designer under 'dependencies':

      "@grapecity/ar-designer": "latest",
      "@grapecity/ar-viewer": "latest",

    11. Open ClientApp folder in the command prompt or terminal window and run the following command to install the npm packages.

      npm install

      The designer and viewer files/folders will be downloaded in your current directory: .\node_modules\@grapecity\ar-designer\dist and .\node_modules\@grapecity\ar-viewer\dist.
    12. Right-click the ClientApp\public folder to add a new subfolder with the name 'assets'.

    13. Copy the following designer files/folder and paste it to your 'assets' folder inside the ClientApp\public folder:

      • web-designer.css

      • web-designer.js

      • vendor folder

      • jsViewer.min.css

      • jsViewer.min.js

      • custom-locale.json

    14. Expand the ClientApp\public folder and open the 'index.html' file.

    15. Import the following css files for the viewer and designer in the head section of the 'index.html' file.

      index.html
      Copy Code
          <link rel="stylesheet" href="assets/vendor/css/bootstrap.min.css" />
          <link rel="stylesheet" href="assets/vendor/css/fonts-googleapis.css" type="text/css" />
          <link rel="stylesheet" href="assets/jsViewer.min.css" />
          <link rel="stylesheet" href="assets/web-designer.css" />             
      
    16. Similarly, import the following js files for the viewer and designer in the body section of the 'index.html' file.

      index.html
      Copy Code
      <script src = "assets/jsViewer.min.js"> </script>
      <script src = "assets/web-designer.js"> </script>           
      
    17. Select 'App.js' file inside the ClientApp\src folder and replace the existing code with the following code:

      App.js
      Copy Code
      import React, { Component } from 'react';
      import './custom.css'
      var viewer = null;
      export default class App extends Component {
          constructor() {
              super();                
          }
          componentDidMount() {
              const id = null;
              const designerOptions = window.GrapeCity.ActiveReports.WebDesigner.createDesignerOptions();
              designerOptions.reportInfo = id ? { id: id, name: id } : null;
              designerOptions.reportItemsFeatures.table.autoFillFooter = true;
              designerOptions.openButton.visible = true;
              designerOptions.saveButton.visible = true;
              designerOptions.saveAsButton.visible = true;
              designerOptions.documentation.home = 'https://www.grapecity.com/activereports/docs/v15/online-webdesigner/overview.html';
              designerOptions.openViewer = this.openViewer.bind(this);
              designerOptions.dataTab.dataSets.canModify = true;
              designerOptions.dataTab.dataSources.canModify = true;
              window.GrapeCity.ActiveReports.WebDesigner.renderApplication('designer-host', designerOptions);
          }
          openViewer(options) {
              if (viewer) {
                  viewer.openReport(options.reportInfo.id);
                  return;
              }
              viewer = window.GrapeCity.ActiveReports.JSViewer.create({
                  locale: options.locale,
                  element: '#' + options.element,
                  reportService: {
                      url: 'api/reporting',
                  },
                  reportID: options.reportInfo.id,
                  settings: {
                      zoomType: 'FitPage'
                  },
              });
          }
          closeViewer() {
              this.viewerElement.nativeElement.firstElementChild.remove();
          }
          render() {
              return (
                  <div id="designer-host"></div>
              );
          }
      }             
      
    18. Open 'custom.css' inside the ClientApp\src folder and add the following css to set the designer's host element's size to 100%.

      custom.css
      Copy Code
      #designer-host {
          margin: 0 auto;
          width: 100%;
          height: 100vh;
      }
      
    19. Add a new item called 'web.config' file in the application's root and replace the content with the following code:

      web.config
      Copy Code
      <?xml version="1.0" encoding="utf-8"?>
      <!--
        For more information on how to configure your ASP.NET application, please visit
        http://go.microsoft.com/fwlink/?LinkId=301880
        -->
      <configuration>
        <system.webServer>
          <security>
            <requestFiltering allowDoubleEscaping="true"/>
          </security>
        </system.webServer>
      </configuration>
      
    20. Press Ctrl + Shift + B to build your application and then press F5 to run it.