Progress® Telerik® Reporting R3 2019

Web Report Designer

Telerik Web Report Designer is a HTML5/JavaScript/CSS3 jQuery-based widget that allows developers to integrate a report designer into their web applications. The styling is based on Kendo UI Sass Material theme. The Telerik Web Report Designer preview the reports in an HTML5 Report Viewer.

Although the current R3 2019 version of the Web Report Designer offers beyond-basics functionality, it still lacks some valuable features and should be regarded as a concept preview. In the subsequent releases of Telerik Reporting our efforts will be concentrated on filling the capabilities gap [between the current report designers and the Web Report Designer], so our users can take advantage of a tool that equals and even exceeds the functionalities of the desktop report designers.

Web Report Designer elements

The Web Report Designer consists of the following areas:

Web Report Designer With Dashboard Report
  • Design surface - shows the design layout of the report. Provides tools for selecting, moving, resizing and editing the report items.

  • Menu area - provides buttons for creating a new report and opening, saving or previewing an already existing one. Also, allows switching between loaded reports and shows their save state.

  • Properties area - displays the properties of the selected report item. In case multiple items are selected, shows only the properties that are marked as "mergeable", in other words properties that can be applied to all items in the current selection. The list of the properties can be organized in categories or in alphabetical order.

  • Components - lists the available report components that can be added to the report. The items are organized in groups based on their type. The area supports two kinds of layout - grid and list. List is the default view.

  • Explorer - represents the report structure in a tree-like view. Allows the selection of the visual and non-visual report components and configures their properties.

How it works

The Web Report Designer uses a dedicated ASP.NET WebAPI REST service as a backend. The service is responsible for the storage operations like creating, opening or saving report definitions in a specified folder, as well as handling the various requests that concern server-side processing and rendering. The public methods of the service can be overwritten to adjust its functionality to a specific scenario.

How to use it in an application

Requirements:

  • The Web Report Designer can be integrated in any ASP.NET Web Application, both under .NET Framework 4.5.1+ or .NET Core 2.1+.

  • The following NuGet packages are required:

    • Telerik.Reporting

    • Telerik.WebReportDesigner.Services

Prerequisites:

  • Web browser that supports JavaScript EcmaScript 6: Google Chrome 77.0 or newer; Mozilla Firefox 69.0 or later, Microsoft Edge 44.17763 or later.

  • jQuery 3.3.1 or later.

  • Kendo UI 2018.2.620 or later.

  • Telerik Report Viewer script. By default, it is requested from the service.

  • Web Report Designer script. By default, it is requested from the service.

  • All other scripts and styles will be provided by the Web Report Designer service when the designer widget is loaded. The list of loaded resources:

    • jQuery UI 1.12.1 library. We recommend using the version of jQuery UI that is served by the Web Report Designer service because it includes a fix related to the dragging and dropping components.

    • webReportDesigner.min.css stylesheet.

    • webReportDesignerTheme.css stylesheet.

  • The web report designer in our example is stylized using Roboto font. A link to a font of your preference can be added before creating the Web Designer widget on the page.

Creating a Sample ASP.NET Core Project:

  1. Open Visual Studio 2019..

  2. From the File menu, select New > Project.

  3. In the Create New Project dialog, select ASP.NET Core Web Application project template. Choose a name and location for the project and click Create.

  4. On the Create New ASP.NET Core Web Application dialog select from the drop downs .NET Core and ASP.NET Core 2.1. Next from the list of templates select API. Click Create.

Adding the required NuGet Packages:

In the Requirements section, there are listed the NuGet packages which are required for a .NET Core application that uses Telerik Reporting. These dependencies are automatically resolved when using NuGet packages. Otherwise they need to be manually added to the project.

Reference Telerik.Reporting and Telerik.WebReportDesigner.Services NuGet packages from the private Telerik NuGet feed at https://nuget.telerik.com/nuget. How to add a NuGet feed is explained in https://www.visualstudio.com/en-us/docs/package/nuget/consume. Telerik account is required to access the private repository.

For static files support add Microsoft.AspNetCore.StaticFiles Microsoft.AspNetCore.StaticFiles NuGet package.

For Office OpenXML document formats (XLSX, DOCX and PPTX) install the DocumentFormat.OpenXML and Telerik.Reporting.OpenXmlRendering NuGet packages. The DocumentFormat.OpenXML package support out of the box version 2.7.2.0 and above.

Setting up the Report Designer REST service:

  1. As the Web Report Designer preview the reports in an HTML5 Report Viewer, it relies on Reporting REST Web Api Service. .NET Core applications provide new way of storing the configuration. The Strings and Engine Configuration section describes how to activate JSON file configuration and how to add a singleton service to the container services. In this case to the web report designer REST service.

  2. Implement a Report Designer controller. Right-click on the Controllers folder and add a new item: Add - New item - Web API Controller Class item. Name it ReportDesignerController. This will be our Telerik Web Report Designer REST service in the project.

  3. Inherit the ReportDesignerControllerBase type and setup the ReportServiceConfiguration instance. Notice that there is another configuration instance named ReportDesignerServiceConfiguration, which will initialize the definition storage. This is the class, responsible for opening, saving etc. the report definitions. This is how a basic implementation of the controller should look like:

    C#
    namespace CSharp.AspNetCoreDemo.Controllers
    { 
        using Microsoft.AspNetCore.Mvc; 
        using System.IO; 
        using Telerik.Reporting.Cache.File; 
        using Telerik.Reporting.Services; 
        using Telerik.Reporting.Services.AspNetCore; 
        using Telerik.WebReportDesigner.Services; 
        using Telerik.WebReportDesigner.Services.Controllers; 
    
        [Route("api/reportdesigner")] 
        public class ReportDesignerController : ReportDesignerControllerBase 
        { 
            readonly string reportsPath = string.Empty; 
    
            public ReportDesignerController(ConfigurationService configSvc) 
            { 
                this.reportsPath = Path.Combine(configSvc.Environment.WebRootPath, "..", "..", "..", "..", "Report Designer", "Examples"); //concatenate the path using the OS path delimiter. 
    
                this.ReportServiceConfiguration = new ReportServiceConfiguration 
                { 
                    ReportingEngineConfiguration = configSvc.Configuration, 
                    HostAppId = "Html5DemoAppCore", 
                    Storage = new FileStorage(), 
                    ReportResolver = new ReportFileResolver(this.reportsPath), 
                }; 
    
                this.ReportDesignerServiceConfiguration = new ReportDesignerServiceConfiguration 
                { 
                    DefinitionStorage = new FileDefinitionStorage(this.reportsPath) 
                }; 
            } 
        } 
    }

Adding the Web Report Designer:

  1. Add a new HTML Page for the Web Report Designer by right-clicking on wwwroot and Add > New Item... > HTML Page. Name the file index.html. Add the required references to load the font, jQuery, Telerik Kendo UI libraries, telerikReportViewer and webReportDesigner scripts listed in the example below. Finally, add the initialization of the telerik_WebReportDesigner widget.

    The complete report viewer page should look like this:

    HTML
    <!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <title>Telerik Web Report Designer Demo</title> 
    
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    
        <link href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap" rel="stylesheet"> 
    </head> 
      <body> 
        <div id="webReportDesigner"> 
            loading... 
        </div> 
    
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
        <script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script> 
        <script src="api/reportdesigner/resources/js/telerikReportViewer"></script> 
        <script src="api/reportdesigner/designerresources/js/webReportDesigner"></script> 
    
        <script type="text/javascript"> 
            $(document).ready(function () { 
                $("#webReportDesigner").telerik_WebReportDesigner({ 
                    persistSession: false, 
                    toolboxArea: { 
                        layout: "list" 
                    }, 
                    serviceUrl: "api/reportdesigner/", 
                    report: "Product Catalog.trdp" 
                }).data("telerik_WebDesigner"); 
            }); 
        </script> 
      </body> 
    </html>
  2. To setup the index.html as startup page check Make index.html as startup file in ASP.NET Core. Then, change the launchUrl to index.html in launchSettings.json.

  3. Finally, run the project to preview the web designer.

Examples

You can find the complete example setup of the Web Report Designer in the AspNetCoreDemo located in Telerik Reporting installation folder. For example, C:\Program Files (x86)\Progress\Telerik Reporting {VERSION}\Examples\CSharp\AspNetCoreDemo. The Web Report Designer’s page is in wwwroot folder. To setup the page to be a startup page, change the launchUrl to webReportDesigner.html in launchSettings.json.

In this article
Not finding the help you need?