Use Designer and Viewer on the Same Page

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:

<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
minWidth="1024" minHeight="768" backgroundColor="#e8e8e8"
initialize="onInitialize()" xmlns:viewer="stimulsoft.viewer.*">

...

private function onInitialize(): void
{
StiDesignerFx.initialize();

...
}

...

<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
viewerFx.report = 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
report.designDialog();
}


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
viewerFx.report = report;
}


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

Use Designer and Viewer on the Same Page