report and viewer events, and today we will introduce you to the events of the report designer.
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
We have already covered Designer events
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";
}
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);
}
}
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/
}
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();
}
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();
}
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();
}
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;
}
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;
}
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";
}
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.