We are concluding a series of articles about events in the reporting tool for JavaScript applications. We have already covered report and viewer events, and today we will introduce you to the events of the report designer.

---

Designer events

onPrepareVariables

The event is called at the beginning of report construction before populating the variables in the report. The event occurs immediately after processing the onPrepareVariables event on the StiReport instance. The table below shows the list of event handler arguments:

{
    event: "PrepareVariables",
    sender: "Designer",
    report: StiReport,

    preventDefault: boolean,
    async: boolean,
    
    variables: []
}

An example of replacing a variable value:

designer.onPrepareVariables = (args, callback) => {
    args.variables[0].value = "Replace value";
}

onBeginProcessData

The event is triggered before requesting the data needed to build the report. It occurs immediately after processing the onBeginProcessData event on the StiReport instance. Below is a list of arguments for the event handler:

{
    sender: "Designer",
    event: "BeginProcessData",
    report: StiReport,

    preventDefault: boolean,
    async: boolean,
    
    command: string,
    database: string,
    connection: string,

    headers: [],
    withCredentials: string,
    
    // Json
    pathData: string,
    tryParseDateTime: boolean,
    relationDirection: StiRelationDirection,

    // Xsd
    pathSchema: string,

    // Xml
    pathData: string,
    tryParseDateTime: boolean,
    relationDirection: StiRelationDirection,
    
    // Excel
    pathData: string,
    firstRowIsHeader: boolean,

    // OData
    connectionString: string,
    dataSource: string,
    collectionName: string,

    // Sql
    connectionString: string,
    dataSource: string,
    queryString: string,
    timeout: number,
    parameters: { name: string, value: string | number }[],
    escapeQueryParameters: boolean,

    // Gis
    pathData: string,
    separator: string,
    dataType: StiGisDataType,

    // Csv
    pathData: string,
    separator: string,
    codePage: number,

    // DBase
    pathData: string,
    codePage: number
}

Below is an example of replacing a connection string:

designer.onBeginProcessData = (args) => {
    if (args.database == "MySQL")
        args.connectionString = "new connection string";
}

And also an example of a custom implementation of data retrieval:

designer.onBeginProcessData = (args, callback) => {
    if (args.database == "MySQL"){
        args.preventDefault = true;

        var result = {
            success: true,

            rows: [
                ["value1", 1, false],
                ["value2", 1, true],
                ["value3", 2, false]
            ],
            columns: [
                "Column1_name",
                "Column2_name",
                "Column3_name"
            ],
            types:[
                "string",
                "int",
                "boolean"
            ]
        }

        // https://github.com/stimulsoft/DataAdapters.JS/
        callback(result);
    }
}

onEndProcessData

The event is triggered after receiving the data necessary to build the report. It occurs immediately after processing the onEndProcessData event on the StiReport instance. Below is a list of event handler arguments:

{
    sender: "Designer",
    event: "EndProcessData",
    report: StiReport,

    command: string,
    dataSource: string,
    connection: string,
    database: string,

    result: DataSet|any
}

An example of adjusting data from the adapter:

designer.onEndProcessData = (args) => {
    if (args.command == "ExecuteQuery" && args.dataSource == "Categories")
        args.result.rows.push(rowData) ;

    // https://github.com/stimulsoft/DataAdapters.JS/
}

onCreateReport

The event allows modifications to the new report before it is assigned to the designer. It is called immediately before the new template is assigned to the designer. Below is a list of event handler arguments:

{
    sender: "Designer",
    event: "CreateReport",
    report: StiReport,

    preventDefault: boolean,
    async: boolean,

    isWizardUsed: boolean

}

Example of adding JSON to a new template:

designer.onCreateReport = (args) => {
    var report = args.report;

    var database = new Stimulsoft.Report.Dictionary.StiJsonDatabase("DemoData", "http://localhost/Demo.json");
    report.dictionary.databases.add(database);
    report.dictionary.synchronize();
}

onOpenReport

The event offers the opportunity to implement your own method of opening templates and is called before the report file selection dialog box appears for opening a report. Below is a list of event handler arguments:

{
    sender: "Designer",
    event: "OpenReport",
    report: StiReport,

    preventDefault: boolean,
    async: boolean
}

An example of interrupting the call of a dialog box and passing its template:

designer.onOpenReport = (args, callback) => {
    args.preventDefault = true;
    args.async = true;

    args.report = anotherReport;
    callback();
}

onOpenedReport

The event allows you to modify an open report before it is assigned to the designer. It is called after the report is opened and before it is assigned to the designer. Below is a list of event handler arguments:

{
    sender: "Designer",
    event: "OpenedReport",
    report: StiReport,

    preventDefault: boolean,
    async: boolean
}

An example of adding a resource to a report template in asynchronous mode:

designer.onOpenedReport = (args, callback) => {
    args.async = true;

    var xhr = new XMLHttpRequest();
    xhr.open('GET', "Url to image");

    xhr.onload = function () {
	var imageData = xhr.response;

	var resource = new Stimulsoft.Report.Dictionary.StiResource("ImageName");
	resource.content = imageData;
	args.report.dictionary.resources.add(resource);

	callback();
    };

    xhr.send();
}

onSaveReport

This event allows you to modify the report before saving it or to implement your own saving method.
It is triggered after the Save button is clicked and before the report is saved. Below is a list of event handler arguments:

{
    sender: "Designer",
    event: "SaveReport",
    report: StiReport,

    preventDefault: boolean,
    async: boolean,

    fileName: string,
    autoSave: boolean
}

An example demonstrates how to disable saving:

designer.onSaveReport = (args, callback) => {
    args.preventDefault = true;
    var jsonString = args.report.saveToJsonString();
    // save report
}

An example demonstrates how to remove resources from a template:

designer.onSaveReport = (args, callback) => {
	var report = args.report.clone();
	report.dictionary.resources.clear();
	args.report = report;
}

onSaveAsReport

This event allows you to modify the report before saving it or to implement your own saving method.
It is triggered after the Save As button is clicked and before the report is saved. Below is a list of event handler arguments:

{
    sender: "Designer",
    event: "SaveAsReport",
    report: StiReport,

    preventDefault: boolean,
    async: boolean,

    fileName: string,
    autoSave: boolean
}

An example demonstrates how to disable saving:

designer.onSaveAsReport = (args, callback) => {
    args.preventDefault = true;
    var jsonString = args.report.saveToJsonString();
    // save report
}

An example demonstrates how to remove resources from a template:

designer.onSaveAsReport = (args, callback) => {
    var report = args.report.clone();
    report.dictionary.resources.clear();
    args.report = report;
}

onPreviewReport

The event allows you to modify the report before viewing it and is triggered before the template is previewed. Below is a list of event handler arguments:

{
    sender: "Designer",
    event: "PreviewReport",
    report: StiReport

    preventDefault: boolean,
    async: boolean,

    viewer: StiViewer
}

This example demonstrates how to change the reportName property of a report:

designer.onPreviewReport = (args) => {
    var report = args.report;
    report.reportName = "Changed Report Name";
}

onExit

The event allows you to implement the closing of the designer and is triggered after the Exit button is pressed in the File Menu.
To enable the button, you need to set the following parameter:

designerOptions.toolbar.showFileMenuExit = true

This example demonstrates how to remove a div element containing a designer from a page:

var designerOptions = new Stimulsoft.Designer.StiDesignerOptions();
designerOptions.toolbar.showFileMenuExit = true;

var designer = new Stimulsoft.Designer.StiDesigner(designerOptions, "StiDesigner", false);
designer.renderHtml("content");

designer.onExit = () => {
    var designerDiv = document.getElementById("content");
    designerDiv.parentNode.removeChild(designerDiv);
}