This example shows how to edit report template in the designer and show this report in the viewer on the same page. For creating and showing the designer from code you will need to call the StiDesignerFx.initialize() static method. Call this method in the initialize event of the application. If you add the designer or viewer to MXML page as a component, this method is not required:

xmlns:mx="" layout="absolute"
minWidth="1024" minHeight="768" backgroundColor="#e8e8e8"
initialize="onInitialize()" xmlns:viewer="stimulsoft.viewer.*">


private function onInitialize(): void



<viewer:StiViewerFx id="viewerFx" left="415" right="20" top="20" bottom="20" />

First, in the onCreateNewReportClick() event create a new report object and assign it to the viewer:

private function onCreateNewReportClick(): void
buttonDesignReport.enabled = true;

// Create new report object
report = new StiReport();
// Assign report to Viewer = report;

Next in the onDesignReportClick() event call the report designer dialog with this report:

private function onDesignReportClick(): void
buttonViewDesignedReport.enabled = true;

// Design report in Designer dialog window

Finally, in the onViewDesignedReportClick() event, mark this report as not rendered and assign it to the report viewer again:

private function onViewDesignedReportClick(): void
// Mark report as not rendered
report.isRendered = false;
// Reassign designed report to Viewer = report;

In the screenshot below you can see the result of the sample code.

Use Designer and Viewer on the Same Page