Working with onDesign and onExit Events

Our sample projects and report templates can help you learn the basics of working with our products.
View on GitHub
Products ✖Dashboards.JS ✖Viewer ✖Designer ✖Events ✖
The viewer and designer can be combined into one edit-and-preview flow, switching between them with a flag.

In Angular.
@Component({
    imports: [Viewer, Designer],
    template: `
    @if (isViewer) {
        <sti-viewer [report]="report" [options]="viewerOptions"
            (onDesignReport)="onDesignReport($event)" (onOpenedReport)="onOpenedReport($event)"></sti-viewer>
    } @else {
        <sti-designer [(report)]="report" [options]="designerOptions"
            (onExit)="onExitDesigner()" (onAssignedReport)="onAssignedReport($event)"></sti-designer>
    }`
})
export class Example {
    report: Stimulsoft.Report.StiReport;
    viewerOptions: Stimulsoft.Viewer.StiViewerOptions;
    designerOptions: Stimulsoft.Designer.StiDesignerOptions;
    isViewer = true;

    onDesignReport(a) { this.isViewer = false; }
    onOpenedReport(a) { this.report = a.report; }
    async onExitDesigner() { await this.report.renderAsync2(); this.isViewer = true; }
    onAssignedReport(a) { this.report = a.report; }

    constructor() {
        this.report = new Stimulsoft.Report.StiReport();
        this.report.loadFile("Dashboards/Dashboard.mrt");

        this.viewerOptions = new Stimulsoft.Viewer.StiViewerOptions();
        this.viewerOptions.toolbar.showDesignButton = true;

        this.designerOptions = new Stimulsoft.Designer.StiDesignerOptions();
        this.designerOptions.toolbar.showFileMenuExit = true;
    }
}

How it works. A single flag chooses which component renders, so users move from dashboard preview to editing and back within one screen.
View on GitHub Download
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.
I agree