Setting up the designer

Step-by-step manual for set-up the Online Designer:

1. First let’s copy a folder with Online 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>

        <addpath="FastReport.Export.axd" verb="*" type="FastReport.Web.Handlers.WebExport"/>

        </httpHandlers>
    </system.web>

for IIS7:

    <system.webServer>
        <handlers>

        <addname="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/scripts/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. Enable editing of reports:

webReport.DesignReport = true;

4.2. Set the unique object name for WebReport, necessary for further identification in the call-back page while maintaining the edited report:

webReport.ID = "MyDesignReport1";

4.3. Prohibit report's script editing in the On-line Designer (if you want to allow editing - set to 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 (you have to create new blank View specially for call-back in controller with same name):

webReport.DesignerSaveCallBack = "~/Home/SaveDesignedReport";

or, for ASPX:

webReport.DesignerSaveCallBack = "~/DesignerCallBack.aspx";

The following parameters sent 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 is 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. You can use POST query for call-back transfer of report file, read more below in section 4.6. 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. You have to set write permissions to this folder:

webReport.DesignerSavePath = "~/App_Data/DesignedReports";

You can set the property webReport.DesignerSavePath to blank string to activate POST mode.

4.7. Set the lifetime of WebReport object in servers cache in minutes, the default is 60:

webReport.CacheDelay = 120;

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

5.1. If you are using ASPX layout, 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 resaved in the appropriate place (another file, cloud, a database, etc).

// 4. The temporary file must be deleted after saving.

}

5.2. In MVC markup you need to create a method in the controller and an 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 resaved in the appropriate place (another file, cloud, a database, etc).

// 4. The temporary file must be deleted after saving.

return View();

}

To work with POST transfer you need to add the following line before controller:

[HttpPost]

public ActionResult SaveDesignedReport(string reportID, string reportUUID)

5.3. You can use any localizations for Online Designer:

webReport.DesignerLocale = "en";

("en" can be changed to any other supported language, full list of supported languages is similar to files in folder "locales" in the Designer distribution package).

When creating handlers in the Call-back page, pay an attention to filtering and checking of parameters in the Get/POST requests. Be sure to check them for null values.

The best place for object with On-line Designer is at the bottom of the page. The recommended width is 100% or at least 930px. Recommended height of the object is at least 600px.