The current version of the Web Report Designer offers beyond-basics functionality, but is still under active development. Please give it a thorough review to make sure the designer fits your scenario before including it in a production project.
The Web Report Designer consists of the following areas:
![Web Report Designer With Dashboard Report](images/Designer/web-report-designer-dashboard.png)
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.
Asset Manager - enables users to organize resources in the Resource Storage of the server. Files and folders can be created, moved, renamed, and deleted, and files can also be uploaded and downloaded. It is accessible through the main menu. It is also used as an editor to select the source for a PictureBox, external stylesheets, CSV and JSON data source, and reports for Subreport items and ReportBooks (Combined Reports).
Search - provides the ability to search throughout all the designer areas: components, existing report items, or the available properties. Now you can add a new component, navigate to the needed report item or change a property value with just a few keystrokes.
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.
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:
jQuery 3.3.1 or later.
Kendo UI 2022.1.301 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 subset that is served by the Web Report Designer service because it includes a fix related to the dragging and dropping components. The subset includes Draggable, Droppable, Resizable and their dependencies.
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.
Below you can find the list of widgets that the Web Report Designer requires in order to work properly. Note that the widgets have other dependencies. The Touch widget is required only for the gestures. Kendo's MVVM is a set of few Kendo classes that facilitates the process of separating the model from the view. It is used when databinding the KendoUI widgets to some model data.
The subset may be built with the following command:
gulp custom -c mvvm,button,buttongroup,combobox,dateinput,datepicker,datetimepicker,dropdowntree,grid,editor,filemanager,listbox,listview,menu,multiselect,panelbar,slider,splitter,tabstrip,tooltip,treeview,upload,window,touch,autocomplete