Web Designer Angular(Core)
In This Topic
The WebDesigner_Angular(Core) sample demonstrates the use of GrapeCity ActiveReports Web Designer with an Angular 8 app and ASP.NET Core backend.
Web Designer
Note: To run this sample, you must have
- Visual Studio 2019 (https://visualstudio.microsoft.com/vs/) version 16.4.
- .NET Core 3.1 SDK (https://dotnet.microsoft.com/download) or later installed on your machine.
- .NET Core Hosting Bundle (https://dotnet.microsoft.com/download/dotnet-core/thank-you/runtime-aspnetcore-3.1.2-windows-hosting-bundle-installer) (for deployment to IIS)
- Angular 8 requires Node.js (https://nodejs.org) 10 or later.
Sample Location
..\WebSamples14\JsViewerSamples\WebDesigner_Angular(Core)
Details
When you run the sample, the Web Designer opens in your browser wherein you can create, edit, or modify your reports. Following are the main menu options:
- File: Contains options to create, open, or save reports. It also contains the version information in About option.
- Home: Consists of report editing options such as cut, copy, paste, and delete. It also provides shortcuts for text formatting such as font, font size, font color, and horizontal and vertical text alignments.
- Report: Contains options to add, delete, or move pages (in Page report) and add or remove header and footer (RDL report), and change report themes.
- Preview: Click Preview to preview reports.
- Properties: Displays the properties of the selected report element. If more than one element is selected, only their common properties are shown.
- Data: Contains options to manage daya sources, data sets, and parameters. It also displays common values such as current date and time, page number, total pages, and more.
Note: The timeout error sometimes appears on running the WebDesigner_Angular(Core) sample with default settings. In this case, you should increase the connection timeout period. See Troubleshooting for details on how to resolve this issue.
The project consists of the following elements.
- ClientApp folder: This folder contains a standard Angular CLI app that is used for all UI concerns.
- Controllers folder: Contains DataSets and Templates controllers.
- Datasets: Contains JSON datasets - Categories, Employees, Products, and DataSet with Parameters.
- Resources: Contains reports, themes, images, etc that are used by the project to illustrate Web Designer.
- appsettings.json: The json configuration file.
- readme: This file contains the instructions on how to run the sample project.
- Startup.cs: This is the default startup file.
- Web.config: This configuration file contains the httpHandlers that allow ActiveReports to process reports on the Web. Note that you need to manually update version information here when you update your version of ActiveReports.
- Services: Consists of classes that get datasets and templates information.
- wwwroot: Contains designer CSS and JavaScript files.