How to Embed the ActiveReports ProDesigner into an Application (Video)

The ActiveReports ProDesigner is a standalone app and embeddable component available for both web and WinForms applications.

With flexible data binding in this .NET Web Designer, you can create new reports with the designer's drag-and-drop interface. The HTML5-based Web Designer allows you to give the power of ad-hoc reporting to your end-users.

In this video, we'll embed the ProDesigner in an application.

Watch the video:

Follow step-by-step:

For this tutorial, we've built a sample Wealth Management Portal on top of the existing WebDesigner_MVC sample shipped with ActiveReports 13.

Download the sample

We'll show how you can open reports listed on a Reports page for editing in the ProDesigner and save the changes to the report.

Click on the edit button to open the report in the ProDesigner.

Change the background color of the textbox and save the report.

Let's open the report again to see if the changes are saved.

We can see that the changes are now saved to the report.

Let's now take a look at the code to see how things are actually working.

First, in startup.cs, we configured the "UseDesigner" middleware and provided the report's location to its "UseFileStore" setting.

Once this is done, the next step is to bind the report name with designer options.

For this, we need the designer's view page, which is the Index file for Design view.

Somewhere in the script there is "designerOptions.reportInfo". This is the API where you should provide the report information to open it in the ProDesigner.

For this sample, we've fetched the report name from URL defined in DesignController. It is passed from the Reports page to the Design page via an anchor tag set for the Edit button in the portal.

Let's take a look at how the save function works.

On the designer's view page, we have defined a function providing the designer options as a parameter.

In the function, we have called the "saveReport" api which provides the report ID (or name to save the changes).

You can set the ID or name of the report opened in the designer using the designer options variable.

You can then assign this function to the designer options onSave method.

That's all you need to edit the report and then save the changes using the ActiveReports ProDesigner. If you have any questions, please leave them in the comment thread below.

Happy coding!