This example shows how to create the report designer from code in runtime. First you need to create the new designer object of the StiDesignerFx class. Also you can set necessary parameters of the designer object, for example its position. After creation you can add the designer visual object to the main container of the application using the addElement() method:

private var _designer: StiDesignerFx;
public function get designer(): StiDesignerFx
return _designer;
public function set designer(value: StiDesignerFx): void
_designer = value;

private function createDesignerFx(): void
// Create new DesignerFx
designer = new StiDesignerFx;
// Set DesignerFx location
designer.left = 0; = 0;
designer.right = 0;
designer.bottom = 0;
// Add DesignerFx to Application

To use this instance of the report designer, you can access to the designer property:

private function onLoadComplete(event: Event): void

// Create new report object
var report: StiReport = new StiReport();
// Load report from XML string
// Design report in DesignerFx = report;

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

Create the Designer in Runtime