Using of Online Report Designer in FastReport .NET

In FastReport .NET 2015.1 we have released an Online Report Designer. This Designer can be used directly in the user's browser and allows to edit the appearance of a report template, modify the properties of objects, and edit the script and events.

The full-featured version of the Online Report Designer is available in the Professional edition of FastReport .NET. A demo version is available in Trial edition. You can download it from our site for free. The evaluation version cannot save reports back in the server.

At the moment Online Report Designer works together with the object WebReport. Also you can use the Designer in ASP.NET MVC. Online Designer allows you to edit the appearance of reports, modify the properties of objects, add new objects etc.

Online Designer can change the script of the report and event handlers of the report, but by default for security reasons this option is disabled. This feature can be enabled in the properties of the object WebReport. When this option is disabled the script contents after design will be ignored and replaced with the original text. Also, for security purposes we do not send in Designer built-in connection strings.

Report Designer is in development. Some types of objects are not yet supported. Also, you cannot edit dialog forms. All unsupported objects or properties retain their original values and do not change.

The scheme of Online Report Designer processes:

1. WebReport object loads in ASP.NET page.
2. WebReport sends an AJAX request to the handler of FastReport to get of online Designers container in iframe context (The code of the Report Designer is placed in a separate folder on the application site).
3. When Online Designer is loaded in browser it sends AJAX query to the handler for get of report template (getReportByUUIDFrom).
4. The server application prepares and sends a report template to the On-line Designer.
5. The Designer can request a preview of the current report. It sends request to the handler in server (makePreviewByUUID). The server application runs a received  report and sends back result in html. The Designer shows it in preview window. This preview can be printed or exported in several formats.
6. The Designer can save a report in server through AJAX query (saveReportByUUIDTo) with report contents. The server application prepares received data and sends request to call-back page in application.

Object WebReport exists in the server cache for a limited time, and then deleted from memory. Time of keeping an object in memory is determined in minutes in property WebReport.CacheDelay (by default : 60).

Step-by-step manual for set-up the On-line Report Designer:

1. First let’s copy a folder with Online Report Designer (by default: WebReportDesigner) from installation path to the web applications root.

2. Then check the file web.config for handler  settings that needed for WebReport functionality:
for IIS6:

<system.web>
…
<httpHandlers>
<add path="FastReport.Export.axd" verb="*" type="FastReport.Web.Handlers.WebExport"/>
</httpHandlers>
</system.web>

for IIS7:

<system.webServer>
<handlers>
<add name="FastReportHandler" path="FastReport.Export.axd" verb="*" type="FastReport.Web.Handlers.WebExport"/>
</handlers>
</system.webServer>
 

3. Then check the settings of the Report Designer in the file WebReportDesigner/*.config-data.js:
'getReportByUUIDFrom': '/FastReport.Export.axd?getReport=',
'saveReportByUUIDTo': '/FastReport.Export.axd?putReport=',
'makePreviewByUUID': '/FastReport.Export.axd?makePreview=',
These parameters should contain the path to the handler FastReport relative to the root of web site. If your path is different from what is written, it must be corrected, for example:
'getReportByUUIDFrom': '/oursite/FastReport.Export.axd?getReport=',

4. When WebReport is used in ASPX markup, you need drag-n-drop the object on a page and set the properties. For MVC you need write the code in the controller:

4.1.    Enables editing of reports:
webReport.DesignReport = true;

4.2.    Set the unique object name WebReport, necessary for further identification in the call-back page while maintaining the edited report:
webReport.ID = "MyDesignReport1";

4.3.    Prohibits script editing the report in On-line Designer, or if you want to allow editing - assign true:
webReport.DesignScriptCode = false;

4.4.    Specify the path to the main file of the report designer, the folder with the designer should be copied to the appropriate place of web-application:
webReport.DesignerPath = "~/WebReportDesigner/index.html";

4.5.    Set the path to the call-back page on the site, the call to be executed after the report is saved to a temporary folder. Example for MVC path to View:
webReport.DesignerSaveCallBack = "~/Home/SaveDesignedReport";
or, an example for ASPX:
webReport.DesignerSaveCallBack = "~/DesignerCallBack.aspx";
The following parameters sends in the GET request: reportID="here is webReport.ID"&reportUUID="here is saved report file name". In this context reportID corresponds to the object WebReport.ID, and reportUUID the file name that is stored in a temporary folder. The developer shall perform further actions to save the report to the source file on the disk, database or cloud storage. Temporary file named reportUUID must be removed from the temporary folder after saving. Sample code call-back pages will be shown below.

4.6.    Set the path to the temporary folder in which to save the edited reports before calling the call-back, in a folder must be set write permissions:
webReport.DesignerSavePath = "~/App_Data/DesignedReports";

4.7.    Set the lifetime of WebReport object in servers cache in minutes, the default time is 60:
webReport.CacheDelay = 120;

5. Create a call-back page to save the edited reports.

5.1.    If you are using layout ASPX, you need to add the following code in the Page_Load event handler:

protected void Page_Load(object sender, EventArgs e)
{
string reportID = Request.QueryString["reportID"];
string reportUUID = Request.QueryString["reportUUID"];
// 1. ReportID value identifies the object that caused the designer. The value corresponds to the property webReport.ID, which was filled by a call of the designer.
// 2. Combining the path that we have filled in the property webReport.DesignerSavePath, and the resulting reportUUID, we get the path to the temporary file with edited report.
// 3. This file can be opened and saved in the right place for us to drive or the cloud or in a database.
// 4. The temporary file must be deleted after saving.
}

5.2. In MVC markup you need to create a method in the controller and empty View. The code in the controller:

public ActionResult SaveDesignedReport(string reportID, string reportUUID)
{
// 1. ReportID value identifies the object that caused the designer. The value corresponds to the property webReport.ID, which was filled by a call of the designer.
// 2. Combining the path that we have filled in the property webReport.DesignerSavePath, and the resulting reportUUID, we get the path to the temporary file with edited report.
// 3. This file can be opened and saved in the right place for us to drive or the cloud or in a database.
// 4. The temporary file must be deleted after saving.
return View();
}

When creating handlers Call-back pages for saving reports special attention should be paid to filtering and checking of received in Get request parameters. Be sure to check them to null.

Best place for object with Online Designer is at the bottom of the page. The recommended width is 100% or pixels at least 930px. Height of the object is recommended to set at least 600px.

At the moment in online designer have not any possibilities to edit the data sources. You need create and register it in the application code before calling the designer. You can make it in code of MVC controller after loading a template in object or in the event handler StartReport for ASPX. You can register a data source for a command WebReport.Report. RegisterData(DataSet, “DataSetName”). Some details of registering data sources can be found in Programmer's Guide.

Also you need to create and register a data source before editing of new report in Online Designer.

In addition to the above written you can see an example of using the designer in one of our demonstration projects that come together with FastReport.NET  \Demos\C#\MvcRazor. Also you can check our on-line example here https://www.fast-report.com:2015/razor/Home/Designer

Thank you for attention!

We ready to answer your questions, please contact us: support@fast-report.com