ActiveReports 15 .NET Edition
ActiveReports 15 User Guide / Concepts / ActiveReports Web Designer / Pure JavaScript Integration
In This Topic
    Pure JavaScript Integration
    In This Topic
    Let us create an ASP.NET Core application using ActiveReports and render the reports in the Web Designer.
    1. To use npm packages, your project must contain a package.json file. Open the Tools menu > NuGet Package Manager and run the following command in the Package Manager before installing any code dependencies:

      npm init -y
         
    2. Next, run the following command in the Package Manager Console, to download and install the Web Designer-related files and folders from NPM 

      npm install @grapecity/ar-designer

      The designer files/folders will be downloaded in your current directory: .\node_modules\@grapecity\ar-designer\dist
    3. Copy the following designer files/folder and paste it to your sample project wwwroot subfolder. If you don't see the 'wwwroot' folder, create the folder with the same name.
      • web-designer.css
      • web-designer.js
      • vendor folder
    4. In Solution Explorer, right-click 'wwwroot' folder and select Add > New Item.
      Solution Explorer
    5. Select HTML Page item type, input index.html and click Add.
      Add New Item dialog
    6.  In Solution Explorer, find newly-added index.html and modify its content as follows:
      index.html
      Copy Code
      <!DOCTYPE html>
      <html>
      <head>
          <title>Web Designer Sample</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <meta http-equiv="x-ua-compatible" content="ie=edge">
          <!-- No Virtual Directory -->
          <base href="/">
          <!-- designer-related css -->
          <link rel="stylesheet" href="vendor/css/bootstrap.min.css" />
          <link rel="stylesheet" href="vendor/css/fonts-googleapis.css" type="text/css">
          <link rel="stylesheet" href="web-designer.css" />
      </head>
      <body>
          <!-- designer-related js -->
          <script src="web-designer.js"></script>
          <!-- designer root div -->
          <div id="designer-id" style="width: 100%; height: 100%;"></div>
          <script>
          // create designer options
          var designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions();
       
          /* Optional: Save Report */
          designerOptions.saveButton.visible = true;
       
          /* Optional: Save Report As */
          designerOptions.saveAsButton.visible = true;
       
          /* Optional: Open Report */
          designerOptions.openButton.visible = true;
      
          /* Optional: Add/Edit/Remove Data Sets */
           designerOptions.dataTab.dataSets.canModify = true;
                   
          /* Optional: Add/Edit/Remove Data Sources */
          designerOptions.dataTab.dataSources.canModify = true;
       
          // render designer application
          GrapeCity.ActiveReports.WebDesigner.renderApplication('designer-id', designerOptions);
          </script>
      </body>
      </html> 
      
    7. Build your solution (Build> Build Solution) and run it. Web Designer with a blank RDL report opens in your browser.

      Web Designer