Search results
Suggest a FeaturePDF

Add Web Report Designer to a javascript application

This section explains the steps required to add Web Report Designer to a javascript application.

To get start quickly with Report Designer, you can check on this video:

HTML file creation

Create a basic HTML file and place it in a separate folder. Add the below code snippet,

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Report Designer first HTML page</title>
    </head>
    <body>
    </body>
</html>

Refer Scripts and CSS

Directly refer the required scripts and style sheets that are mandatorily required to render the web Report Designer, from CDN links.

Refer to the Dependencies to learn more details about web Report Designer dependent scripts and style sheets links.

You can use the following code in the <head> tag of the HTML page as in the following order.

<link href="https://cdn.boldreports.com/6.1.34/content/material/bold.reports.all.min.css" rel="stylesheet" />
<link href="https://cdn.boldreports.com/6.1.34/content/material/bold.reportdesigner.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.css" rel="stylesheet" />
<script src="https://cdn.boldreports.com/external/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://cdn.boldreports.com/external/jsrender.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/sql-hint.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/sql/sql.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/vb/vb.min.js" type="text/javascript"></script>

<!--Used to render the gauge item. Add this script only if your report contains the gauge report item. -->
<script src="https://cdn.boldreports.com/6.1.34/scripts/common/ej2-base.min.js"></script>
<script src="https://cdn.boldreports.com/6.1.34/scripts/common/ej2-data.min.js"></script>
<script src="https://cdn.boldreports.com/6.1.34/scripts/common/ej2-pdf-export.min.js"></script>
<script src="https://cdn.boldreports.com/6.1.34/scripts/common/ej2-svg-base.min.js"></script>
<script src="https://cdn.boldreports.com/6.1.34/scripts/data-visualization/ej2-lineargauge.min.js"></script>
<script src="https://cdn.boldreports.com/6.1.34/scripts/data-visualization/ej2-circulargauge.min.js"></script>

<!--Render the map item. Add this script only if your report contains the map report item.-->
<script src="https://cdn.boldreports.com/6.1.34/scripts/data-visualization/ej2-maps.min.js"></script>

<script src="https://cdn.boldreports.com/6.1.34/scripts/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/6.1.34/scripts/common/bold.reports.widgets.min.js"></script>
<script src="https://cdn.boldreports.com/6.1.34/scripts/common/bold.report-designer-widgets.min.js"></script>

<!--Used to render the chart item. Add this script only if your report contains the chart report item.-->
<script src="https://cdn.boldreports.com/6.1.34/scripts/data-visualization/ej.chart.min.js"></script>
<script src="https://cdn.boldreports.com/6.1.34/scripts/bold.report-viewer.min.js" type="text/javascript"></script>
<script src="https://cdn.boldreports.com/6.1.34/scripts/bold.report-designer.min.js" type="text/javascript"></script>

Whether you want to get the scripts and style sheets as local, then install the BoldReports.Javascript NuGet package in your application. To learn more about rendering a report with data visualization report items, refer to the how to render data visualization report items section.

Initialize Report Designer

Add the <div> element within the <body> section, which acts as a container for boldReportDesigner widget to render and then initialize the boldReportDesigner widget within the script section as shown below,

        <!-- Creating a div tag which will act as a container for boldReportDesigner widget.-->
        <div style="height: 600px; width: 950px; min-height: 400px;" id="designer"></div>
        <script type="text/javascript">
            $(function () {
                $("#designer").boldReportDesigner();
            });
        </script>

Create Web API service

The web Report Designer requires a Web API service to process the data and file actions, so you must create any one of the following Web API services.

This tutorial uses the same Web API service application created in Create ASP.NET Web API Service tutorial.

Set service URL

Set the Web API controller name to the serviceUrl property of the web Report Designer.

Add the following code in the <body> tag of the web Report Designer HTML page.

        <!-- Creating a div tag which will act as a container for boldReportDesigner widget.-->
        <div style="height: 600px; width: 950px; min-height: 400px;" id="designer"></div>
        <script type="text/javascript">
            $(function () {
                $("#designer").boldReportDesigner({
                    serviceUrl: "https://demos.boldreports.com/services/api/ReportingAPI"
                });
            });
        </script>

Run the application

Build and run the javascript application. Preview and edit the result using the following.

index.html
index.js
ReportingAPIController.cs
    <body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
        <div id="designer" style="position: absolute; height: 100%; width: 100%;"></div>
        <script src="index.js"></script>
    </body>
    $(function () {
        $("#designer").boldReportDesigner({
            serviceUrl: "https://demos.boldreports.com/services/api/ReportingAPI"
        });
    });
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using BoldReports.Web;
using BoldReports.Web.ReportViewer;
using BoldReports.Web.ReportDesigner;

namespace ReportDesignerAPIService
{
    [System.Web.Http.Cors.EnableCors(origins: "*", headers: "*", methods: "*")]
    public class ReportingAPIController : ApiController, IReportDesignerController
    {
        /// <summary>
        /// Get the path of specific file
        /// </summary>
        /// <param name="itemName">Name of the file to get the full path</param>
        /// <param name="key">The unique key for report designer</param>
        /// <returns>Returns the full path of file</returns>
        [NonAction]
        private string GetFilePath(string itemName, string key)
        {
            string dirPath = Path.Combine(HttpContext.Current.Server.MapPath("~/")+ "Cache", key);

            if (!Directory.Exists(dirPath))
            {
                Directory.CreateDirectory(dirPath);
            }

            return Path.Combine(dirPath, itemName);
        }

        /// <summary>
        /// Action (HttpGet) method for getting resource of images in the report.
        /// </summary>
        /// <param name="key">The unique key for request identification.</param>
        /// <param name="image">The name of requested image.</param>
        /// <returns>Returns the image as HttpResponseMessage content.</returns>
        [System.Web.Http.ActionName("GetImage")]
        [AcceptVerbs("GET")]
        public object GetImage(string key, string image)
        {
            return ReportDesignerHelper.GetImage(key, image, this);
        }

        /// <summary>
        /// Action (HttpPost) method for posting the request for designer actions.
        /// </summary>
        /// <param name="jsonData">A collection of keys and values to process the designer request.</param>
        /// <returns>Json result for the current request.</returns>
        public object PostDesignerAction(Dictionary<string, object> jsonData)
        {
            //Processes the designer request and returns the result.
            return ReportDesignerHelper.ProcessDesigner(jsonData, this, null);
        }

        /// <summary>
        /// Sets the resource into storage location.
        /// </summary>
        /// <param name="key">The unique key for request identification.</param>
        /// <param name="itemId">The unique key to get the required resource.</param>
        /// <param name="itemData">Contains the resource data.</param>
        /// <param name="errorMessage">Returns the error message, if the write action is failed.</param>
        /// <returns>Returns true, if resource is successfully written into storage location.</returns>
        [NonAction]
        public bool SetData(string key, string itemId, ItemInfo itemData, out string errorMessage)
        {
            errorMessage = string.Empty;

            if (itemData.Data != null)
            {
                File.WriteAllBytes(this.GetFilePath(itemId, key), itemData.Data);
            }
            else if (itemData.PostedFile != null)
            {
                var fileName = itemId;
                if (string.IsNullOrEmpty(itemId))
                {
                    fileName = Path.GetFileName(itemData.PostedFile.FileName);
                }
                itemData.PostedFile.SaveAs(this.GetFilePath(fileName, key));
            }

            return true;
        }

        /// <summary>
        /// Gets the resource from storage location.
        /// </summary>
        /// <param name="key">The unique key for request identification.</param>
        /// <param name="itemId">The unique key to get the required resource.</param>
        ///  <returns>Returns the resource data and error message.</returns>
        [NonAction]
        public ResourceInfo GetData(string key, string itemId)
        {
            var resource = new ResourceInfo();
            try
            {
                var filePath = this.GetFilePath(itemId, key);
                if (itemId.Equals(Path.GetFileName(filePath), StringComparison.InvariantCultureIgnoreCase) && File.Exists(filePath))
                {
                    resource.Data = System.IO.File.ReadAllBytes(filePath);
                }
                else
                {
                    resource.ErrorMessage = "File not found from the specified path";
                }
            }
            catch (Exception ex)
            {
                resource.ErrorMessage = ex.Message;
            }
            return resource;
        }

        /// <summary>
        /// Action (HttpPost) method for posted or uploaded file actions.
        /// </summary>
        public void UploadReportAction()
        {
            //Processes the designer file upload request's.
            ReportDesignerHelper.ProcessDesigner(null, this, System.Web.HttpContext.Current.Request.Files[0]);
        }

        /// <summary>
        /// Send a GET request and returns the requested resource for a report.
        /// </summary>
        /// <param name="key">The unique key to get the desired resource.</param>
        /// <param name="resourcetype">The type of the requested resource.</param>
        /// <param name="isPrint">If set to <see langword="true"/>, then the resource is generated for printing.</param>
        /// <returns> Resource object for the given key</returns>
        [System.Web.Http.ActionName("GetResource")]
        [AcceptVerbs("GET")]
        public object GetResource(string key, string resourcetype, bool isPrint)
        {
            return ReportHelper.GetResource(key, resourcetype, isPrint);
        }

        /// <summary>
        /// Report Initialization method that is triggered when report begin processed.
        /// </summary>
        /// <param name="reportOptions">The ReportViewer options.</param>
        [NonAction]
        public void OnInitReportOptions(ReportViewerOptions reportOption)
        {
            var resourcesPath = System.Web.Hosting.HostingEnvironment.MapPath("~/Scripts");

            reportOption.ReportModel.ExportResources.Scripts = new List<string>
            {
                resourcesPath + @"\bold-reports\common\bold.reports.common.min.js",
                resourcesPath + @"\bold-reports\common\bold.reports.widgets.min.js",
                //Gauge component scripts
                resourcesPath + @"\bold-reports\common\ej2-base.min.js",
                resourcesPath + @"\bold-reports\common\ej2-data.min.js",
                resourcesPath + @"\bold-reports\common\ej2-pdf-export.min.js",
                resourcesPath + @"\bold-reports\common\ej2-svg-base.min.js",
                resourcesPath + @"\bold-reports\data-visualization\ej2-lineargauge.min.js",
                resourcesPath + @"\bold-reports\data-visualization\ej2-circulargauge.min.js",
                //Map component script
                resourcesPath + @"\bold-reports\data-visualization\ej2-maps.min.js",
                //Report viewer Script
                resourcesPath + @"\bold-reports\data-visualization\ej.chart.min.js",
                resourcesPath + @"\bold-reports\bold.report-viewer.min.js"
            };

            reportOption.ReportModel.ExportResources.DependentScripts = new List<string>
            {
                resourcesPath + @"\jquery-1.7.1.min.js"
            };
        }

        /// <summary>
        /// Report loaded method that is triggered when report and sub report begins to be loaded.
        /// </summary>
        /// <param name="reportOptions">The ReportViewer options.</param>
        [NonAction]
        public void OnReportLoaded(ReportViewerOptions reportOption)
        {
            //You can update report options here
        }

        /// <summary>
        /// Action (HttpPost) method for posting the request for report process.
        /// </summary>
        /// <param name="jsonData">The JSON data posted for processing report.</param>
        /// <returns>The object data.</returns>
        public object PostReportAction(Dictionary<string, object> jsonData)
        {
            //Processes the report request and returns the result.
            return ReportHelper.ProcessReport(jsonData, this as IReportController);
        }
    }
}

Note: You can refer to our feature tour page for the JavaScript Report Designer to see its innovative features. Additionally, you can view our JavaScript Report Designer examples which demonstrate the rendering of SSRS RDLC and RDL reports.