Editing Reports with the Web Designer (Video)

ActiveReports has been pivotal in providing desktop-based reporting experience to its users for a long time. With the new release of ActiveReports 13.2, the report designing capabilities to Web have been enhanced, with the introduction of the Web-based Designer.

In a previous article, we show you how to embed the ActiveReports ProDesigner for Web in an ASP.NET app. Here, we'll see how to open report in ProDesigner to edit, update, and save the changes using a Web-based portal. We’ll use a finance company as an example.

Using the ActiveReports ProDesigner in a Financial Application

A finance firm is operating an on-premise Windows-based Wealth Management Portal and is using ActiveReports Professional End User Designer for ad hoc analysis of the data. Because of costs involved with maintenance of such systems on user's machines, the management of the company decides to migrate the legacy desktop portal to a Web-based portal. ActiveReports ProDesigner is providing the ad hoc reporting capabilities to their users.

Based on the requirements from management, developers build a web page that lists the reports in the system under the "Reports" tab as shown below. They want to open a report in the ActiveReportProDesigner, (on the click of “Edit” button) and save the changes to the report.

ActiveReports ProDesigner

Let's see how we can meet this requirement using the ProDesigner. For the purpose of this article, we have modified the product sample "WebDesigner_MVC" shipped with ActiveReports 13.

Editing a Report in the ProDesigner

To open a report for editing in the ProDesigner, follow these steps:

1. Define the report's location in project middleware, here Startup.cs
2. public class Startup
3. {

4. private static readonly DirectoryInfo ResourcesRootDirectory = new DirectoryInfo(String.Format(@"{0}.\resources\", HttpRuntime.AppDomainAppPath));
   

5. public void Configuration(IAppBuilder app) {
6. app.UseDesigner(config => config.UseFileStore(ResourcesRootDirectory));
7. } }
8. Provide the report information to the "designerOptions" API of the ProDesigner on the view page, here Index.cshtml.
9. <script>
10. var designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions(baseServerApi);

11. designerOptions.reportInfo = 'Myreport.rdlx";
    

12. GrapeCity.ActiveReports.WebDesigner.renderApplication('designerId', designerOptions); </script>

Saving the Changes to a Report using ProDesigner

The function should call "saveReport" API, providing the report ID or name to the save the definition to.

<script>
    designerOptions.onSave = function onSAve(options) {
            GrapeCity.ActiveReports.WebDesigner.api.saveReport({
                reportInfo: {
                    id: options.reportInfo.id,
                    name: options.reportInfo.name,
                },
            });;
    });
<script>

Watch the Video

Video file

Download the sample

Download the sample above or create to edit your reports in the ActiveReports Web-based ProDesigner.

If you have any questions about this tutorial, please leave us a comment. Additionally, if you have a request for a specific demo, be sure to leave a comment below!