Cloud
Облачный сервис для быстрого и эффективного анализа и визуализации данных для вашего бизнеса без необходимости создания своих приложений и программирования.
Working with onDesign and onExit Events
Наши примеры проектов и шаблоны отчётов помогут Вам разобраться в основах работы с нашими продуктами.The viewer and designer can be combined into one edit-and-preview flow, switching between them with a flag.
In Angular.
How it works. A single flag chooses which component renders, so users move from dashboard preview to editing and back within one screen.
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;
}
}onDesignReport— the viewer's Design button; switch the flag to show the designer.onExit— the designer's Exit; re-render the dashboard and switch back to the viewer.
How it works. A single flag chooses which component renders, so users move from dashboard preview to editing and back within one screen.