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);
    }
    If you have any questions, please do not hesitate to contact us.
    By using this website, you agree to the use of cookies for analytics and personalized content. Cookies store useful information on your computer to help us improve efficiency and usability. For more information, please read the privacy policy and cookie policy.